e.b.i.f » web+tech

フォトログを（ちょっとだけ）iPhone対応にしてみた

tomo — Thu, 13 Mar 2008 20:15:12 +0000

せっかく我が家にiPhoneがやってきたので、テストがてらちょっとだけ遊んでみた。cssでサイトのレイアウトを振り分ける、というところまでは面倒なのでしてないけど、
1. サイトの表示幅の変更
2. ウェブクリップ用のアイコン作成
という簡単なふたつをフォトログに導入。以下メモ代わり。iPod TouchのSafariも対応。

1. サイトの表示幅の変更

iPhoneのデフォルト表示幅は980ピクセル。この幅が画面幅になって表示される。私のフォトログは幅が450ピクセルなので、iPhoneで見ると画面の半分ほどにちょこんと表示される。これをiPhone用のメタタグを使って、450ピクセルが表示幅になるように変更。（サイトのheadタグ内に挿入）

←こんな感じ。
ポラロイド署名運動のバナーの表示がちょっとおかしいけど、気にしない、気にしない…　

2. ウェブクリップ用のアイコン作成

前回のアップデートで可能になったiPhoneの機能の一つが、サイトのブックマークをフロントのアイコンに追加するウェブクリップブックマーク。私のサイトをブックマークしてフロントに置いてくれる人がいるとは思えませんが、お仕事用のテストということで。（笑）

手順は簡単で、57×57ピクセルのアイコン用のPNG画像を “apple-touch-icon.png” という名前でサイトのルートディレクトリーにアップロードするだけ。Favicon（ファビコン）と同じ要領です。
ファイル名を指定する場合はサイト、またはページのheadタグ内に

と指定。
←こんな感じ。
アイカタに無理矢理ブックマークしてもらう。アイコンのつやつや感はiPhoneがつけてくれます。

その他のiPhone/iPod Touch用の詳しい情報は↓
Apple Web Apps Dev Center - Designing Content
日本語のページ、前はあったんだけどなくなっちゃったみたいです。

- Related Posts -

iPhoneがやってきた。

tomo — Tue, 19 Feb 2008 09:53:48 +0000

iPhoneが我が家にやってきました。
持ち主は私ではなくアイカタです。

値段が高い、日本語がタイプできない、カメラの設定が全く変更できない、そして今の生活だとあんまり活躍の場がなさそーなので、私の携帯はプランについてくるちゃっちーフリーフォン。それでも初カメラ付き携帯。Bluetoothで画像をワイヤレスでパソコンに送れる事にかなり感動。（笑

アイカタ曰く、iPhoneのEDGEは遅くて使えないらしいですが、最近はどこにいってもフリーのWiFiがあるので、それほど気にならないそうな。なにかと話題のiPhoneですが、日本の携帯のほうがずっとカッコいいと私は思ってるんだけどなー…

- Related Posts -

Skypeその後

tomo — Thu, 24 Jan 2008 05:18:12 +0000

2ヶ月ほど前に導入したSkype。最近になってようやく活躍の場をみつけた。

日本にいる家族とただで話せる。（今さらだけど。）

年末年始に帰った時に、私の姉のMacにSkypeを無理矢理ダウンロード。カメラはついてないけど、マイクはついているので電話代わりには使える。ネット関係にはかなり詳しくない姉の最大の疑問は「なんでただなん？」
「それはWeb2.0だから。」とあってるようなあってないような適当な答えを返しながら、ついでにiChatの使い方も伝授してくる。「カメラがついてれば、テレビ電話みたいになるんだよ〜」と話しながらアメリカに戻ってきた。

どうやら姉よりもうちの父親のほうが興味津々だったみたいで、こっちに戻ってきて１週間も経たないうちに実家にウェブカムを導入し、Skypeに自分のアカウントを作って、iChatの使い方を教えてくれとSkypeで電話してきた。

まさかウェブカムを買うとは思っていなかったので、Skypeを電話代わりにと思っていたけど、カメラがあるならiChat AVでもいいのかも。両方試してみた結果、私から送るビデオはSkypeのほうが高画質、むこうから送るビデオはiChatのほうが高画質だけど、Skypeは両方ビデオをオンにすると、何故か音声と映像がぐちゃぐちゃになる。iChat AVの勝利。

「テレビ電話なんて…」とずーっと敬遠してたけど、実際に使ってみて父や母のちょっと嬉しそうな顔を見ると、まあこれもいいかなーと。

…って、結局Skype使ってないのか…

- Related Posts -

iKnow! がおもしろい

tomo — Sat, 19 Jan 2008 04:50:37 +0000

最近使い始めたオンライン英語学習サイト、iKnow!。
これがかなりおもしろい。なんといっても「無料」というのが素敵。

学習アプリは、単語・フレーズを覚える「iKnow!」、リスニング・タイプ力アップ用の「Dictation」、携帯用、Podcast用の4つ。（携帯用は試せないし、Podcast用はまだ使っていません。）基礎英語、トラベル英語、TOEIC対策、投野コーパス、ビジネス英語、MBA/留学英語の6つのチャンネルがあって、その中にコースがいくつか用意されている。

iKnow!もDictationも同じ単語やフレーズ、文章を繰り返し学習するようになっている。使われている例文も、普段私がアメリカで耳にするものが多く、実用的だと思います。私が主に利用しているのはDictation。しばらく使っていると自分の苦手なところがわかってくる感じ。前置詞が全然聞き取れていないとか、むきになって一度にたくさんやるとタイプミスがどんどん増えてくるとか。

iKnow!のウリのひとつでもあるSNSという部分は全く利用していませんが、なかなかよく出来たツールだと思います。
興味のある方、ぜひ試してみてください。:)

- Related Posts -

Skype使ってみた

tomo — Sat, 01 Dec 2007 04:57:50 +0000

「え、使った事なかったの？」と友達にびっくりされたSkype。存在自体は知っていたけど、メインのG4はマイクがないので、わざわざ買ってくるのも面倒だし、特に必要性を感じなかったのでスルーしていました。友達は日本にいる家族との電話代わりに使ってるって言ってたけど、家の人達はそんなにハイテク (?) じゃないし。

今さら使ってみる事になったのは、仕事で必要になったから。サンディエゴ、テキサス、日本にスタッフがいるあるプロジェクトのコンファレンス・コールに使ってみようということになったのでした。幸いMacBookはマイクがついてるので、そっちにインストール。よくわからないままいじっていたら、かけるつもりじゃなかった電話かけちゃった…　
でも、つながるよ。すごい。感動ー。

Skypeユーザ間は無料というのは知ってましたが、普通の電話にもSkypeクレジットを買っておけばかなりお得なレートでかけれるんですね。今度試してみて、音声大丈夫そうだったら、今使ってる国際電話のサービス、止めちゃってもいいかも。使ってる人、います？:)

- Related Posts -

Flickr Slideshow

tomo — Wed, 07 Nov 2007 03:15:59 +0000

idea*ideaさん経由で知ったFlickr用のスライドショーサービスの数々。
ちょうどボトムメニュに入れようかとFlickrのバッジを試してみたりしていた。でもバランスがいまひとつでうーんと思っていた時の、ナイスなタイミングな記事でした。

さっそく使ってみたのが、Slideoo.comの横方向のスライドショー。表示する写真のサイズ、表示数、セットの選択も可能。全部のページに入れようかとも思ったのですが、ページがロードするたびにスライドショーがリロードされるのが気になって、Aboutのページだけに入れてみました。

表示サイズはスクエア。なのですが、75ピクセルはうちのサイトには大きすぎる感じがしたので、コピーしたコードのheightを無理矢理55ピクセルに変更して少しだけ小さく。サムネイルの下がちょっとカットされてしまっていますが、サイトのアクセント的に使いたかったので、まいいかなと。スライドバーもカットされちゃいましたが、これもないほうが見た目がすっきりするので、まいいかと。（笑）

このSlideoo、サーバがどれくらい安定しているかわかりませんが、ブログのヘッダに使えたりもするのでは？と思ったり。
たとえばこんな感じ。
クリックするとFlickrに飛んでしまうのはちょっとあれですが、サイトの名前と同じセットを作って、そこを定期的に入れ替えるとヘッダもそれに併せて変わるし、なかなか面白いのではないかと。

ここには使わなかったけど、flickrSliDRもシンプルで良いです。iFrameを使って昔のFlickrのオリジナルのスライドショーを呼び出しているようです。新しくなったFlickrのスライドショーが重くていまいちだなと思っていたので、このサービスは嬉しい。

- Related Posts -

お役立ちもの - AJAXソースコード

tomo — Tue, 24 Jul 2007 07:57:18 +0000

再びですが、今度はD⇔riceのサイトで初挑戦のAJAX関連。こちらも試行錯誤。ネット上には便利なソースコードが公開されています。以下メモ代わり。

D⇔rice店主の「こんなことできたらいいんだけど…」というご要望にお応えするために、今回初挑戦したAJAX関係。Flash vs. AJAX的なところもあるので今まではちょっと敬遠していたのですが、やってみるとなかなか便利で優れものが多くて楽しかった。当然、一から自分でコードを書いたりはできないので、ウェブ上に公開されているソースファイルをもとに必要な部分だけ書き換えたり、コードを付け加えたりしての導入でした。

郵便番号→住所自動入力フォーム
郵便番号を入力すると自動で住所が表示されます。ショッピングカートの住所入力の部分で導入。探せばいろんな国のがあるはず。今は必要ないけど、機会があったらアメリカバージョン探してみよっと。

Scriptaculous Lists with PHP
Flickrの写真の並び替えを初めて見た時から「どうやって、やるんだろー？」ってずっと気になってた機能。D⇔riceの管理画面の商品順の並び替え用に導入。ソースコードにPHPのArrayを作成する機能も入っているので、データベースにも対応できる優れもの。

文字数カウントフォーム
サンプルはこちら。ショッピングカートのコメント入力の部分で導入。別になくても良い機能だったけど、「AJAXおもしろいやん！」の勢いで使ってみた。

その他参考にしたAJAXライブラリー系のサイト。
AsH Ajax Tutorials
miniAjax.com
80+ AJAX-Solutions For Professional Coding
AJAX scripts

- Related Posts -

PHP + MySQLショッピングカート

tomo — Fri, 20 Jul 2007 20:03:03 +0000

D⇔riceのサイトで初挑戦のPHP + MySQLショッピングカート。試行錯誤でした。以下メモ代わり。

最初に使ってみようかと思ったのはZen Cart。日本語版はこちら。かなり高機能なショッピングサイトが作成できる（たぶん）。デモの管理画面を見て、ここまでいろいろなくてもいいんだけど、と思いつつ、試しにDLして、インストールしてみた。結論…サーバの設定との相性、もしくはPHP、MySQLのバージョンとの相性が悪かったのか、エラーがいっぱいでてしまい、断念。どちらにしても、ファイルがあまりにもたくさんあって、カスタマイズしずらそうだなと思った。

検索していくつか見つけたものの中で、これなら私でもなんとかなるかも、と思ったのが
PHP MySQL Shopping Cart Tutorial
PayPal決済のみで、クレジットカード決済はできないけど、すべてのステップを詳しく解説してくれているし、ソースファイルもDLできる。インストールも簡単なconfigファイルの変更と、plaincart.sqlのインポートだけで終了。インストールしたディレクトリーにいくと、簡単なショッピングサイトと、管理画面サイトが出来上がっていた。管理画面の項目はカテゴリーリスト、商品リスト、注文リスト、ストア設定とユーザー設定だけ。Zen Cartに比べると、え…っていうくらいシンプルです。

サイトはデザインの変更、チェックアウトフォームの項目の追加、表示項目の追加変更など。管理画面は、商品の画像が複数アップロードできるようにしたり、商品の並び替えができるようにしたり。php.netにはお世話になりました。PHPに関する疑問はここでほぼ解決。

で、これを作っている時に友人からCube Cartというものがあるのを教えてもらった。彼曰く、Zen Cartよりも使いやすいとのこと。日本語版はないみたいなので、日本語サイトに使えるかどうかはわからないけど、機会があったら試してみようと思う。

- Related Posts -

e.b.i.f mobile

tomo — Thu, 05 Jul 2007 20:24:19 +0000

2008/5/2 アップデート
Mobile Eye+は現在使用していません。こちらをご覧下さい。

このサイトを携帯対応にしてみた。←自分が使っている携帯はカメラすらついていないのに。日本の携帯事情は？？？なので、一体どれくらいの人が携帯を使ってサイトを見たりするのか全く見当がつきませんが、どうやって作成するのか興味があったので試してみました。

まず、WordPressの携帯用プラグインMobile Eye+をインストール。アドレスはそのままで、携帯で見ると別のレイアウトで表示されるもの。このサイトはShift-JISではなく、UTF-8なので、大丈夫かなーと思いつつ。
簡単なスタイルは編集できるようになっています。画像は一切なし、CSS未使用のとてもシンプルなものです。

で、インストールはしてみたものの、HTTP_USER_AGENTで振り分けられるので私のコンピュータで確認することができず、オンラインで確認できるものがないかなーと探してみると、goo i-mode シュミレータというのを発見。今時こんなのあるの？っていうインターフェイスだけど、一応パソコンから見るのとは違うレイアウトで表示されました。

シュミレータソフトはいくつか開発されているみたいですが、
携帯サイト対応ウェブサイト作成用フリーソフト
どれもWindowsのみ。くーっ。と思ってたところで見つけたのがこれ。
Stroll 2.0
Mac用のソフトです。無償バージョンは広告がでたり、リンクが正常に作動しなかったりするけど、かなりたくさんの機種が登録されています。（が、どれが新しいのでどれが古いのか、見当もつきません）このソフトで見ると、機種によっては文字がえーっていうくらいでっかかったりします。かなりかっこわる…

最後に最近よく見かけるQRコードというものも作って、貼付けてみました。（トップページのみ）
QRコード作成＆活用のススメ
もちろん、試~~してません~~。せません。（笑）仕組み自体もわかっていないけど、こんなのも使う人いるのかなー？

そんなわけで、全く何にもテストしていないので、どんな状態になっているのかわかりませんが、携帯でウェブとか見ちゃうハイテク（？）な方がいらっしゃいましたら、ちょろっと覗いて、感想、バグなど教えていただけると嬉しいです。:)

- Related Posts -

Browsershots.org

tomo — Tue, 12 Jun 2007 01:19:26 +0000

ここをリニュする時にブラウザのテストでお世話になったのが、browsershots.orgというサイト（無料）。サイトのアドレスを入れるといろんなOS、ブラウザで見たスクリーンショットを集めてくれるサイトです。

以前は１時間くらいで全部返ってきたのですが、最近は結構時間がかかるので、急いでいる時には使えないのが難点。（なので “Maximum wait” のところを “4 Hours” に設定する事をお薦めします。）それでも私のようなMacユーザーにはとてもありがたいサイトです。お仕事でも利用しています。

これを使ってみると、IEの馬鹿さ加減が悲しくなります。FirefoxやSafariでは全然問題ないのに、IEだと崩れている、という場合が多く、CSSをチェックしたり、ハックを探したり。ここに来てくれる人の約6割はIEからなので「IEサポートしていません」とは言えないし。:’(
なんとかしてください、Microsoftさん…

追記。
ついでにフォトログのほうもチェックしたら、IE 5では表示がおかしいことを発見。あーぁ…

- Related Posts -

TwitterとTumblr

tomo — Thu, 03 May 2007 01:00:38 +0000

最近ちまたで話題のTwitterとTumblr。
どちらもこっそりお試し中。
Twitterは本来の「ゆるく繋がるコミュニケーションサイト」というのを全く無視した使い方、TumblrはWPのプラグイン待ちです。

-Twitter-
1. Twitterに今何をしているか、IMにて書き込み。
2. WPのプラグイン、Twitter Toolでその日の投稿分をダイジェストでこのサイトのエントリーとしてインポート。←プラグインが自動でやってくれます。
3. それをプライベートエントリーとしてアップ。←プラグインが自動でやってくれます。（プライベート投稿にするためにコードちょっといじりました。）
4. 自分用の行動記録のできあがり。←こっそり。人に見せられるようなものではありません。（笑
仕事でほぼ一日中コンピュータの前に座っている私にとっては、かなり気軽に使えるメモ用紙です。

-Tumblr-
Tumblelogという、短いエントリー、リンク、メモ代わりのブログ用に開発されたシンプルなブログシステム。ちょっと使ってみて、あまりの動きの軽快さに惚れました。WPと比べるとかなりのさくさく感。Del.icio.usや、Twitter、Flickr、その他のブログのフィードを読み込めるので、いろんなサイトのポータル的に使うにはとても良さそう。SuprGlu + 簡単なエントリーもできる、という感じ。

かなり魅力的なのですが、できればこのサイトに全部まとめたい私としては、誰かがTumblrのAPIからデータをWPにインポートするプラグインを開発してくれるのを待っているところです。

- Related Posts -

monkey in firefox

tomo — Thu, 29 Mar 2007 03:26:41 +0000

ブラウザーを本格的にSafariからFirefoxに乗り換えました。Safariのほうが文字の表示が美しいので好きだったのですが、最近どうも動きが遅く、試しに今まで放っておいたFirefoxを最新版にアップグレードしたらなかなかいい感じになってきている事を発見。Add-onsがかなり使える事がわかって、思い切ってFirefoxをメインブラウザーにしました。

Add-onsで私がたくさん使っているのが検索エンジン。GoogleやAmazonは英語サイトと日本語サイトの検索を切り替えられるようになってずいぶん楽になりました。あとは辞書関係。gooの辞書検索エンジンと、dictionary.comやThesaurus.comの検索も簡単に。
mycroft.mozdev.org　←ここにいっぱいあります。

機能拡張の方はそれほど面白そうなのがなかったので、最初は導入しなかったのですが、Flickrで不思議なものを発見して、ちょっと気になって試してみたのが、Greasemonkey。
Firefox まとめサイト　←ここに詳しく説明されています。

インストールしたらFirefoxにおさるさんが現れました。:)
このGreasemonkey用に開発されたスクリプトをインストールすると、訪れたサイトのページをカスタマイズできるという、おそるべき代物です。ブラウザー側でのカスタマイズなのでサイトの運営者には全くわからないという。これ、サイトを作る側の人間としてはかなりいやな事だと思うのですが。

私がFlickrサイトに導入したのは
- コメントを返す際、相手の名前を自動で入れてくれるリンクを挿入してくれる。
- favoritesの写真を真四角サムネイルではなくフルサイズの小さい版で表示してくれる。
- baddy iconのドロップダウンメニューにその人のinterestingnessがサムネイルで見える。
別になくてもいいんですけどね。笑
userscripts.org　←ここにいろいろあります。

ただセキュリティーの問題があるので↓
CNET Japan
あまりぱかぱか使わない方が良さそうですが、世の中いろんなことを考える人がいるものだと感心しました。

- Related Posts -

お役立ちもの - Google Analytics

tomo — Sat, 21 Oct 2006 01:44:16 +0000

最近仕事がらみで使い始めたGoogle Analytics。
サイトのアクセス解析のプログラムです。
これがかなり使えます。gmailのアカウントを持っている人はそのメールアドレスで、持っていない人もそれ以外のメールアドレスでGoogleのアカウントを作ると使えるようになります。（たぶん）

データはマーケティングの最適化、コンテンツの最適化などにわかれていて、いろんなデータを見ることができます。Flashのバージョンがわかるというのも使えるデータのひとつ。

設置方法は指定されるJavaScriptをサイトの各ページに埋め込むだけ。データもグラフや地図を使って表示されるので、とってもわかりやすい。日本語表示もできて、しかも無料。←これがいちばんすてき。
Google、偉大です。

- Related Posts -

flickr and fotologue

tomo — Tue, 25 Apr 2006 03:31:55 +0000

写真好きの人達にはおなじみのflickrとfotologue。両方アカウントを持っていることは持っているのですが…

今ひとつ使いこなせていない気がしている今日この頃。
一番の原因は「最近あんまり写真撮ってない…」自分のフォトログにアップするのでかなり精一杯な状況。笑　

それでもFlickrのほうは、他の人の写真をさくさくと眺められるし、exploreで素敵な写真のダイジェストが見れるし、自分のcontactsの人の写真は一覧で見れるし、などなど、自分が更新してなくても十分楽しんでいます。☆つけるのも大好きで、後からfavoritesな写真のスライドショーをため息つきながら見たりして。

プライベートモードで自分の写真管理用に使う、という利用法も考えたのですが、今使っているレンタルサーバの容量が60GBもあって、一応自分用の写真管理のページはPhotoStackで作ったのがあるしなーと、却下。うーん…

fotologueのほうは、自分なりにわりと気に入った使い方をしていたのですが（ゆるゆる更新でしたが）最近、リニュしちゃいましたね…
なんとなく、前のほうが良かったなー、と思っているのは私だけ？
前からさくさく感はなかったのですが、さらにスローダウンした気がします。機能的にはflickrっぽい部分が加わって面白くなったような、なくなったような。どうなんだろー。ギャラリーのページとエントリーのページが別枠っていうのも、ちょっとわかりづらいなーと思うのです。
リニュしてからは誰でもアカウントを作れるようになったみたいなので、一度リセットしちゃおうかな…

そんな感じで、ちょっと悩み中なflickrとfotologue。なんか良い使い方、ないかな。

- Related Posts -

my mac powered up

tomo — Sat, 15 Apr 2006 02:48:16 +0000

mighty mouseを手に入れました。

正しくは、心優しい友人+お仕事をくれる人からいただきました。:) g5のdualとquadを持ち、ウィンドウズを持ち、23インチのモニターが３つも並んでいる彼の仕事場の隅で、ころりんと転がっていたのを発見。このまんなかにぷちってあるのは、もしかしてスクロールボール？か、かわいい…と心の中でつぶやいたのを見透かされたようで、使ってないから、持ってっていいよって言ってくれました。:D :D :D

今まで１つボタンのマウスしか使ったことのなかった私。もう感動です。右クリックとかできちゃうんだよ。くるくるってページがスクロールできちゃうんだよ。ついでにdashboardとか、exposéとかマウスで開いちゃうんだよ。すてきすぎです。あまりにもすてきなので、意味もなくページをスクロールしてにやにやしております。:P