Go 言語で宇宙旅行風のアニメーション GIF を作った
宇宙旅行風のアニメーション 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() {
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 点。 ピンチやドラッグは個別には動くが、組み合わせたときに「表示位置」と「倍率」の関係を自前で計算する
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
Node.js＋CoffeeScript でソースマップを使ってデバッグを楽にする方法
以前、jQuery 1.9 のソースマップ対応で圧縮版でもデバッグが簡単になった話 を書いたけど、Node.js でソースマップする方法を紹介する。 何がうれしいかというと、Node.js で CoffeeScript や TypeScript、JSX なんかを使ったときに、例外に含まれるスタックトレースに変換前の位置を表示できる。 やり方は簡単。source-map-support というモジュールを require() するだけ。 ためしに使ってみた GitHub に動かし方が書いてあるので、その通りにやってみる。 こんな感じの demo.coffee があったとする。 require 'source-map-support' foo = -> bar = -> throw new Error 'this is a demo' bar() foo() npm install sourc
ファイル編集したら即ブラウザー再読込させる LiveReloadX を作った
Web 開発してると、ソースを編集して、ブラウザーをリロードして、という作業の繰り返しになりがちだ。ソースを編集したら、自動でブラウザーをリロードしてくれるような夢のツールがあれば便利そうだ。 この分野では CodeKit や LiveReload などが有名なんだけど、もれなく有料だったり GUI だったりする。そこで、LiveReload のオープンソースな部分を参考にしつつ、コマンドラインで使える LiveReloadX というものを作ってみた。 特長はこんなところ。 Node.js を使ってるので Windows/Mac/Linux 問わずに動かせる 開発環境のブラウザーだけでなくスマートフォンのブラウザーもリロードできる 無料 インストール方法 インストールは超簡単！ Node.js をインストールする。 コマンドラインで npm install -g livereloadx を
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
AS3 で埋め込みフォントを使うテクニック - てっく煮ブログ
as埋め込みフォントを使う場合のちょっとしたTipsを３つ紹介しておく。1. 何も考えずにフォントを埋め込む方法フォントを埋め込むには、Embed メタタグを利用する。 package { import flash.display.Sprite; import flash.text.TextField; public class EmbedFontTest extends Sprite { [Embed(source='アニトＭ-教漢.TTF', fontName='anito')] private var font:Class; public function EmbedFontTest(){ stage.align = "TL"; stage.scaleMode = "noScale"; var textField:TextField = new TextField(); textFi
JSDokan で JSON をファイルシステムに - てっく煮ブログ
JavaScriptWindows版FUSE Dokan がオープンソースになったよ！！ - yukobaの日記 が面白そうだったので、ちょっと触ってみた。Dokan は Windows でファイルシステムを作るためのライブラリ。C, .NET, Ruby から気軽にファイルシステムが使えるようになる。それを id:yukoba さんは Java で動くようにして、さらに Rhino を使って JavaScript 製のファイルシステムをデモしている。それならば、と C# 経由で JScript を叩くライブラリを作ってみた。題して「JSDokan」。JSDokan のサンプル「JsonFS」JSDokan を使ったサンプルとして JSON をファイルシステムにする「JsonFS」というのを作ってみた。例えば、このような JSON が... private var json:Object
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
