てっく煮ブログ[B!]新着記事・評価 - はてなブックマーク (original) (raw)

3 users
tech.nitoyon.com
子どもが小学校に入学して、毎日、ちょっとした宿題が出るわけですが、その中でちょっと手間がかかったのが 計算カードの宿題 でした。 こんな感じの計算カードの中から親が問題を選んで、子どもに答えていってもらう・・・という宿題です。 どこが面倒なのか カードをあらかじめシャッフルしておくと、毎回同じ問題の並び順になってしまいます。 毎回シャッフルするのは面倒なので、適当にめくりながら出題してると、簡単な問題ばかり出たり、すでに出した問題が出てきたり・・・。 カードを使わずに自分で出題していくと、同じ問題を何度も出してしまったり、答えてもらったあとに自分が出した問題を覚えてなかったり・・・。 アプリを探してみたけど見つからず 面倒を解消すべく、よさそうなアプリを探してみました。 小学生の勉強をトータルでサポートするような本格的なものだったり、1年生の範囲を超えた問題も出てくるアプリだったり・・・は

30 users
tech.nitoyon.com
宇宙旅行風のアニメーション GIF を Golang で生成してみた。完成品はこちら。 ソースコードはこの記事の末尾に掲載しています。以下では使ったライブラリーやテクニックを簡単に説明します。 draw2d を使って描画する Golang の標準ライブラリーだけでは複雑な図形を描画するのは難しいので、draw2d を使ってみることにした。こいつを使えば、線とか弧とかベジェ曲線を描けるし、線の色や塗る色も設定できる。 次のコードでは、draw2dimg と draw2dkit を使って、#808080 の四角を描画する例。 package main import ( "github.com/llgcode/draw2d/draw2dimg" "github.com/llgcode/draw2d/draw2dkit" "image" "image/color" ) func main() {

31 users
tech.nitoyon.com
Golang でアニメーション GIF を作る手順を 3 通り紹介します。 フレームごとの画像から生成 ビデオから生成 Go 言語で最初から生成 フレームごとの画像から生成 こんな GIF 画像があったとします (ここ より拝借)。 変換結果はこんな感じ。 生成するためのコードはこんな感じ。 package main import "image" import "image/gif" import "os" func main() { files := []string{"g1.gif", "g2.gif","g3.gif", "g2.gif"} // 各フレームの画像を GIF で読み込んで outGif を構築する outGif := &gif.GIF{} for _, name := range files { f, _ := os.Open(name) inGif, _ := gi

15 users
tech.nitoyon.com
Go 言語には画像生成する image パッケージが標準で入っている。imagemagick や GD を導入する必要がないので、気軽に画像を生成できて便利そうだったので試してみた。 ただ、標準ではピクセル単位で色を設定することしかできないので、線を引いたり色を塗ったりするには、何らかのライブラリーに頼る必要がある。 今回は、ライブラリーには頼らず、標準で提供されている機能だけでできることを試してみた。 一番簡単な例 簡単な画像を生成する例は次の通り。1つ点を打つだけの例。 package main import "image" import "image/color" import "image/png" import "os" func main() { // 100×50 の画像を作成する img := image.NewRGBA(image.Rect(0, 0, 100, 50))

380 users
tech.nitoyon.com
Visual Studio Code は JavaScript 開発が超絶便利になる可能性を秘めている！ クロスプラットフォームでオープンソースな IDE 環境、Visual Studio Code が公開されたので試してみた。 拡張を入れなくても、デフォルトで JavaScript の「自動 Lint」「Grunt、Gulp 連携」「デバッグ」が動いた。なんだかすごく便利そうな予感。 Windows 環境で起動してみたらこんな画面だった。 なんか黒いが、色は好みにカスタマイズできるし、プリセットからも選べる。 フォルダーを開くことから始まる Visual Studio Code にはプロジェクトの概念はない。 [File] > [Open Folder] からフォルダーを開けばよい。 ためしに、過去に作った Node.js 製の livereloadx のフォルダーを開いてみた。 左側に

197 users
tech.nitoyon.com
1年前の記事 JavaScript フレームワークがデータバインディングを実現する４通りの手法 では、Object.observe() について次のように説明した。 JavaScript オブジェクトが変更されたときにコールバックを呼んでくれる API データバインディングの実装が簡単になる Google Chrome には実装済み ECMAScript 7 に提案中 提案が通れば MV* フレームワークの実装がシンプルになってハッピー 将来を期待されていた Object.observe() であったが、2015 年 11 月頭、ES Discuss メーリングリストへの An update on Object.observe という投稿で、ECMAScript からの提案が取り下げられて、V8 エンジンからも年内に削除される予定であることが表明された。 Object.observe()

3 users
tech.nitoyon.com
Profile nitoyon (にとよん) 京都のベンチャー会社勤務。プログラマ、たまに趣味でデザイン。 詳細

4 users
tech.nitoyon.com
自分はキーボード派なので、コマンドライン ランチャーを愛用している。歴史的には Moonlight → CraftLauch 2 という順に推移してきたのだけど、端末が変わったのをきっかけに CraftLaunch のサイトを見てみたら、いつのまにかメジャーバージョンアップして CraftLaunch 3 ができていた。 この CraftLaunch 3 がなかなかプログラマ魂を刺激するもので、「設定ファイルは config.py」というアグレッシブなものになっている。ソースも公開されていて、コードのほとんど全てが Python で実装されている。ソースを参照しつつ config.py に拡張機能を書くことで、いろいろとカスタマイズできる。 スクリプト言語でソフトウェアを作るということ ちょっと前に、「Lightroom は 40% のコードが Lua で、プラグインも Lua で書く」と

4 users
tech.nitoyon.com
プログラマブルなコマンドライン ランチャー CraftLaunch 3 が楽しい で CraftLaunch 3.Xを紹介しました。 いままで自作プラグインとして、 window_command プラグインopen_folder プラグイン を公開しましたが、そのあと、さらに６つ作って便利に使っているので紹介しておきます。 ソースは全て https://github.com/nitoyon/clnch3_extensions に置いています。 url_alias - URL を開きやすくするプラグイン CraftLaunch から特定の URL を開くのが便利になります。本体の機能でも特定の URL を開く機能はありますが、「コマンド名;パラメータ」の形で入力する必要があって不便なので、; を不要にしてみました。 入力例： @nitoyon と入力して Enter を押すと http://

439 users
tech.nitoyon.com
最近流行りの JavaScript MV* フレームワークは、どれもデータバインディングをサポートしているが、実現方法はフレームワークによって異なる。 この記事では、各種フレームワークがどのようにモデルの変更を検知しているかを次の 4 つのパターンに分類して紹介する。 モデル クラス方式 (Ember.js、Backbone.js、Ractive.js、Knockout.js など) 力ずく方式 (AngualrJS) モデル書き換え方式 (Vue.js) Object.observe 方式 (Polymer) パターン名は私が勝手に名づけたものだけど、このへんの雰囲気が理解できれば、フレームワークごとの個性が分かるだろうし、利用イメージもわきやすいんじゃないかと思っている。 1. モデル クラス方式 「モデルとして扱えるのはフレームワークが用意したモデル クラスのインスタンスだけ」という

119 users
tech.nitoyon.com
最近、JavaScript の MV* フレームワークの中で Vue.js が少しずつ注目を浴びてきているようであります。 5分でわかるVue.jsと、jQueryで頑張ってはいけない理由 | 株式会社インフィニットループ技術ブログ Vue.jsから手軽に始めるJavaScriptフレームワーク - Qiita 軽量でパワフルなデータバインディングMVVM, vue.jsで遊んでみた - mizchi's blog そんなわけで、自分も Vue.js (v0.10.5) を触ってみたのですが、data で渡した値を激しく書き換えるところに面食らったので記事にしておきます。 自作クラスのオブジェクトを Vue.js に渡すと壊される 何らかのビジネスロジックを持ったモデルを作って、それを Vue.js のデータバインディングで HTML に反映しようすると破綻します。 簡単な例として、よくあ

11 users
tech.nitoyon.com
flickr の API が HTTPS のみになるというので、以前作ったスクリプトに手を入れようとしたら無駄に手こずったので、ググって得た知見をメモしておく。 Ruby 1.8 系で証明書を検証しない問題 上記のスクリプトは、さくらのレンタルサーバーにて Ruby で動かしている。 2014 年にどうかという話だけど、Ruby のバージョンは 1.8.7 である・・・。 Net::HTTP で https に接続したら warning: peer certificate won't be verified in this SSL session という警告が出てきて困ったので調べてみた。 つかったコードはこんなやつ。 require 'net/https' https = Net::HTTP.new('www.google.com', 443) https.use_ssl = true

28 users
tech.nitoyon.com
Git for Windows では改行コードが「レポジトリー上は LF」「ワーキング ディレクトリーは CR LF」となるように、git config の core.autocrlf が true となる状態でインストールされる (インストーラーでデフォルトの [Checkout Windows-style, commit Unix-style line endings] を選択した場合)。 Windows 以外の文化圏の人は CR LF を見ると CR がゴミに見えるので、妥当な設定だろう。 標準設定の autocrlf が true のときに、レポジトリー上に CR LF なファイルが紛れ込んでいないか調べたり、紛れ込んだ CR LF を LF に変換したかったのだけど、この手順が少しややこしかったので記事にまとめておく。 (autocrlf を false にして clone した

60 users
tech.nitoyon.com
「ソースコードは 1 行あたり 80 文字以内」とか「コミットログは横幅 72 文字以内」とか、文字数に関するルールはいろいろある。 ルールを徹底するには機械的に判定したい。と思って、簡単なスクリプトを書こうとした瞬間、意外と「1 行あたりの文字数」をカウントするのが難しいことに気付いた。 たとえば、「あA」は「全角 1 文字＋半角 1 文字」なので半角 3 文字分としてカウントしたい。 しかし、UTF-8 の世界では「あA」の文字長は 2 だし、バイト数は 4 (あ=0xE38182、a=0x41) である。 EUC-JP や Shift-JIS の時代なら、単純に「あA」は 3 バイトなので「半角 3 つ分」とすぐ分かったのだけども… (逆に文字長を調べるのが面倒だった)。 はて、どうするか？ というのがこの記事でいいたいこと。 East Asian Width を見よ いろいろとググ

217 users
tech.nitoyon.com
Git for Windows の Git Bash の配色がイマイチだなーと思ってググってたら、Console2 だとか ConEmu を使うと楽にできるっぽいことが、Stack Overflow とか英語のブログで見つかった。 そこで、ConEmu を試してみたら色々と幸せになった (Console2 はそのままでは日本語が使えなかった。解決方法はあるらしいけど…)。 左が Git Bash、右が ConEmu さん。 アンチエイリアス効いてるし、色もオサレ。 起動から色を設定するまで ConEmu を起動すると、初回は設定の保存場所などを確認される。お好みで答えて [OK] を押すと、タブ化した MS-DOS プロンプトみたいなのが立ち上がってくる。 [Win] + [N] を押すと新しいタブを開始できる。 上のキャプチャーのように、どんな環境のタブを開始するかをメニューで聞いてきて

7 users
tech.nitoyon.com
こんにちは！ みなさんガジェットつくってますか！ なんだか最近、色々な種類があるみたいですね！ Yahooナントカとか、Googleガジェットとか、Adobe AIRとか、シルバーナントカとか、あとWindowsサイドバーだとか、Operaナントカとか…。 こういうガジェット的な、ちょっとしたデスクトップ用のツールって、 どうやってつくるのかなーなんて思って、ちょっと調べてみました！ そしたら意外と簡単だった…！ これならぼくにも作れそう！！ ってことで、ちょっとメモしておきますね！ どれにしようかな…！ つくるのが簡単なことWinで動いたらいいや使う人がインストールしやすそうなのがいい こんな感じで考えていくと… Googleガジェット か AIR なのかなー、って思ったんだけど、 プラグインとかインストールはめんどくさいから、なにもせずに使えるものがいいよね！ だから HTA（HTML

14 users
tech.nitoyon.com
Jenkins を Windows 環境に MSI ファイルで導入すると、デフォルトでは C:\Program Files (x86) にインストールされる (64 ビットの場合)。 Java の実行環境を同梱してくれていたり、自動でサービスに登録してくれたりして嬉しいのだけど、気になるのが JENKINS_HOME が C:\Program Files (x86)\Jenkins になってしまう点。ジョブやワークスペース、プラグインなどのデータなどが Program Files の下に置かれてしまう。Windows 的な作法では「アプリケーションのデータは ProgramData や AppData に置きましょう」となっているので少し気持ち悪い。 JENKINS_HOME を変更するには環境変数を設定したらいけそうなんだけど、MSI から導入した場合は環境変数ではなく jenkins.

3 users
tech.nitoyon.com
文字列置換のお話。 通常、replace は１回しか置換してくれない。 >>> "aaaa".replace("a", "A") "Aaaa" 何度も置換させるには、正規表現を使うのが手っ取り早い。 >>> "aaaa".replace(/a/g, "A") "AAAA" 置換前の文字列を文字列で受け取ったときには、正規表現オブジェクトを作ればよい。RegExp コンストラクタの第二引数がフラグ。 function myReplaceGlobal(str, before, after){ var reg = new RegExp(before, "g"); return str.replace(reg, after); } myReplaceGlobal("aaaa", "a", "A"); // AAAA ただ、ドット(.)が任意の文字にマッチしてしまったりと、弊害もある。 myRepl

743 users
tech.nitoyon.com
最近話題の Vagrant さんは「Linux の環境を作ったり壊したりして開発とか試験が楽になるよ」と紹介されることが多いけど、Windows の環境だって作ったり壊したりしたい！ いろいろ調べつつ環境を作ってみたので、その手順を共有しておく。 完成イメージはこんな感じ。コマンドプロンプトから vagrant up をしたら VirtualBox 上に Windows Server 2012 R2 の環境が準備されて、そこにリモート デスクトップで接続している。 いろいろいじったあとに vagrant destroy したら環境は消え去って、vagrant up したら、また、まっさらな状態から使える。 ちょっと注目してほしいのは、ゲスト OS の C:\vagrant にホスト側の Vagrantfile がマウントされているところ。このあたりの処理は Vagrant-Windows

25 users
tech.nitoyon.com
話題の Chef をいまさら試したくなって、手元の Windows 環境に環境を作ってみた。 http://www.getchef.com/chef/install/ からインストーラーをダウンロードしてインストールした。Cygwin を使うと無駄にはまるし、ぐぐるといっぱい出てくる「gem から入れる手順」は公式サイトでは見つからなくなっている。 すべてデフォルトでインストールすると、C:\opscode\chef にファイルがいっぱい展開されていた。 PATH に追加される 2 つのフォルダー インストーラーから Chef を入れると、PATH に C:\opscode\chef\bin C:\opscode\chef\embedded\bin の 2 つが追加される。 C:\opscode\chef\bin には Chef 関係のプログラム (chef-solo, knife など.

49 users
tech.nitoyon.com
スマホやタブレットで写真を表示していると、ピンチでズームしたり、ドラッグで移動したりができて便利なので、あれを Web 上で実現してみたくなった。 最近のブラウザーでは touchstart や touchmove イベントでタッチ情報を取れたり、イベントの touches でマルチタッチを扱えたりするので、実現するための基盤はそろっている。 適当なライブラリーがあるかと思って探してみたが、意外と苦労してしまった。 Hammer.js が使えない タッチを扱うためのライブラリーとしては Hammer.js がメジャーらしい。スワイプ・ピンチ・ドラッグなど、各種イベントにも対応していて、これを使えば一発解決してくれそうだ。 ところが、画像ビューワーを作るには不向きだった。困ったのは次の 2 点。 ピンチやドラッグは個別には動くが、組み合わせたときに「表示位置」と「倍率」の関係を自前で計算する

3 users
tech.nitoyon.com
Windows でたくさんのファイルの作成日時を変更したくなったときに、Perl・Ruby・Python などのスクリプト言語を使おうとしたんだけど、作成日時を変更するための関数がなくて困った。 そもそも UNIX にファイルの作成日時がない stat(2) で取得できる情報のうち時刻に関するものは次の 3 つがある。 atime: 最終アクセス日時 (access time) utime: 最終更新日時 (modify time) ctime: 最終変更日時 (change time) 名前からすると ctime が作成日時 (creation time) っぽいけど、ctime はファイルを更新したときとか chmod や chown したときなどに自動的に現在時刻に更新されるようだ。 atime と utime は utimes(2) で任意の時刻に変更できるんだけど、ctime を

22 users
tech.nitoyon.com
この前、10 年以上前に趣味で作っていたフリーソフトについてメールで質問が来た。もはや完全に記憶から消えているだけでなく、いま使っている PC にソースコードもない。何も分からない、答えられない。 そのままでは古いソースコードも成仏しきれない。供養するために、古い HDD を引っ張り出して探したところ、自宅サーバーをやってた HDD の中に CVS レポジトリーが見つかった。せっかくなので、Git に変換して GitHub で公開してみた (その１, その２)。これで成仏できるだろう。 そこで、この記事では CVS レポジトリーを Git に移行した手順をまとめておく。レガシーな CVS から Git に移行したい人の参考になるとうれしい。 git cvsimport の使い方 Git には git-cvsimport というコマンドがある。CVS の履歴を Git に変換してくれる。 C

20 users
tech.nitoyon.com
Jekyll を Windows で動かそうとすると、いくつか難関がある。今回、自分の環境を新しく作り直したキッカケがあったので、導入までの手順をメモしておく。 自分の環境は Windows 8 Pro x64。各種ツールのバージョンは次の通り。 Jekyll 1.3.0 Ruby 2.0.0 p247 DevKit 4.7.2-20130224-1432 Python 2.7.6 Pygentize 1.6 基本的には Running Jekyll on Windows – Madhur Ahuja の手順に近いけど、Pygments の導入手順などは少し違っているのと、日本語独自の問題についても書いている。 1. Ruby 環境を整備する RubyInstaller for Windows から One-Click Ruby のインストーラーと Development Kit を導入す

65 users
tech.nitoyon.com
クラスタリングの定番アルゴリズム K-means 法（K平均法）の動作原理を理解するために、D3.js を使って可視化してみました。 図をクリックするか [ステップ] ボタンを押すと、1ステップずつ処理を行います [最初から] ボタンを押すと、最初の状態に戻ります [新規作成] ボタンを押すと、N (ノード数) と K (クラスタ数) の値で新しく初期化します 古いブラウザーではうまく表示できない可能性があります (IE 10、Firefox 25、Chrome 30 で動作確認しています) K-Means 法とは 英語版 Wikipedia の k-means clustering - Wikipedia, the free encyclopedia の手順に沿って実装しています。 英語版の手順をザックリと書くとこんなイメージになります。 初期化: N 個のノード (丸印) と K 個の

19 users
tech.nitoyon.com
circles.enter() .attr('cx', function(d, i) { return i * 280 / n + 10; }) のような座標を計算する関数が何箇所かに散らばっていた。 これ、d3.svg.line() を使ったらまとめられるし、便利な interpolate の機能も使えるよ、というのが今回のお話。 d3.svg.line() の使い方 たとえば var line = d3.svg.line() .x(function(d, i) { return i; }) .y(function(d, i) { return d * d; }); としておくことにする。line.x() とすると function(d, i) { return i; } を返してくれるので、関数を再利用してコードが読みやすくなる。line.y() も同様。 さらに、line([5,2,

187 users
tech.nitoyon.com
D3.js は「ビジュアライズ用のライブラリー」だと紹介されがちなんだけども、意外にも D3.js にはグラフを描画する機能がない。 D3.js のトップページには次のように書いてある。 D3.js はデータからドキュメントを生成するためのライブラリーです。D3 は HTML, SVG, CSS を使ってデータに命を吹き込みます。Web 標準を重要視しているので、独占的なフレームワークに縛られません。強力なビジュアライズ用のコンポーネントと data-driven な DOM 操作手順を組み合わすことで、モダン ブラウザーの能力を最大限に活用できます。 D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG

119 users
tech.nitoyon.com
最近、Grunt と grunt-contrib-watch を使っているのだけど、grunt-contrib-watch が CPU を消費しがちである。 watch 対象のファイルが少ないうちは grunt-contrib-watch は問題なく動くんだけども、ファイル数が増えてくると CPU の消費量が増えてくる。自分の環境では、1,000 個ぐらいのファイルを監視していると、常時 10% 程度 CPU を消費している。 この問題は既知であり、FAQ には次のように書いている。 たくさんのファイルを監視している場合、デフォルトの interval の値が小さすぎるかもしれない。options: { interval: 5007 } のようにして増やしてみてほしい。詳しくは issues #35 と #145 を参照のこと (※日本語訳は私によるもの) Another reason i

16 users
tech.nitoyon.com
Node.js のファイル監視の API には fs.watch() と fs.watchFile() の 2 つがある。 微妙に機能がかぶっているし、使い分けが分かりにくかったので調べてみた。 公式情報を見る まずは公式のドキュメント (v0.8.0)を見てみた。 fs.watchFile(filename, [options], listener) Stability: 2 - Unstable. Use fs.watch instead, if available. Watch for changes on filename. fs.watch(filename, [options], [listener]) Stability: 2 - Unstable. Not available on all platforms. Watch for changes on filename,

次のページ