Go 言語でアニメーション GIF を作成する
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
Object.observe の死 (ECMAScript の提案取り下げ、V8 からも削除予定)
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()
JavaScript フレームワークがデータバインディングを実現する４通りの手法
最近流行りの JavaScript MV* フレームワークは、どれもデータバインディングをサポートしているが、実現方法はフレームワークによって異なる。 この記事では、各種フレームワークがどのようにモデルの変更を検知しているかを次の 4 つのパターンに分類して紹介する。 モデル クラス方式 (Ember.js、Backbone.js、Ractive.js、Knockout.js など) 力ずく方式 (AngualrJS) モデル書き換え方式 (Vue.js) Object.observe 方式 (Polymer) パターン名は私が勝手に名づけたものだけど、このへんの雰囲気が理解できれば、フレームワークごとの個性が分かるだろうし、利用イメージもわきやすいんじゃないかと思っている。 1. モデル クラス方式 「モデルとして扱えるのはフレームワークが用意したモデル クラスのインスタンスだけ」という
ConEmu 突っ込んだら Git for Windows の Git Bash がカッコよくなった
Git for Windows の Git Bash の配色がイマイチだなーと思ってググってたら、Console2 だとか ConEmu を使うと楽にできるっぽいことが、Stack Overflow とか英語のブログで見つかった。 そこで、ConEmu を試してみたら色々と幸せになった (Console2 はそのままでは日本語が使えなかった。解決方法はあるらしいけど…)。 左が Git Bash、右が ConEmu さん。 アンチエイリアス効いてるし、色もオサレ。 起動から色を設定するまで ConEmu を起動すると、初回は設定の保存場所などを確認される。お好みで答えて [OK] を押すと、タブ化した MS-DOS プロンプトみたいなのが立ち上がってくる。 [Win] + [N] を押すと新しいタブを開始できる。 上のキャプチャーのように、どんな環境のタブを開始するかをメニューで聞いてきて
Vagrant で作ったり壊したりできる Windows 環境を手に入れるまでの手順
最近話題の Vagrant さんは「Linux の環境を作ったり壊したりして開発とか試験が楽になるよ」と紹介されることが多いけど、Windows の環境だって作ったり壊したりしたい！ いろいろ調べつつ環境を作ってみたので、その手順を共有しておく。 完成イメージはこんな感じ。コマンドプロンプトから vagrant up をしたら VirtualBox 上に Windows Server 2012 R2 の環境が準備されて、そこにリモート デスクトップで接続している。 いろいろいじったあとに vagrant destroy したら環境は消え去って、vagrant up したら、また、まっさらな状態から使える。 ちょっと注目してほしいのは、ゲスト OS の C:\vagrant にホスト側の Vagrantfile がマウントされているところ。このあたりの処理は Vagrant-Windows
タッチ操作に対応した画像ビューワーをJavaScriptで作るならD3.jsが便利
スマホやタブレットで写真を表示していると、ピンチでズームしたり、ドラッグで移動したりができて便利なので、あれを Web 上で実現してみたくなった。 最近のブラウザーでは touchstart や touchmove イベントでタッチ情報を取れたり、イベントの touches でマルチタッチを扱えたりするので、実現するための基盤はそろっている。 適当なライブラリーがあるかと思って探してみたが、意外と苦労してしまった。 Hammer.js が使えない タッチを扱うためのライブラリーとしては Hammer.js がメジャーらしい。スワイプ・ピンチ・ドラッグなど、各種イベントにも対応していて、これを使えば一発解決してくれそうだ。 ところが、画像ビューワーを作るには不向きだった。困ったのは次の 2 点。 ピンチやドラッグは個別には動くが、組み合わせたときに「表示位置」と「倍率」の関係を自前で計算する
CVS レポジトリを Git に変換した手順とか注意点とか
この前、10 年以上前に趣味で作っていたフリーソフトについてメールで質問が来た。もはや完全に記憶から消えているだけでなく、いま使っている PC にソースコードもない。何も分からない、答えられない。 そのままでは古いソースコードも成仏しきれない。供養するために、古い HDD を引っ張り出して探したところ、自宅サーバーをやってた HDD の中に CVS レポジトリーが見つかった。せっかくなので、Git に変換して GitHub で公開してみた (その１, その２)。これで成仏できるだろう。 そこで、この記事では CVS レポジトリーを Git に移行した手順をまとめておく。レガシーな CVS から Git に移行したい人の参考になるとうれしい。 git cvsimport の使い方 Git には git-cvsimport というコマンドがある。CVS の履歴を Git に変換してくれる。 C
D3.js の Data-Driven な DOM 操作がおもしろい
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
Git にパッチを送って取り込まれた話
Git の挙動に変なところを見つけたので、パッチを作って Git のメーリングリストに投げてみたところ、何度かのレビューを経て、無事に取り込まれた。 Git に貢献したい人とか、オープンソース開発の流れに興味がある人もいるだろうから、作業の流れを書いておくことにする。 1. バグを発見する 何はともあれ、修正したいところを見つけるところから。 先日、git difftool --dir-diff が便利すぎて泣きそうです という記事を書いたが、difftool --dir-diff の挙動を調べているうちに、一時ファイル書き戻し条件が変なことに気づいた。 手元のバージョンが古いのかとも思ったが、master ブランチでも再現したので、ちょっくら深入りしてみた。git difftool は Perl スクリプトだったので、ソースコードに print を追加しつつ挙動を探っていった。しばらく調
Node.js 0.12 では yield が使えるのでコールバック地獄にサヨナラできる話
Node.js の次のメジャーバージョン 0.12 で yield が使えるようになります。 そのおかげで、JavaScript のコールバック地獄に光が差し込むのです。ああ、さようなら、コールバック地獄。 7 年ごしで実現した yield 2006 年、Firefox 2 のリリースと同時に yield は JavaScript 界に登場しました。随分と前の話ですね。 登場した当時は JavaScript 界隈でけっこう話題になっていました。 JavaScript 1.7 の yield が凄すぎる件について - IT戦記 Latest topics > JavaScript 1.7のyield文ってなんじゃらほ - outsider reflex JavaScript 1.7 の新機能: Days on the Moon 登場したときにはインパクト大きかったものの、結局 Firefox
-webkit-text-size-adjust: none を絶対に設定してはいけない理由
PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。 以上。 で終わってしまうと記事にならないので、ちゃんと説明しておく。 そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。 これを制御するのが CSS の -webkit-text-size-adjust である。 文字サイズ自動調整の具体例 次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-
jQuery 1.9 のソースマップ対応で圧縮版でもデバッグが簡単になった話
jQuery 1.9 がリリースされました。1.9 の新機能の中ではあまり注目されていませんが、ソースマップに対応したのが地味に便利そうです。 というのも、圧縮版の jquery.min.js を使っていると 何か問題が起きたときにスタックトレースを眺めても jQuery の部分が意味不明 デバッガーで jQuery のソースにステップインしても意味不明 といった理由で、開発中には非圧縮の jquery.js を使うことが多かったわけです。 それが、1.9 からはソースマップに対応したので圧縮版のままでのデバッグが簡単になってます。 超簡単な使い方 ソースマップに対応したブラウザーは現時点では Google Chrome のみなので、Google Chrome の手順を説明します。 (Firefox はソースマップへの対応を計画中らしい) 事前準備を忘れずに Google Chrome で
俺の最強ブログ システムが火を噴くぜ
ブログを「はてなダイアリー」から、自分のサーバーに移転しました。 せっかく移転するなら、2012 年の流行を取り入れた挑戦的なブログにしてみたい！と思い、構想から半年、ついにこの日を迎えることができました。 せっかくなので、凝ったところを自慢させてください。 これが俺史上最強のブログ システムだ ブログ システムとして Jekyll を採用 Jekyll のプラグインを自作 (はてな記法対応、英語ブログとの統合) 履歴管理は GitHub を利用、git push で自動でデプロイ コメント欄には DISQUS を採用、旧ブログへのコメントはインポート済み HTML5 マークアップ、CSS3、レスポンシブ Web デザインでのモバイル対応 盛りだくさんですね。 詳しく説明していきます。 ブログ システムとして Jekyll を採用 最近では WordPress を選ぶのが普通でしょう。Wo
コンプガチャの確率マジックを中学生にも分かるように説明するよ - てっく煮ブログ
コンプガチャが話題になっています。コンプガチャにハマりやすい理由として「最初は当たりやすいが、だんだん確率が低くなる」という指摘があります。なぜ「確率が低くなる」という現象おきるのでしょうか。この記事ではコンプガチャの裏側にある確率マジックを分かりやすく解説します。サイコロの面を全部そろえるゲームいちばん身近な確率といえばサイコロです。サイコロを使ったこんなゲームを考えてみます。サイコロ コンプのルール サイコロを 1 回振るには 10 円が必要。 6 つの面をすべてを出せば、ペットボトル飲料をプレゼント。「サイコロの 6 つの面をすべてコンプしよう」というゲームなので、シンプルな「コンプガチャ」といえます。このゲーム、あなたなら参加しますか？6 つの面を全部だせばよいので、運がよければ 6 回（60円）でペットボトルが手に入ります。なんだかお得そうです。ためしにやってみると・・・サイコロ
「コピペできない文章」がコピペできなかった理由 - てっく煮ブログ
html5先日公開した 絶対にコピペできない文章を作ったったwwww はおかげさまで好評だったようで嬉しい限りです。「不思議！」「どういう仕組みなんだ？」という声も多かったので裏側を紹介します。コピペできない訳ではないタイトルは「コピペできない」としていいますが、実際にはコピペはできます。正確に表現すると「コピーすると違う文字になる」という状態になっています。 ではなぜ違う文字になるのでしょうか。結論をいってしまうと「そこにある文字が、人間の目に見える文字とは違う」からです。といっても、これでは分からないですね。今回のために作成された独自フォントトリックの肝は「フォント」です。フォントといえば、文字の見た目を変えるために利用するものです。たとえば、「ほ」という文字を「メイリオ」フォントで表示するとこうなります。フォントを変えて「HG創英角ポップ体」フォントで表示すると、ポップな雰囲気になり
UTF-8 対応の msysGit 1.7.10 リリース！ いよいよ Windows で git できるよ!!! - てっく煮ブログ
git先日、msysGit（Git for Windows）がいよいよ公式に UTF-8 をサポート！ という記事で「UTF-8 対応のコードがコミットされた」ことをお伝えしましたが、ついに、UTF-8 対応の新バージョン、msysGit 1.7.10 がリリースされました。いよいよ Windows でも日本語ファイル名を扱えるようになったので、「git では "詳細設計所仕様書.xlsx" をコミットできないんでしょ？」とブーブーいってた人を説得できる材料はそろいました!!!!それを記念して、この記事では UTF-8 対応の msysGit 1.7.10 を試してみた ブーブーいう人を黙らせるための「GUI で git する Windows 向けツール」まとめの2本立てでお送りしたいと思います。UTF-8 対応の msysGit 1.7.10 を試してみたさっそく Google Code
20世紀 FOX オープニング風のパロディ動画を作る方法 - てっく煮ブログ
いわずと知れたアレのパロディーを作ってみた。サンプルはこれ。かなり再現度が高い。イベントのオープニングとか結婚式に流すビデオなんかにオリジナルの文字を表示すると盛り上がるかもしれない。一見作るのが大変そうに見えるが、どこかのえらい人が Blender のファイルを作ってくれているので、これをちょっと修正するだけで作れてしまった。以下に作成までの簡単な手順を紹介しておく。作成手順Blender と blend ファイルを入手する Blender http://www.blender.org/blend ファイル http://blender.sixmonkeys.geek.nz/albums/album41/FOX_Logo_by_Matt_Hoecker.blend (リンク先が切れていたら、同じファイル名で検索すると、他の誰かがアップロードしたものが見つかるはず)Blender をインス
Messages for Japan に見る Google UI デザインの変化 - てっく煮ブログ
GoogleMapsAPIちょっと前になるが、Google が Messages for Japan - Home というサイトを公開した。世界中の人が日本への応援メッセージを投稿する Web サービスだ。 Messages for Japanメッセージは全て、日本語に自動翻訳されており、世界中からのメッセージに勇気付けられる。HTML5 バリバリではない一見 Flash を使ってるかのように見えるぐらいに派手な見た目なんだけど、Google の HTML5 押しの流れの延長で、JavaScript で組んである。Flash は一切使われていない。iPhone でも閲覧できるようなので、Flash は最初から選択肢に入らない。かといって HTML5 バリバリかと思いきや、実はそれほどでもない。たとえば、トップページの hover すると大きくなるアイコン。いかにも canvas を使ってそ
HTML5 で書道が楽しめる The Shodo の完成度がすごい - てっく煮ブログ
ちまたでは HTML5 が話題ですね。「HTML5 ではこんなこともできます」といった紹介はいろんなところでみかけますが、「じゃあ、ぶっちゃけ、どんなサイトが作れるのよ」がいまいち見えてない人も多いのではないでしょうか。そんな中、HTML5 の機能を活用した完成度の高いサイトが登場していました。その名も The Shodo。 The Shodo (http://www.theshodo.com/)ブラウザ上で書道体験The Shodo ではこんな感じにブラウザ上で書道を楽しむことができます。書くときにカーソルの位置に手が大きめに表示されるのが本当に書道している気分にさせてくれます。硯をクリックして色の濃さを選んだり、筆をクリックして筆の太さを選んだりもできます。ちょっとした動画や BGM が雰囲気を盛り立てるトップページで [Write] を選ぶと書き始められるのですが、最初に動画で墨を擦
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Space travel animated GIF generated by Golang