この記事は Alfred Advent Calendar 2014 2日目の記事です。 Alfred は find というキーワードを使って、 「find 探したいファイル名」 と入力することで該当するファイルを探してくれる機能があります。 が、find を使うと全てのファイルから候補を出される…

この記事は Alfred Advent Calendar 1日目の記事です。 Alfredには、スニペットを保存しておける機能があります。 スニペットは Preferences -> features -> Clipboard から登録することができます。 毎回設定画面から登録しなければいけない手間はあります…

先日、この本の著者の一人である @watilde 氏より「JavaScript エンジニア養成読本」を献本していただきましたので、本書の書評をもってお礼の挨拶にかえさせていただきます。 本書は、以下のような制作者を対象にしていると示されています。 複数人で開発す…

Windows を触る時間が増えました 仕事で作業する OS が Windows になりました。 今までは家の PC の OS も仕事先も MacOS だったので不安はありましたが、3,4 年前までは Windows だったしなんとかなるだろうと思っていました。 しかし実際に作業していると…

MacBook Pro 買い替えました 最近外で作業することも増えてきたので、もっといい環境を自分に与えてモチベーションを上げることにしました。 先日発売された MacBook Pro Retina ディスプレイモデル 13インチ の一番下位モデルです。 カスタマイズは特にして…

Wordpress の投稿画面で、文字を選択しビジュアルエディタでリンクをつけようとした際に、IE11 だとリンクが貼られないといった現象に出くわした。 解決策 IE のバージョンを上げる前まではできていたようなので、TinyMCE Advanced と WordPress のバージョ…

gulp.js 自分用の gulp.js 覚書のメモ。以下の内容は http://d.hatena.ne.jp/anatoo/20140420/1397995711 を大変参考にさせていただきました。 グローバルで利用できるようにインストール npm install -g gulp npm init で package.json を作成しておく npm …

FTPloy http://ftploy.com/ FTPloy は, Bitbucket や GitHub 上のレポジトリへPushされた時に、予め設定しておいたサーバーへ更新ファイルを FTP でアップロードしてくれるサービス。レンタルサーバーなどで Git が利用できない場合などに使えそう。 設定 無…

今までは DayOne でメモ書きしたものを記事にする際には Mou を使って編集して直していたのだけれど、ブログを Middleman 化するにあたってサイトの編集も記事の編集も SublimeText だけで済ませたい欲がでてきたので編集する環境を作った。 その際に入れた…

SVG の path 要素からは、 getTotalLength でパスの全長、 getPointAtLength(n) でパス上の n 地点における位置情報を取得できる。 これができると、複雑な図形の形に沿って Div を配置したり、文字のアウトラインのパスに沿ってペンを動かしたりといったア…

★ http://t.co/9jF5ZW7nFE— Reeder (@reederapp) April 11, 2014 Reeder は Googleリーダー専用の Mac,iOS向け RSSリーダーであったが、 Google Reader の終了と同時に Mac 版は必然的に機能しなくなり、 他の RSS リーダーのサービスに対応することが長い間…

Sketch は Mac ユーザ向けのデザインツールです。 これだけでも色々なことは出来るのですが、他のアプリケーションと組み合わせて使いたい場合もあるかと思います。 しかし、Sketch でパーツをコピーして Photoshop でペーストしても何も表示されません。 い…

あとで何度も検索しないための自分用備忘録です。 気が向いた時に更新。 設置したガイドを後から動かしたい場合 → ⌘ + option + ; (ガイドをロック) アートボードの複製 → アートボードパネルから複製対象を選択して、右下の新規アートボードのアイコンへド…

先月のことですが、ついに iPhone4(sじゃないです) を機種変して iPhone5s に機種変しました。 ちょっと大きくなった本体と、ガラス背面と側面のフレームのくぼみが無くなって手にフィットしなくなったのにちょっと戸惑いつつも、 文字を打つだけでアプリが…

以前 CreateJSで遊んでみる 2日目 TweenJS で書いたように、TweenJS は CSS Plugin を利用することで HTML 要素に対してもアニメーションを適用させることができます。 しかし、デフォルトではアニメーションする CSS プロパティの単位が決まっています。 例…

YouTube の動画を埋め込んだ際に、リピート再生させる方法をメモ書きしておきます。 埋め込み動画を Web サイトに埋め込む際には、 動画を再生しているページで共有 → 埋め込みコード を選択すると「埋め込みコード」を表示させることができます。 <iframe width="560" height="315" src="//www.youtube.com/embed/〇〇” frameborder="0" allowfullscreen></iframe> src で指…

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へ必要なパラメータを付けてリダイレクトし、 ユーザの意志で情報の利用の許可を行わせます。 ユーザ…