2007年11月11日

とにかく何事も挑戦だ -初心者のiPhoneサイト制作記-

と言いつつiPod touchを所有していないのに(冷汗)...
iPod-touch_safari_01.jpg

(写真はArs Technicaより拝借)

どうやって確認をすれば良いのか考えもしていないところが、まるで実物が手元に無いAlter 8800用のBasicを制作していた時のPaul AllenとBill Gatesの様だ(汗&笑)。

何を作ったのか一体何に挑戦したのかというとiPhone、iPod touch用のブログの制作に挑戦したである。つまりiPhone、iPod touch版Mac!!Mac!!Mac!!の「mac!!mac!!mac!! for OS ] : testdrive」をRapidWeaverで作ったのだ(笑)。といってもRapidWeaverではクリック一発で出来てしまうのだが(汗)...

mac!!mac!!mac!!-for-OS-X.jpg


実物を所有していないのに...確認のしようも無いのに(冷汗&爆)...さらにサイト制作の知識は無いに等しいのに(大脂汗)...

ということで、心優しいiPod touchユーザの方から是非様子をお伺いしたい。誠に勝手では御座いますが皆様のご好意におすがりさせて頂きたい(冷汗&笑)。

「mac!!mac!!mac!! for OS ] : testdrive」にもコメントとトラックバック機能を付けておいたので是非ご利用頂きたい。午前中の時点ではまともにコメント機能が使えなかったが先ほどテスト書込みを行なった際は上手くいった。

それでは皆々様のご意見、ご感想お待ち致しております(笑)!!

追記
どうもタイトルをクリックする場所によって「カテゴリ」が表示されてしまうらしい(冷汗)...

追記
ページスタイルの「幅」の設定を「可変」に変更。iPhoneでの表示状態を確認出来るアプリ「iPhoney」にて表示確認を行なう。リンクがiPhoney上で正常に動作しないので現物上で動作しているのかどうかが心配(冷汗)...ほかにも写真が縦でははみ出てしまう、RSSがどうもまともに機能していない等など...問題だらけ(大脂汗)...

追記
何とかリンクが使える様になった。いつも「別ウィンドウで表示」する方法を取っているのだが、iPhoneのSaferiでは使えないらしい(汗)...コメントもポップアップをOffにした途端に見える様になった。とにかく疲れた(グッタリ)...

追記
画像サイズが縦表示ではみ出るのをサイズ指定を手打ちする事で回避する事にした。計算が邪魔臭いのでサイトメーカーさんの「画像サイズ自動計算」を利用させて頂いた。いちいち計算しなくても適切なサイズで表示する方法をご存知の方がおられたら是非このド初心者に教えて頂きたい(懇願&冷汗)。

下の写真は画像サイズ調節後のiPhoney上での表示状態。

iphoney_01.jpg


横幅を250pxに指定したのでだいぶんスッキリとしたまとまりになった。御陰さまで気分もスッキリだ(笑)。しかし、ページ名右側にあるポタンをクリックすると表示されるカテゴリ表示等がiPhoneyでは正常に表示されない。

iphoney_02.jpg


実機でもこれと同じ表示になっているのかご存知の方がおられたら是非優しく教えて頂けないだろうか(汗&笑)。何卒宜しくお願い致します(懇願)。

追記
「mobile tool & links」の名称でiPod touchで便利に使えそうなリンクを追加。その際他のサイトの方々の内容を見せて頂いているとリンクの記述が「外部ウィンドウ表示」を利用されているサイトが殆どだった。ということはiPhoneyで機能しないだけで実機では正常に動作するという事だろうか??

iphoney_03.jpg


新しく作ったページの写真だが見て頂いて分かる様に「- links -」の表記だけ文字が大きい。なぜこうなるのかが全く分からない(冷汗)...というわけで引き続きご感想、ご意見等お聞かせ頂けましたら非常に有り難いです(懇願&笑)。

追記
今日('07.11.11)出かけ先の家電量販店でiPod touchからmac!!mac!!mac!! for OS X : testdriveにアクセスしてみる...正直まともに表示されるのかどうか心配しながらバクバクと心臓をいわせながらアクセス...しかし、その願いも空しく最悪な状況が目の前に表示される...サイトが横に長いっっっっ(大脂汗)!!

その御陰で全体が小さく表示されてしまい文字が全く見えないっっっっ!!どこをクリックして良いのか分からないっっっっっ!!見る気にならないっっっっっっっっ(超冷汗)!!

誰かここから救い出して欲しい♪ by佐野元春と心の中で叫んでしまいそうだった(涙)...

帰宅後、すぐさま幅を600pxに調整し直し。これでまともな表示になっているのだろうか(冷汗)??iPod touchユーザの皆様是非現状をご教示下さいまし(重ねて懇願)。

そうそう、外部ウィンドウ表示は正常に動作していた(笑)。ああぁぁ...やっぱり実機が無いと確認が出来ないのかぁ(冷汗)...

追記
手打ちでちまちまとCSSなどをカスタマイズ(汗&笑)。幅を350pxに指定しているつもりである(汗)...どうもiPod touchのモノによって表示状態が違う様子(あてにはしないで欲しい[汗]...)...とにもかくにも昨日(07.11.12)ご協力頂いたみとさん、retroさん、そして一番最初にご意見を下さったジキタリスさんには心の底から感謝をしたい(多々感謝)。

引き続き皆々様のご意見、ご感想及び現状報告重ねてよろしくお願い致します(ひたすら平伏し)。

アップル-新潟県中越沖地震の被害を受けられましたお客様へ 特別修理サービスのご案内・熊本県梅雨前線に伴う大雨による被害地域の被害を受けられましたお客様へ 特別修理サービスのご案内

アフェリエイト・リンク


参考リンク

mac!!mac!!mac!! for OS ] : testdrive

act2-ラピッドウィーバー3.6

SunMax

アーク

FONでiPod touchのアクセスポイントを増やそう(アフェリエイト・リンク)


802.11n 非対応Macには11n対応 USB無線LANアダプタ(アフェリエイト・リンク)

Apple純正メモリ(アフェリエイト・リンク)

以外と掘り出し物があるNTT-X Store(アフェリエイト・リンク)

Mac用メモリが本当に安いValueLand(アフェリエイト・リンク)

ブロードバンドプロバイダ料金比較(アフェリエイト・リンク)

posted by 賀川和之 at 00:00| Comment(12) | TrackBack(2) | iPhone/iPad | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
iPod touchからアクセスしてみました。
iPod touchを横にした場合でも、縦にした場合でも、左右に余白ができます。拡大すればちょうどよくなるのですが。
Posted by ジキタリス at 2007年11月10日 13:45
ジキタリスさん早速のコメント誠にありがとう御座います(多々感謝)。mac!!mac!!mac!! for OS ] : testdriveにもコメントを入れておいたのですが念のためこちらにも(汗&笑)。

早速サイトの幅を600pxから700pxに調整してみました。ちょうど良い具合になっておりますでしょうか??

様子をお聞かせ頂けましたら幸いです(笑)。
Posted by +.kだいひょう at 2007年11月10日 14:24
私も、iPodtouchもiPhoneも持っていませんが、サイトを作ろうという熱意に脱帽です。_(._.)_
Posted by Metal at 2007年11月13日 00:40
ありがとう御座いますっっっっ!!
Metalさんっっっっっっっっっっ(感動の涙)!!

そのお言葉でわたくしは救われました(涙×2)...
ちなみにわたくしは今回のサイト構築で脱毛です(爆)。
Posted by +.kだいひょう at 2007年11月13日 00:58
ソースを見せていただきました.
ご存じかもしれませんが,http://developer.apple.com/jp/iphone/devcenter/designingcontent.htmlが参考になります.

これを元に,下記のコードをmetaタグのあたりに入れる方が早いかもしれません.

<link media="only screen and (max-device-width:480px)" href="small-device.css" type="text/css" rel="stylesheet" />
<meta name="viewport" content="width=320, initial-scale=1.0, user-scalable=no" />

現在は横幅を320pxに調整されているのですよねぇ.
上記は,初期の倍率を1.0にして,拡大縮小をしないようにするための設定です.

ボックスレイアウトについては私もいろいろ考えているのですが,2カラムにするとどうしてもメニューの下の方がスカスカになるので,1カラムの方が良いかと思ったり...
iPod touchを横にしてブラウズする人と縦にしてブラウズする人はどっちが多いんでしょう?
私は縦ですが...
Posted by DoubleKO at 2007年11月14日 12:38
あなたは...あなたは本当にチュンサン...もとい、DoubleKOさんなのね(感動の号泣)!? byユジン

ああぁぁ...貴方様が帰って来てくれるとは(感動の号泣×2)...

っと...コードの件を忘れてしまうところでした(冷汗)...
早速先ほどからご指摘通りに色々と試さして頂いた結果...ここかぁっっっっっ!?という場所に挿入してアップ致しました。

現在どの様な表示なっておりますでしょうか(大脂汗)??

そうそう2カラムの件なんですが、わたくし1カラムにしたかったんですが、どうやればその様に表示出来るのかサッパリ分からずに取りあえず色んな数値を弄くり倒してあの様に致しました(冷汗)...

もちろんわたくしもiPod touchは縦派で御座います(所有していないのに断言している[冷汗]...)。

とにかく...帰って来てくれたのねっっっっっ!?チュンサン...もとい...DoubleKOさんっっっっ(感動の号泣×3)!!
Posted by +.kだいひょう at 2007年11月14日 18:48
えっと,私は私ですが,そんなに涙を流さなくても...
また,脱水になるんじゃないかと心配でございますw

説明が悪くてごめんなさい.
今の状態だと横幅が330px(あるいはもうちょっと?)になっていて,拡大も縮小も出来ないので常にどっちかにはみ出した状態で表示されてます.

linkタグのmedia属性のところが複雑なのが原因かと.
挿入してあるものも含めてmedia属性がscreenになってるものがたくさんあるので,どれを読みに行ってるのかよく分かりませんが,私が書いたhref="small-device.css" のところはコピペじゃダメで,対象とするmedia用のCSSが参照されなければなりません.
たぶん,ref="rw_common/themes/alpha/css/width/320.css" が,それ用のヤツでしょうか?

これを読みに行ってるのだとすると,

#pageHeader #grad {
width: 330px;
}

となっていて,しかも私が書き込んだmetaタグに

initial-scale=1.0, user-scalable=no

となってるので,1.0倍かつ拡大も縮小もされない状態になります.
iPod touchで表示されるページが320pxよりも幅広のものであれば,initial-scaleは適当に調節されますから,CSSで横幅を320px以上にしようと思われてるのであれば,このmetaタグがない方が普通に表示されます.

たぶん,目指してるところは横にはスクロールせずに,縦に読んでいくレイアウトでしょうから,CSSで幅を320pxちょうどにして,

<meta name="viewport" content="width=320, initial-scale=1.0, user-scalable=no" />

と書いておく方が,良いのではないかと思ったしだいです.

media属性については,handheldとscreen,あとはprintですかね.
handheldとprintはいいとして,screenは

<link media="only screen and (max-device-width:480px)"
href="小さい画面用CSSのURL" type="text/css" rel="stylesheet" />

だけでも構わないと思いますが,もしもMacで見たときなどに大きく表示させたいのであれば,

<link media="screen and (min-device-width:481px)"
href="大きい画面用CSSのURL" type="text/css" rel="stylesheet" />

と個別にCSSを指定することも出来ます.

長々と,しかも分かりにくくてスミマセン.
また,遊びに来ますです.
Posted by DoubleKO at 2007年11月14日 20:34
遅くなって申し訳御座いません(汗&謝)...
御陰さまで脱水症状は免れておりますです(爆)...

とりあえず上記に書いて頂いている内容を自分なりに
勝手に要約して(爆)、色々と試してみました。

分かった事は”width”を290に設定してもiPhoney上では
表示がおかしかったこと。そして、自分もiPod touchを
購入しないと難しそうだという事が分かりました(大脂汗)...

取りあえずNOBONさんのブログのコメントでは
「改善されてますねぇ」と驚きスクープ表現が
ありましたので、もしかして、もしかすて...
なのかもしれません。

ああぁぁ...さっき夕飯の買い物に行った時に
Sofmap寄って見てくれば良かったぁ(涙)...
といっても最近連日でiPod touch弄りに行って
いるのでそろそろ●ofmapはヤバいかも(冷汗)...
Posted by +.kだいひょう at 2007年11月15日 18:39
大事な事忘れておりました...
色々とご教授頂きありがとう御座いましたっっっっ(感動の涙)!!
Posted by +.kだいひょう at 2007年11月15日 18:42
昨日の夜中にはちゃんと見えていたと思ったんですけど,今見ると左側に空白部分が10pxちょっとぐらいありますね.
ちなみに,今のところはこんな風に見えてます.

http://doubleko.blog18.fc2.com/file/SnapShot1195128328.png

とても複雑な構造なので良く分かってませんし,なにせ私も自分のところのために勉強中なので...

http://plusdotk.ongaeshi.biz/macmacmacmobile/rw_common/themes/alpha/small-device.cssは存在しないといわれるので,iPod touchはこれを見に行ってるわけではないはずです.
ブロックかimgに左マージンを取っていたりします?

small-device.cssと320.cssの二つをくっつけて

<link rel="stylesheet"
type="text/css"
media="only screen and (max-device-width:480px)"
href="rw_common/themes/alpha/css/width/320.css" />

としておいて,320.cssの最初に一番大きなコンテナであるbodyGradについて

body #bodyGrad {
width: 320px;
margin: 8px auto 0px; /*topの8pxは適当に変えてください*/
/*その他の指定*/
}

みたいな感じでうまくいきませんでしょうか?
それか,同じくmedia属性にscreenが指定してあるstyles.cssの方も読みに行ってるような気がするので,そっちのbodyGradを320pxにしてしまうのもありかもしれません.この時には320.css自体が不要ですし,"only screen and (max-device-width:480px)"の指定もなくて構わないかも.

あとは,これが原因なのかどうかは分かりませんが,body_grad.pngなどの画像のwidthが3000pxになっていますが,画像のサイズを320x400に縮小して,

body #bodyGrad {
background: url(rw_common/themes/alpha/images/body_grad.png) no-repeat;
}

としてみるとか...

いろいろ書き込んでスミマセンね.
私も文字の大きさの調節がうまく行かなくて,苦労してたりするので,どんな具合か気になっちゃって...
間違ったことを書き込んでたら恥ずかしいので,この辺にしておきます.(大脂汗)
Posted by DoubleKO at 2007年11月15日 21:50
何度もありがとう御座います(感動の号泣)!!

フッ、フツ、フッ、フゥ〜〜〜〜...
分かりますたよ...

http://plusdotk.ongaeshi.biz/macmacmacmobile/rw_common/themes/iphone/css/small-devices.css

まずthemesに以前のiphoneフォルダが残っていましたのでその中のcssを利用することに致しましたです。

そして...よくよく見てみたら存在しているファイル名は”small-devices.css”なのにindex.htmlに一生懸命打ち込んでいたファイル名には...”small-device.css”...

”small-device.css”

”small-devices.css”

deviceの後に”s”が無かったので御座います(爆)...

現在これだけ修正かけました。また時間を見て編集してみます(笑)。

ご丁寧にありがとう御座いました(多々感謝)。
Posted by +.kだいひょう at 2007年11月16日 13:48
Posted by +.kだいひょう at 2007年11月16日 13:52
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス: [必須入力]

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

「mac!!mac!!mac!! for OS X : testdrive」を試す
Excerpt: Mac!!Mac!!Mac!! の +.kだいひょう さんから、ご自身が作られた iPod touch サイトの検証をコメントより承りましたので、ちっとばかし覗かせていただきました:)高いよ〜(爆) ..
Weblog: Blog!NOBON
Tracked: 2007-11-14 11:32

iPod touch の Safari に最適化したウェブサイトを作成する方法
Excerpt: iPod touch や iPhone に搭載されているインターネットブラウザ Safari は、少しばかり特殊な表示・操作方法がありますので、ウェブサイトを対応させておく必要があります。 もち..
Weblog: iPod touch Hacks !
Tracked: 2007-11-18 10:23