Glifo は Photoshop で作成したベクターシェイプを Web フォントに変換できるエクステンションです。 Glifo 上のページの１番下に購入ページへのボタンがあるので、 そこから購入することができます。 使い方 購入 → ダウンロード が完了したら、Photoshop …

詳細はここに載ってます。 Console API Reference console.log("%cMy name is...", "font-size: 2em"); こんな感じで %c を置くことで、次のパラメータに書いたスタイルが適用されるみたいです。 console.log("%cMy name is...%cturusuke", "font-size: 2em"…

PHP で GD 使って行う画像処理をもっと楽に、 わかりやすく扱えるフレームワーク、ImageWorkShop を紹介します。 ImageWorkShop は以下からダウンロードできます。 http://phpimageworkshop.com/ 今回紹介するバージョンの 2.0.0 では namespaces が使われて…

Facebook の JavaScript SDK のFB.Event.subscribe を使えば表題に書いたようなことは出来るみたいです。 ドキュメント: FB.Event.subscribe このメソッドは第一引数にハンドリングするイベント名、第二引数にコールバック関数を書きます。 FB.Event.subscri…

Masonry Masonry は Pintest のように、ウィンドウ幅内に収まるように各要素をうまいこと並べてくれるライブラリです。 話題になったのはちょっと前ですが、最近ちょっと使う機会があったので使い方をメモしておきます。 ダウンロードは下記から http://maso…

ソーシャルアプリの Line には特に公式の API のようなものは用意されていないようなので、 Web から特定のアカウントの画像を変えたり、メッセージを送ったりといったことはできません。 しかしアプリ内で作成できる自分の QR コードを使えば、今回の題目の…

CreateJS でベクターシェイプを描写するためには Graphics クラスのメソッドを使って書いていきます。 単純な図形なら問題ないのですが、 複雑なパスを書くとなるとちょっと面倒ですね。 Toolkit for CreateJS を使ってFlashで書いて出力する方法もあるので…

Alfred は PC上のアプリケーションを即座に検索でき、立ち上げることの出来るアプリケーションランチャーです。 これだけでも便利なのですが、Powerpack と呼ばれるプラグインを購入し適応してみました。 購入はこちらから行います。 購入の手続きが完了した…

YouTubeAPI を使ってみよう! YouTube は動画のページから埋め込み用のタグをコピーしてきて、 コンテンツに貼り付けることでサイト内にプレーヤーを表示させることができます。 しかし、コンテンツによっては再生ボタンをオリジナルのものに変えたかったり、…

CodePen は ユーザが HTML,CSS,JavaScript で書いてコードを投稿して公開したり、誰かのコードをForkしたりすることができるSNSです。 ギャラリー上で CSS や JavaScript で書いたアニメーションの一部を見ることができるので、 動きのあるコードは人気があ…

CanvasやCSS3アニメーションを使ったコンテンツが普及する一方で、 実用で利用するにあたって、開発のスピードが課題になってきている気がします。 GUIツールとしてはAdobe Edge、 Hypeだったり、WebCodeなんてツールも出てきていたりしていますが、 パーテ…

EaselJSのTextクラスは、 var text = new createjs.Text("Hello World", "60px Arial", "#ffffff") のように、 第一引数に表示させたい文字、 第二引数にフォントのスタイル、 第三引数にフォントの色 を指定することでインスタンスを作成することができます…

EaselJSでは、 bitmap = new createjs.Bitmap("test.png") のようにBitmapクラスに画像のURLを渡し、 canvas = document.getElementById('canvas') stage = new createjs.Stage(canvas) のように作成したステージにBitmapクラスのインスタンスをaddChildして…

FacebookのSDKを使ってユーザ情報を扱うようなWebアプリケーションでは、 一度ユーザの情報を利用することを許可してもらう必要があるため Facebook側のURLへ必要なパラメータを付けてリダイレクトし、 ユーザの意志で情報の利用の許可を行わせます。 ユーザ…

集中して作業していると時間があっという間に過ぎてしまうことがあります。 気づいたら外出の時間を過ぎていた！なんてことになったら大変ですね。 Macには時報をアナウンスしてくれる機能がついていたので、 今回はそれを有効にする方法を紹介します。 時報…

Processing ProcessingはJavaをベースにしたCGやビジュアル表現のプログラミングに特化しているプログラミング言語です。 ActionScriptやJavaScriptなどの他の言語にも扱えるようにするライブラリが用意されているので、 Processingで書いたものが他の言語で…

3日目 PreloadJS PreloadJSはファイルの先読みを行って、 読み込み状況を把握したり、完了後に処理を実行させたりといった処理をサポートしてくれるCreateJSのライブラリ群の一つです。 EaselJSなどと組み合わせずとも単体でも利用することができます。 予め…

CreateJS触ってみたいなーということで、 ドキュメントとサンプルコードを見ながらもまったり書いていこうと思います。 2日目 TweenJS https://github.com/CreateJS/TweenJS/ 上のURLの飛び先からZIPボタンを押してダウンロードしてきます。 展開するとlibフ…

2015.06.16 記事の内容を全面的に書き直しました。 目次 CreateJS とは何者なのか? EaselJS をはじめるための準備 EaselJS を使うメリット Canvas にはオブジェクトを管理する機能はない Canvas はウォールペイントのようなもの？ ベクター図形の描画がより…

Dropzone.js dropzonejs.com 2014月7月1日: dropzone.js のバージョンが上がり、以前の記事の内容では動作しないものが多くなっていたため、2014年7月1日時点での最新版 3.10.2 の仕様にあわせて記事内容を見直し、改訂しています。(更新が遅くなってしまっ…

自分がその日覚えたこと、気づいたことをもっと記録しておきたいなー という訳で日記アプリを探して、 DayOneがよさそうだったのでメモしておきます。 Day One Day OneはMac用日記アプリです。 Mac版はAppStoreで$9.99で販売されています。 Day One | A simp…

「要素の中心から拡大するようなアニメーション作ってください」さてどうする どういうことかというと、 CSS3を使えばtransform-orignを50% 50%にすることで 変形の中心点をすらすことができるので、 これとtransitionやanimationプロパティを組み合わせれば…

珍しくブログカテゴリーの投稿です。 1月も半分を過ぎてしまいましたが、 簡単に去年の振り返りと来年の抱負を書いておきました… 2012年 本来こういうものは年が明ける前に書いたほうがいいですよね‥ まあ書きそこねてしまったので今書いているわけなのです…