Alfred のテーマを自作してみる - WebDelog
この記事は Alfred Advent Calendar 2014 9日目の記事です。 遅くなってしまってすみません。 （少しずつ日付をまたいだりしてペースが乱れ始めていますが、25日には全部の記事が埋まっている状態を目指したいと思っています！） 今回は Alfred のテーマを自作にチャレンジしてみます。 Alfred のテーマは Alfred Preferences の中の Appearance → Theme から作ることができます。 右下の 「+」ボタンをクリックして、テーマの情報を入力していきます。 今回は以下の画像のように入力しました。 画面左にはいつもの Alfred の検索フォームがプレビューされています。ここで色を変えたい部分をクリックします。 カラーピッカーが表示されました。ここで色を変更するとプレビューも一緒に色が変更されます。 不透明度も変更できるようになっているの
iPhone5s に機種変したので Canvas で遊んでみたよ | WebDelog
先月のことですが、ついに iPhone4(sじゃないです) を機種変して iPhone5s に機種変しました。 ちょっと大きくなった本体と、ガラス背面と側面のフレームのくぼみが無くなって手にフィットしなくなったのにちょっと戸惑いつつも、 文字を打つだけでアプリが落ちたり、ホームボタンがなかなか効かない現象から開放されたことが何より嬉しいです。 Canvas の動作を比較してみることにしました という訳で4 → 5s でどのくらい Canvas の処理能力が上がったのかをチェックしました。 今回はそのままお持ち帰りしてきた iPhone4 との比較を行っています。 検証環境 iPhone4, iPhone5s 共に iOS 7.0.4 でブラウザは Safariを使用しました。 プログラム中で使用したライブラリ Canvas のAPIを扱うのに CreateJS(EaselJS)を, FPS
PHP での画像処理をもっと楽に行えるライブラリ ImageWorkshop | WebDelog
PHP で GD 使って行う画像処理をもっと楽に、 わかりやすく扱えるフレームワーク、ImageWorkShop を紹介します。 ImageWorkShop は以下からダウンロードできます。 http://phpimageworkshop.com/ 今回紹介するバージョンの 2.0.0 では namespaces が使われているため、 PHP のバージョンが 5.3 以上でないとそのまま動かすことは出来ないそうなので注意してください。 準備 autoloader を利用している場合 ImageWorkshop は autoloader に対応しています。 autoloader を利用している場合は、ライブラリフォルダに ImageWorkshop src/ PHPImageWorkshop 以下のファイルを追加して、 use PHPImageWorkshop\ImageWorksho
Chrome の console.log にスタイルを適用する方法 | WebDelog
詳細はここに載ってます。 Console API Reference console.log("%cMy name is...", "font-size: 2em"); こんな感じで %c を置くことで、次のパラメータに書いたスタイルが適用されるみたいです。 console.log("%cMy name is...%cturusuke", "font-size: 2em", "color: orange; font-weight: bold; font-size: 4em"); こういう風に書くことで別々なスタイルを当てることもできるみたい。 Chrome Logger へ応用 Chrome Logger を使うとサーバーサイドのプログラムから console へ値を渡して出力させることができます。 Chrome logger 今回はこれを使って、先ほどのようにスタイルをつけて出力させるよ
Photoshop で Web font を作成できる Glifo - WebDelog
Glifo は Photoshop で作成したベクターシェイプを Web フォントに変換できるエクステンションです。 Glifo 上のページの１番下に購入ページへのボタンがあるので、 そこから購入することができます。 使い方 購入 → ダウンロード が完了したら、Photoshop で フォント化するシェイプを作成しておきます。 シェイプは、文字ごとに”シェイプを結合する”などであらかじめ結合して、 一つのレイヤーにまとめておきます。 レイヤー名の前に「*」を付けることで変換される対象となるので、 リネームしておきます。 「*」の後のレイヤー名が CSS で利用する際のクラス名に使われます( .icon-レイヤー名 )。 次に Glifo のパネルを開いて、”Create Icon Font” というボタンを押して、フォルダを指定するだけで、後は勝手にフォント化してくれます。 出力されたフ
Alfred PowerPack を導入してみた - WebDelog
Alfred は PC上のアプリケーションを即座に検索でき、立ち上げることの出来るアプリケーションランチャーです。 これだけでも便利なのですが、Powerpack と呼ばれるプラグインを購入し適応してみました。 購入はこちらから行います。 購入の手続きが完了した後、ライセンスが書かれたメールが送られてきます。 これを Alfred の Preferences の Powerpack にて購入時のメールアドレスと共に入力することで Powerpack の機能が有効になります。 Power pack を適応することでアンロックされる機能は公式に掲載されている通りです。 http://www.alfredapp.com/powerpack/ ざっくり説明すると、 Workflow を作成、インストールできるようになる クリップボードの履歴の呼び出し、スニペットの登録ができるようになる iTune
Drawscript を使ってIllustrator のシェイプを EaselJS で利用できるコードに変換する | WebDelog
CreateJS でベクターシェイプを描写するためには Graphics クラスのメソッドを使って書いていきます。 単純な図形なら問題ないのですが、 複雑なパスを書くとなるとちょっと面倒ですね。 Toolkit for CreateJS を使ってFlashで書いて出力する方法もあるのですが、 今回は Illustrator を使って出力する方法を紹介します。 Drawscript Drawscript は Illustrator のプラグインです。 Illustrator で書いたベクターシェイプを、選択した形式で扱えるコードに変換してくれます。 BETA4 の段階では、 Objective-C C++ Canvas(JavaScript) CreateJS(EaselJS) Processing ActionScript 3 JSON RAW BEZIER POINTS に対応しているよ
YouTubeAPI を使ってYouTubeの埋め込みプレーヤーをカスタマイズする | WebDelog
YouTubeAPI を使ってみよう! YouTube は動画のページから埋め込み用のタグをコピーしてきて、 コンテンツに貼り付けることでサイト内にプレーヤーを表示させることができます。 しかし、コンテンツによっては再生ボタンをオリジナルのものに変えたかったり、再生終了後にアクションを起したいという場合もあると思います。 YouTubeAPI を利用することで YouTube のプレーヤーをカスタマイズすることができます。 https://developers.google.com/youtube/ 『YouTube API』などで検索すると日本語のドキュメントが出てきますが、こちらは v2 までしか掲載されていません。 現在の最新版の API は v3 なので、英語のドキュメントを直接見に行ったほうがよいと思います。 YouTubeのAPIはプレーヤーのカスタマイズ以外にもDataAPI
炎や光のエフェクトのスプライトシートをTimelineFX Editorで作ってCanvasで利用してみる | WebDelog
CanvasやCSS3アニメーションを使ったコンテンツが普及する一方で、 実用で利用するにあたって、開発のスピードが課題になってきている気がします。 GUIツールとしてはAdobe Edge、 Hypeだったり、WebCodeなんてツールも出てきていたりしていますが、 パーティクルを使った光の演出や炎の演出などを取り入れようと思うと、 これらのツールを使ってもさくっとは作れず、 頭を悩ませている方も多いのではないかと思います。 今回はそういったコンテンツを作る時に楽できるかもしれないアプリケーション「TimelineFX Editer」を紹介します。 TimelineFX Editerで何ができるか TimelineFX Editerはパーティクルを利用して光や炎のようなエフェクトを作成できるツールです。 作成したエフェクトはPNGのスプライトシートやGIFアニメーションに変換できます
EaselJSのTextクラスで作成したテキストの幅と高さを取得する | WebDelog
EaselJSのTextクラスは、 var text = new createjs.Text("Hello World", "60px Arial", "#ffffff") のように、 第一引数に表示させたい文字、 第二引数にフォントのスタイル、 第三引数にフォントの色 を指定することでインスタンスを作成することができます。 今回はこのテキストの幅と高さを取得してみたいと思います。 テキストの領域を取得することで、 cacheメソッドを利用するときや、背景にシェイプなどを敷いてボタンのようなものを作成するとき、 画面の中央に表示させる計算を行うときなどに役に立ちます。 getMeasuredWidth, getMeasuredHeight 幅と高さはTextクラスのインスタンスから、 getMeasuredWidthメソッドとgetMeasuredHeightを呼び出すだけ
EaselJSで画像をトリミングして表示させる | WebDelog
EaselJSでは、 bitmap = new createjs.Bitmap("test.png") のようにBitmapクラスに画像のURLを渡し、 canvas = document.getElementById('canvas') stage = new createjs.Stage(canvas) のように作成したステージにBitmapクラスのインスタンスをaddChildしてあげる事でステージ上に追加されます。 stage.addChild(map) この時、画像を部分的にトリミングして表示させたいといった場合があると思います。 そんな時はBitmapクラスのインスタンスにsourceRectプロパティを設定します。 ドキュメントでは具体的な値の設定方法がくわしく書かれていなかったので、 方法をメモしておきます。 Bitmapクラス中でsourceRectを利用している部分を
FacebookのSDKを使ったWebアプリケーションで一度認証済みでも毎回パスワードの入力画面を表示させる | WebDelog
FacebookのSDKを使ってユーザ情報を扱うようなWebアプリケーションでは、 一度ユーザの情報を利用することを許可してもらう必要があるため Facebook側のURLへ必要なパラメータを付けてリダイレクトし、 ユーザの意志で情報の利用の許可を行わせます。 ユーザがアプリケーションに対して一度認証すると それ以降、Facebookにログインしていれば、 認証のダイアログは表示されなくなり、 そのままアプリーケーションへ戻ってくるようになります。 使う側からすれば毎回ダイアログがでるより、 最初の一度だけ表示されたほうが快適ではありますが、 共用のPCの場合、うっかりFacebookをログアウトし忘れたまま 他の人がそのアプリケーションを利用してしまった場合でも利用できてしまいます。 Facebookは個人情報が沢山含まれているSNSですので、 アプリケーションが扱う
FacebookのSDKを使ったWebアプリケーションで一度認証済みでも毎回パスワードの入力画面を表示させる | WebDelog
FacebookのSDKを使ってユーザ情報を扱うようなWebアプリケーションでは、 一度ユーザの情報を利用することを許可してもらう必要があるため Facebook側のURLへ必要なパラメータを付けてリダイレクトし、 ユーザの意志で情報の利用の許可を行わせます。 ユーザがアプリケーションに対して一度認証すると それ以降、Facebookにログインしていれば、 認証のダイアログは表示されなくなり、 そのままアプリーケーションへ戻ってくるようになります。 使う側からすれば毎回ダイアログがでるより、 最初の一度だけ表示されたほうが快適ではありますが、 共用のPCの場合、うっかりFacebookをログアウトし忘れたまま 他の人がそのアプリケーションを利用してしまった場合でも利用できてしまいます。 Facebookは個人情報が沢山含まれているSNSですので、 アプリケーションが扱う
CreateJSで遊んでみる 1日目 EaselJS | WebDelog
CreateJS CreateJSはHTML5の技術を利用した インタラクティブなコンテンツを作成するためのJavascriptのライブラリ群です。 @gskinner 氏が開発をしているとのこともあり、 stageを作ってオブジェクトをaddChildしていくところやメソッド名など、 Flashで開発されていた方も馴染みのある構文が用意されています。 Adobe Flash Pro CS6からはToolkit for CreateJSという機能を使って、 ワンクリックでFlashで作成したアニメーションを CreateJSを使ったアニメーションに変換して書き出す といったことが簡単に行なえるようになっています。 そんなCreateJSを触りながら覚えてみようかなー と突然思い立ったので『CreateJSで遊んでみる』というテーマの元、 とりあえず使ってみる → まとめてみ
CreateJSで遊んでみる 3日目 PreloadJS | WebDelog
3日目 PreloadJS PreloadJSはファイルの先読みを行って、 読み込み状況を把握したり、完了後に処理を実行させたりといった処理をサポートしてくれるCreateJSのライブラリ群の一つです。 EaselJSなどと組み合わせずとも単体でも利用することができます。 予めPreloadJSをHTMLのheadタグ内で読み込んでおきます。 現時点での最新版0.3.0を利用します。 http://code.createjs.com/preloadjs-0.3.0.min.js LoadQueueクラスのインスタンスを作成する PreloadJSを利用するにはまずLoadQueueクラスのインスタンスを作成して、 変数に代入しておきます。 var preload = new createjs.LoadQueue(); PreloadJSはデフォルトではXHRでファイルを読み込もうとし
CreateJSで遊んでみる 2日目 TweenJS - WebDelog
CreateJS触ってみたいなーということで、 ドキュメントとサンプルコードを見ながらもまったり書いていこうと思います。 2日目 TweenJS https://github.com/CreateJS/TweenJS/ 上のURLの飛び先からZIPボタンを押してダウンロードしてきます。 展開するとlibフォルダの中にtweenjsが入っています。 現時点での最新版v0.4.0を使います。 TweenJSはCreateJSのライブラリ群の一つです。 指定した時間で、現在値から指定した数値までオブジェクトのプロパティの値を変化させてくれる Tweenを簡単に作成することができます。 同じライブり群のEaselJSに依存していますので、 先にEaselJSを読み込んだ後にTweenJSを読み込むようにしましょう。 事前にTickerクラスでsetFPSを呼び出し、 FPSを設定しておくことができ
Drag and Dropでファイルを簡単にアップロードできるコンテンツを作れるDropzone.js - WebDelog
dropzonejs.com 2014月7月1日: dropzone.js のバージョンが上がり、以前の記事の内容では動作しないものが多くなっていたため、2014年7月1日時点での最新版 3.10.2 の仕様にあわせて記事内容を見直し、改訂しています。(更新が遅くなってしまってすみません。) サポートしているブラウザは Chrome 7+ Firefox 4+ IE 10+ Opera 12+ (Mac版のOperaではバグがあるため現在は無効のようです) Safari 5+ となっています。 ドラッグアンドドロップが利用できないブラウザのためには、 クリックするとinput:fileで表示されるファイル選択ウィンドウを表示させたり、 動作しなかったときの処理を書いて対応することが可能となっています。 動作方法 まず実際に動かしてみましょう。 事前にdropzoneを下記よりダウンロードし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
不必要な通信を制限できる TripMode - WebDelog
Alfred で入力した文字を画面いっぱいに表示させる機能 Large Type - WebDelog
リリース直前(?)の Alfred Remote について - WebDelog