Mac用のクイックランチャというと旧来から「Quicksilver」が有名ですが、残念ながら既に開発が終了している点と日本語入力に対応していない点がなんとももどかしいところでした。
しかし、この両方を解決したアプリケーションがあったので紹介したいと思います。
そのアプリケーションは「Alfred」。ハットに虫眼鏡がトレードマークです。
「クイックランチャ」とはいつも使うアプリケーションやファイルなどをいちいちFinderやDockから
探し出す手間を省いてくれるツールです。
キーボードから手を離してマウスを操作するのが煩わしい人にとっては不可欠なツールでしょう。
インストールはAlfredのオフィシャルサイトからソースをダウンロードしてきて展開するだけ。
インストールが完了したら「option」＋「space」キーを押してください（キーはカスタマイズ可能）。
そうすると↓のようなウィンドウが立ち上がってきますので、
探したいアプリ名やファイル名を入力します。
入力するとその文字にヒットしたアプリやファイル名の一覧が表示されるので、
↑↓キーやcommand+数字で選択してenterキーを押すだけ。
冒頭にも書きましたが、quicksilverでの一番の難点だった日本語にも対応しているので日本語のファイル名もラクラク検索。
（quicksilverだと無理に英語でファイルやフォルダ名を付けなければいけないので面倒だった…）
基本的にローカルマシン内のファイルやアプリを起動するためのツールですが、
入力したキーワードをWebの検索、なんてことも可能です。
また有償（£12）のプラグインになりますが「Powerpack」を使うとクリップボードに保存したテキストを過去にさかのぼって呼び出せるようになります。
HTMLコーディングやプログラム、書類作成などをしていると頻繁にコピーアンドペーストを使うことがありますが、
その時にこの機能がかなり役立ちます。
Macユーザーでクイックランチャを使っていない人が案外多くいるようですが、
「そんなの必要？」と思っている人ほど使い慣れると手放せないツールだと思います。
ファイルの検索やアプリの起動は一日に何度も使う作業。だからこそ長い目で見たときの作業効率化にはてきめんの効果がある「Alfred」です。
一般的な情報サイトをwordpressのみを利用して製作する機会がありまして、様々なプラグインや解説ブログのお世話になりました。かいつまんでいくつかご紹介したいと思います。
カスタムフィールドを使いやすくしたい。
wordpress標準のカスタムフィールドは操作に慣れてる人は兎も角
誰でも簡単に更新するのはちょっと難しいと思います。
そこで便利なプラグインが
Custom Field GUI Utility 3 – WordPress プラグイン
です。
設定用のiniファイルを編集してサイトに必要なカスタムフィールドにすることが出来ます。
さらにカテゴリー別にカスタムフィールドを用意する必要がある場合は
Custom Field GUI Utility SLUG
がカテゴリー別にiniファイルを設定することが出来て便利です。
閲覧数が多い記事順にするページ（ランキングページ）を作りたい。
利用したプラグイン
WP-PostViews 1.50
プラグインの特徴
・記事毎の訪問数を表示できる
・訪問数がviewsというカスタムフィールドの値として格納される
このviewsを元にソートして記事を表示させることでランキングページを作成しました。
ただしカスタムフィールド値はそのままだと数字でも文字として認識されるので数値としてソートする場合は
orderby=meta_value_numというソート方法が必要になります。（ＷＰ3.0以降）
記事評価をつけたい。
利用したプラグイン
WP-PostRatings
プラグイン導入のキメテ
・5段階、２段階など評価の付け方が柔軟。
・画像をオリジナルの画像に変更が可能（プラグインのデフォルトの画像を上書き）。
・評価前、評価後の表示が管理画面より設定が可能で表示のカスタマイズが可能。
・回答者数、スコア、平均評価がカスタムフィールドの値として格納されるので記事毎に独自の集計結果を表示することが出来る。
wordpressには多種多様なニーズに対応したプラグインが公開されてますが、実現したい要求にそのままフィットするプラグインを探し出すのがなかなか大変でした。足りない部分は調整が必要ですがカスタマイズ性が高いプラグインは往々にしてカスタムフィールド値で格納してくれるものが多い様な感じがしました。プラグインを選定する上でのポイントの一つになると思います。
昨日の投稿した内容ですが、もう少し調べたらもっと使い勝手のいい方法があったので改めて紹介します…というか昨日のは使わないほうがいいかも？なぐらいです。
$(function(){
//link disable
$("#hogehoge *").click(function(event){
event.preventDefault();
});
//form disable
$("#hogehoge form *").bind("submit", function() {
return false;
});
});
最初のは指定した要素（aタグなど）に対するクリックイベントを無効化する記述。preventDefault()というのがそのものズバリの関数です。
セレクタに*を使っているのはaタグ以外にもクリックイベントが書かれている場合を考慮した設定例です。
後の方のはリファレンスにもバッチリ書かれているぐらいの処理なのに気が付きませんでした。お恥ずかしい。
今回は印刷用のポップアップ画面への実装を想定したものですが、この処理はいろんな所で応用が効きそうです。
GoogleMapなどでよくある印刷用のポップアップページ。
あれって表示する内容によってはリンクやフォームを触ってほしくないことってよくあると思います。
ちょっと調べてみたらjqueryでかなりあっさりできたのでソースを公開。
$(function(){
//print window link disable
$("#hogehoge a").each(function(){
$(this).replaceWith($(this).html());
});
//print window form disable
$("#hogehoge form *").each(function(){
$(this).attr("disabled","disabled");
});
});
こんな感じです。
最初の方はリンクを非活性にしたい領域のaタグをセレクタで指定して、eachを使ってaタグを一個々々aタグを外す処理をしています。
後の方もほぼ一緒ですが、formタグの子要素のフォーム（inputとかselect）の属性に「disable=”disable”」を設定しています。「$(“#hogehoge form *”).」って書き方だとformタグ以下にあるフォームと関係ない要素にも「disable=”disable”」が設定されちゃいそうですが、なんかこれで大丈夫みたいです。
ご自由にお使いくださいませ。
あまりwebではなじみがないAFですが、今回はAFを使って簡単にこんなものが作れます、というサンプル＆チュートリアルをご紹介したいと思います。(CS3使用、基本的な説明は省きます)
サンプル（オモいです！）
1.まずは適当に画像を用意して読み込みます。
2.メニューのアニメーション→アニメーションプリセットを参照で、Bridgeが立ち上がり、Transitions-Movement→カードワイプ（3D ピクセルストーム）を選び、適用させます。
3.続いてテキストを配置し、さきほどと同じアニメーション→アニメーションプリセット参照でBridgeを起動させ、Text→Curves and Spins→スパイログラフを適用させます。
4.後はタイムラインを微調整して、書き出しをすれば完成です。
数多くのアニメーションプリセットが用意されているので、そのまま使うもよし、また自由に変更する事もできますので、使い方次第でバリエーションは無限大です。もちろんゼロからエフェクトなどを作る事もできますが、はじめはこんな感じで遊びながら慣れていくのがいいと思います。
以上
最近、iPhone、iPadアプリに手を出し始めて、日々テンパっています。技術力の無さを痛感させられる毎日です。
CoreDataをつかっていろいろと実験をしているのですが、すごくハマってしまった部分があったので、それのメモです。
通常、CoreDataを使ったアプリを作る場合、「新規プロジェクト」で「Use Core Data for storage」にチェックを入れて作成し、プロジェクトを作成したら、.xcdatamodelファイルを開いてエンティティを追加したり、各エンティティに属性を追加したりしていくと思います。
始めに練習でエンティティー1つでテストアプリを作ったときは特に問題もなく、CoreDataの凄さに感動していたのですが、エンティティーを増やし、もう少しこみいったことをやろうとすると、アプリが立ち上がった瞬間に落ちてしまいました。
始めはそこに原因があるとは思わず、右往左往していたのですが、ログをみてみると、どうやらCoreDataの部分でエラーが出ているっぽいです。
始めに作った簡単なサンプルと全く同じ手順で作ったので、原因が全然わからなかったのですが、いろいろ調べているとBIG SPACESHIPのかたが書かれている こちらのエントリーで解決することができました。
どうやら、エンティティーを追加するとエラーになって落ちてしまうようです。。。
なんじゃそりゃって感じです。
解決法はBIG SPACESHIPのかたが書かれているとおり.sqliteファイルを削除することです。
これを消すとちゃんと動いてくれます。まだあまりちゃんと実験してないのですが、今まで保存したデータも一緒に消えてしまうのかもしれないので、注意してください。
で、この「.sqlite」ファイルの場所なのですがプロジェクトのフォルダには入ってません。ではどこにあるのかというと
[user/ライブラリ/Application Support/iPhone Simulator/3.2/Applications/各アプリフォルダ/Documents]
の中に入っています。
「3.2」の部分は使っているシミュレーターのバージョンによって変わります。「各アプリフォルダ」の部分は英数字の羅列で一見よくわからないのですが、中に入るとアプリ名のファイルがあるので、それでみつけられます。
.spliteファイルを削除すると次回の実行時に再度生成されます。
ここでまた厄介なのが、エンティティを追加したり変更したりするとその都度、削除をしないとエラーで落ちてしまいます。ここに関してはまだ調べ中なのですが、もし誰か知っている人がいましたら教えてくださいませ。
みなさんは”execution”という言葉を知っているでしょうか？
最近読んだ雑誌「PEN」の中で深澤直人さんがインタビュー中に使われていた言葉です。
深澤さんによれば、「”idea”と”execution”によってデザインの専門性は成り立っている」とのこと。
うろ覚えなので全然違っていたらごめんなさい・・・
“execution”とは、芸術作品や演奏に対しての出来映えや成熟度を意味する言葉らしく、デザインにおいては「抽象である発想を具体化する力」のことだそうで、”idea”はもちろん、この”execution”もとても重要な役割であるそうです。インタビューによれば、”execution”を鍛えるのに必要なのは「予測値」よりも「経験値」の方で、深澤さんは迷ったら頭で答えを出そうとするのでなく実際に作ってみているとのこと。意味の通り、「実行する(execute)」ことで経験値が増えて”execution”も高まっていく、ということなのでしょうか。
とにかく実行してみることは、確かにとても大切なことだと僕も思います。予定調和的に可能性を終らせてしまわずに、試してみることで客観的な視点が見えてきて、新しい可能性を見つけられるかもしれないからです。僕は大学の建築学科で「スタディ」というものを作るということを学びましたが、今考えるとその「スタディ」を何度も試すという行為は、より高い”execution”を目指すため行為だったのかもしれません。もしかしたら意識をしていないだけで、既に”execution”のための努力をされている方も多いかもしれませんね。
もちろん、”idea”や”concept”といった基盤となる発想を、具体化する前にある程度しっかり固めないといけないこともあるだろうし、”process”の段階で全て試していたらさすがに時間が足りないので、それを見極める「判断力」や「決断力」が同時に必要なんだと思います。その”process”で何を基準に判断・決断しているのかは人やケースにもよると思うので、それについてはまたの機会に考えてみたいと思います。「デザイン」って奥深く、難しいですね・・・
僕たちは、人によって定義が違う「デザイン」という曖昧な領域で仕事をしているので、こういった考えが自分の中での「デザイン」に対する意識を明確していくのに、少しでも参考になったらイイかなと思って今回はこんな内容を書いてみました。
iPadいいですね。これが来てからは、毎朝PCを立ち上げなくなりました。
ベットで寝ながら、出来るのは最高ですね！！
せっかくiPadがあるので、ビジネスで使ってみましょう。
↓PCとのデータの同期 ｜ ↓Googleカレンダーとの同期
その前に、保護フィルム装着を失敗しないために！！
会社のスタッフに「保護シートはほっとけば勝手に気泡が消える」とだまされて
気泡が入ったままのiPadを使っていますが、
「セロテープ」を使うと良いみたいです！
参考：ホコリと気泡が入ったiPadの保護シート
知らない間にスクリーン回転ロックがかかってしまい解除方法が分からず、
設定アプリを探していましたが、右上の音量調整ボタンの上にあったんですね!!
このスイッチは寝ながら見るときに最適です!
参考：スクリーン回転ロック
■PCとのデータの同期
iPadにはUSBケーブルがないので、別の方法でデータをやりとりします。
便利なのは「Dropbox」「EVERNOTE」でしょうか。といっても、自分はあまり使っていませんが。。。
PDFなどの資料を印刷せずにそのまま見られるのは、とても良いことだと思います。エコだし。
Dropboxは無料で2GBまで使用できる、オンラインストレージサービスです。
OSもMac、Windows、Linex版があるため、OSを選ばずに使用できます！
1）「Dropbox」iPad版とPC版をインストールします。
2）PCにインストールすると「Dropbox」フォルダが出来ます。
そのフォルダ内にデータを入れれば自動的に同期されます。
とてもシンプルですね！
友人を招待すると1人ごとに250MBボーナスがもらえるみたいです。
▼関連リンク
参考：Dropbox徹底解剖
参考：友人紹介で最大10GBまで容量拡張
参考：iPad でクラウド型ビジネスを強くする必殺のアプリ3選
参考：Evernote と Dropbox の使い分けかたを理解する
これで、iPadからデータを取得できるようになりますが、
毎回データをオンラインから取得するのは、時間がかかりますので、
iPad内にダウンロードしたいところです。
そこで便利なのは「GoodReader」です。
有料アプリ（115円）なのですが、
「Dropbox」と連携がとれていてとても便利。
・GoodReader
PC｜iTunes
オンラインストレージサービスと言えば、
昨日（2010.06.10）にquanp for iPhoneがリリースしましたね！
はやくiPad版が欲しいところです！
・quanp for iPhone
参考：quanp for iPhoneのご紹介
参考：使い方ガイド
参考：iTunes
■Googleカレンダーとの同期
iPhone iPod TouchでiCalがインストールされていますが、
活用するには十分ではないため、色々カレンダーアプリがでています。
iPadのiCalはとても見やすくなりました！
ビジネスで使用するにはPC・iPad・iPhoneなどを、同期しないといけません！
PC・iPad・iPhoneはmobileMeを使用すれば同期は可能ですが年間9,800円かかりますので、無料で出来るGoogleカレンダーを利用します！
PCのiCalとiPadのiCalは同期できないため、Googleカレンダー経由でおこないます。
1）googleでアカウントを作成します。
2）MacのiCalの設定をします。 参考
3）iPadの設定 参考
MacのiCalでは、Googleカレンダーを登録します。
※iCalのカレンダーで登録すると、Googleカレンダーに反映されません。
▼関連リンク
参考：サイボウズの予定を、Googleカレンダーを使ってiPhoneのカレンダーと同期する
難しくはないが、
今後、実務的にも必要になってきそうなので、簡単に調べてみました。
なんだかすでにたくさん書いているブログもあったので、なんですが、
都度、調べるのも面倒なので、まとめ的に。
▼なにはともかく分岐
Javascript
if(navigator.userAgent.match(/iPad/i)) {
location.href="http://www.hogehoge.jp/iphone/";
}else if(navigator.userAgent.match(/iPhone/i)) {
location.href="http://www.hogehoge.jp/ipad/";
}
PHP
$Agent = $_SERVER['HTTP_USER_AGENT'];
if( ereg("iPad", $Agent)){
$jurl="http://www.hogehoge.jp/ipad/";
header("location: $jurl");
}else if(ereg("iPhone", $Agent)){
$jurl="http://www.hogehoge.jp/iphone/";
header("location: $jurl");
}
▼画面サイズ
1024×768
横幅980までに縮小表示される。
壁紙を用意するときは。1024×1024で用意
参考：iiPad壁紙展
http://www.iipad.jp/
▼ホーム画面用アイコンの追加
iPadやIPhoneでお気に入りのWEBサイトをホーム画面に追加するとき、
Safariの「ホーム画面を追加」を選択します。
そのときにホーム画面に追加されるアイコンの設定
下記のMETAタグを追加
<rel=”apple-touch-icon” href=”hogehoge.png”/>
用意する画像は、129×129（Appleが設定しているサイズ）
参考：http://arigato-ipod.com/lab-webclip-apple-touch-icon.html
▼iPadで使えるイベント
iPhoneやiPadでWEBアプリを作るときには必須になってくるかもしれませんね。
いろいろ遊びたいもんです。
- touchstart: 指がタッチした
- touchend: 指が離れた
- touchmove: 指がスクリーン上を移動
- touchcancel: 指がスクリーン上にいるとき、システムによりイベントがキャンセルされた
- touches: スクリーン上の指の座標などの情報
- targetTouches: 同一ノード内の指の座標などの情報
- changedTouches: イベント発生元になった指の座標などの情報
- gesturestart: 2本以上の指がふれたとき
- gesturechange: 2本以上の指がスクリーン上で動いた（ジャスチャー）とき
- gestureend: ジャスチャーが終わったとき
タッチした指の座標と数をとってみる
document.addEventListener('touchstart',catchTouch, false);
function catchTouch(event) {
fingerX =event.touches[0].pageX;
fingerY =event.touches[0].pageY;
fingerNum =event.touches.length;
alertMessage ="X="+fingerX;
alertMessage +="Y="+fingerY;
alertMessage +="fingerNum="+fingerNum;
alert(alertMessage);
}
参考：Touching and Gesturing on the iPhone（iPhoneだけど）
参考：Iphone Style Change on Orientation Change（縦横向きの検出）
参考：Handling Events
▼viewport タグ
<meta name=”viewport” content=”device-width, initial-scale=1.0″>
device-widthのところを980pxとかにしても可
ちなみにPCには影響ないようです。
▼position: fixedが使えない
iScroll.jsを使うとよいそうです。世の中便利ですね。
参考：iPadに最適化したサイトがつくれるかもしれない5つの方法（基本編）
▼デザインの参考
参考：iPad ready
参考：ishocase国内のiPhone / iPad最適化対応をしたサイトを集めています
参考：Landing Pad
▼シュミレーター
iPad Peek
忠実に動作まで再現するわけではないので。
とりあえず見た感じだけ、どうなるか見てみたいときにしか使えません。
そのうち出てくると思いますが。
▼そのほか参考
HTML5 Widget入門：あなたにも作れるiPad用Widget
Processing.jsをオンラインで編集し、実行できるpjs4iPad
iPad発売前に！iPad向けWebサイト制作についてのおさらい
iphoneやiPadに対応したWEBサイトを作るスニペット11選
iPad向けWebアプリケーション開発テクニック
ただのリンク集みたいになってますが、
とりあえず初回なんでこんな感じで。
このゾーンは水玉に動きがあるため、余白を描き出しやすい。
水玉と余白が活発に作用し合って、カワイイを豊かに生んでいく海なようなところである。