m_sotsuron

iPhone 用 Web サ イ ト の 作 成 に つ い て

目 次 1 . は じ め に 1 （ 1 ） 動 機 1 （ 2 ） i P h o n e と は 2 （ 3 ） 対 象 者 に つ い て 2 （ 4 ） 類 似 物 に つ い て 3 2 . 制 作 物 に つ い て 3 （ 1 ） 最 適 化 と は 3 （ 2 ） i P h o n e 向 け W e b サ イ ト 作 成 6 （ 3 ） 基 本 的 な H T M L に つ い て 1 0 （ 4 ） 基 本 的 な C S S に つ い て 1 2 （ 5 ） i P h o n e 風 ナ ビ ゲ ー シ ョ ン ペ ー ジ 1 4 （ 6 ） ア ク セ ス の 振 り 分 け 1 5 （ 7 ） 検 証 に つ い て 1 6 （ 8 ） i P a d に つ い て 1 8 3 . 最 後 に 2 2

は じ め に （ 1 ） 動 機 i P h o n e に つ い て 調 べ そ れ に つ い て の 論 文 を 作 成 し よ う と 考 え た の は 、 ま ず 私 が 所 属 す る 福 田 ゼ ミ の 基 本 テ ー マ が 「 人 の 役 に 立 つ も の を つ く る 」 と い う こ と に 始 ま る 。 大 谷 大 学 に 入 学 し た 当 初 、 私 自 身 に 明 確 な 学 習 目 的 は な く 、 人 文 情 報 学 科 と い う 学 科 を 選 択 し た の も 、 理 系 は 苦 手 だ が W e b 関 連 の 勉 強 が し て み た い と 考 え て い た か ら で あ る 。 高 校 時 か ら パ ソ コ ン や W e b 関 連 に 興 味 は あ っ た も の の 、 こ れ と い っ た 専 門 知 識 な ど は 全 く 持 っ て お ら ず 、 ま し て や そ れ ら を 使 い 人 の 役 に 立 つ も の を つ く る と い う こ と は 考 え た こ と も な か っ た 。 そ の た め 2 回 生 に 上 が り 、 後 期 の ゼ ミ 選 択 時 に は 、 自 分 が 本 当 に 学 ん で い き た い 、 や り た い こ と は な ん だ ろ う か と 深 く 考 え る こ と に な っ た 。 そ し て 、 そ れ ぞ れ の ゼ ミ の 先 生 に お 話 を 聴 く う ち に 、 福 田 先 生 の こ の テ ー マ が 印 象 深 く 自 分 の 中 に 残 っ た 。 や は り 何 か を す る の な ら 、 自 分 の 自 己 満 足 で は な く 、 人 の た め に な る こ と を 身 に つ け て い き た い と 強 く 感 じ た た め で あ る 。 そ し て 、 福 田 ゼ ミ で 学 ん だ こ と を 活 か せ る 、 人 の 役 に 立 て る テ ー マ と は 何 だ ろ う か と 考 え た 結 果 、 「i P h o n e 用 W e b サ イ ト に つ い て 」 と い う テ ー マ を 思 い つ き 、 こ れ に つ い て 論 文 を 作 成 す る こ と に し た 。i P h o n e は 現 在 携 帯 電 話 に 代 わ る 次 世 代 モ バ イ ル デ バ イ ス と し て 、 着 々 と 使 用 率 を 拡 げ て お り 、 身 近 な も の と な っ て い る 。 そ し て そ の i P h o n e を 用 い て 、 出 先 で W e b サ イ ト な ど を 利 用 す る こ と は 多 々 あ り 、 そ ん な 世 間 一 般 的 な も の と な っ て き た i P h o n e 用 の W e b サ イ ト に つ い て ど の よ う な 仕 組 み で 成 り 立 っ て い る の か 、P C で 閲 覧 す る 時 と 中 身 は ど う 違 っ て い る の か 等 疑 問 が あ っ た た め 、 今 回 の テ ー マ を 設 定 し た 。

（ 2 ） i P h o n e と は ス マ ー ト フ ォ ン 自 体 は 世 界 各 国 の 通 信 会 社 か ら 2 0 0 0 年 頃 よ り 登 場 し て い た が 、i P h o n e は 2 0 0 8 年 7 月 11 日 に A p p l e 社 が 発 売 し た 「 i P h o n e 3 G 」 が 普 及 の き っ か け と な り 、 登 場 後 日 本 に お い て シ ェ ア が 大 き く 伸 び た モ バ イ ル デ バ イ ス で あ る 。 一 般 的 な 携 帯 電 話 と は 違 い 、 電 話 や メ ー ル 機 能 以 外 の 機 能 も 数 多 く 備 え て い る 。 ま た 現 在 で は i O S を 搭 載 し た i P h o n e だ け で な く 、 A n d r o i d O S を 搭 載 し た A Q U O S P H O N E や G A L A X Y な ど 国 産 ス マ ー ト フ ォ ン も シ ェ ア を 大 き く 伸 ば し て き て い る 。 i P h o n e だ け で な く 、 ど の ス マ ー ト フ ォ ン に も 共 通 し て い え る 最 も 大 き な 特 徴 は 、W e b サ イ ト を デ ス ク ト ッ プ 用 の パ ソ コ ン ブ ラ ウ ザ の よ う に 閲 覧 が で き る と い う 点 で あ る 。 従 来 は パ ソ コ ン で し か で き な か っ た 作 業 も 外 出 先 で 行 う こ と も で き 、 出 先 で 簡 単 に 調 べ 物 を お こ な っ た り 、 サ イ ト を 閲 覧 す る こ と も で き る た め 、 ユ ー ザ ー の 多 く は こ れ ら の 利 点 を 使 用 目 的 と し て い る 。 （ 3 ） 対 象 者 に つ い て 本 論 文 は 、 人 文 情 報 学 科 で こ れ か ら W e b サ イ ト を 作 成 し 公 開 し よ う と し て い る 人 、 ま た こ れ ま で に サ イ ト を 作 成 し た こ と が あ り 、 今 後 W e b サ イ ト を ス マ ー ト フ ォ ン 用 に 最 適 化 さ せ て い こ う と 考 え て い る 人 に 向 け て 作 成 し て い る 。 ま た 、H T M L や C S S に つ い て の 基 本 的 な 知 識 が あ る と い う こ と な ど も 対 象 の 条 件 と し て い る 。 そ の た め 、 デ ス ク ト ッ プ 用 の W e b ペ ー ジ に つ い て の 説 明 は 、 i P h o n e 用 の タ グ や ソ ー ス と の 比 較 時 以 外 は 基 本 省 く こ と と す る 。

（ 4 ） 類 似 物 に つ い て こ れ ま で の ゼ ミ 生 の 制 作 物 の 中 で 、 W e b サ イ ト を 作 成 す る た め の H T M L や C S S に つ い て ま と め た 教 材 や 論 文 は 存 在 し た が 、 i P h o n e 用 の W e b サ イ ト を 作 成 す る こ と に つ い て ま と め た 論 文 は 、 確 認 し た 中 で は 制 作 物 内 に は な い 。 こ れ は 近 年 に な っ て か ら ス マ ー ト フ ォ ン が 世 の 中 に 定 着 し 始 め た た め だ と 思 わ れ る 。 し か し 、 ネ ッ ト や 書 店 な ど で 調 べ て み る と 、i P h o n e に つ い て の 書 籍 や サ イ ト は 既 に 数 多 く 存 在 す る 。 今 回 は i P h o n e に つ い て 初 心 者 の 人 も わ か る よ う 基 本 的 な こ と を 説 明 す る と 同 時 に 、 そ れ ら 既 存 の も の と の 差 別 化 を 図 る た め 、 こ れ ら の サ イ ト ・ 書 籍 を 比 較 し 、 最 も 理 解 し や す い も の に な る よ う に 作 成 を 図 っ た 。 2 . 制 作 物 に つ い て （ 1 ） 最 適 化 と は W e b サ イ ト を 閲 覧 す る た め i P h o n e に 搭 載 さ れ て い る W e b ブ ラ ウ ザ は 、A p p l e 社 が 開 発 し た デ ス ク ト ッ プ 用 ブ ラ ウ ザ S a f a r i の モ バ イ ル 版 M o b i l e S a f a r i と い う も の で あ る 。 こ れ は デ ス ク ト ッ プ 用 に 作 成 さ れ た ほ と ん ど の W e b サ イ ト を 閲 覧 す る 機 能 が あ る が 、 i P h o n e と デ ス ク ト ッ プ 用 パ ソ コ ン で は 、 デ バ イ ス と 画 面 の 大 き さ 、 そ し て モ バ イ ル 通 信 網 に よ る 回 線 ス ピ ー ド が 異 な る た め 、 デ ス ク ト ッ プ 向 け に 作 成 さ れ た サ イ ト は 快 適 に 閲 覧 す る こ と が で き な い 場 合 が 出 て く る 。i P h o n e 用 に 最 適 化 し た サ イ ト を 公 開 し て い る メ ジ ャ ー な 例 と し て は 、 Y a h o o ! J a p a n 、 G o o g l e な ど の 検 索 エ ン ジ ン 、 ポ ー タ ル サ イ ト の l i v e d o o r 、 シ ョ ッ ピ ン グ サ イ ト の A m a z o n や 楽 天 、 ソ ー シ ャ ル ネ ッ ト ワ ー キ ン グ サ ー ビ ス の m i x i な ど の サ イ ト が 挙 げ ら れ る 。 例 え ば も し 、 こ れ ら の サ イ ト が

i P h o n e 用 に 最 適 化 さ れ ず そ の ま ま の 状 態 で 公 開 さ れ て い た 場 合 、 閲 覧 時 に 必 要 と し て い る 情 報 が 見 づ ら く 表 示 さ れ 、 ユ ー ザ ー は サ イ ト か ら 離 脱 し て し ま う 可 能 性 が 発 生 す る 。 す る と 、 本 来 そ の サ イ ト で 発 生 す る は ず だ っ た 成 約 や 売 り 上 げ の 減 少 を 招 き か ね な い 。 そ れ ら の 事 態 を 防 ぐ た め に も 、 事 前 に i P h o n e 用 に W e b サ イ ト を 最 適 化 す る こ と に は 、 大 変 意 義 が あ る 。 こ れ は 個 人 用 サ イ ト に も 共 通 し て い え る こ と で あ る 。 i P h o n e は W e b k i t と い う H T M L レ ン ダ リ ン グ エ ン ジ ン を 使 用 し て お り 、 こ れ は 最 新 の W e b 技 術 へ の 対 応 が 早 い た め 、 新 し い H T M L 5 や C S S 3 に 対 応 し て い る 。 そ の た め 特 別 な 理 由 が な い 限 り 、 i P h o n e 向 け の W e b ペ ー ジ を 作 成 す る 場 合 は H T M L 5 を 使 う の が 一 般 的 と 言 え る 。 C S S も 同 様 で あ る 。 最 新 の 技 術 を 用 い て W e b サ イ ト を 作 成 す る こ と が で き る た め 、H T M L の 記 述 を よ り 簡 単 に 記 述 す る こ と も 可 能 で あ り 、 サ イ ト の 作 成 者 に と っ て も 知 識 を 身 に つ け る 勉 強 に な る と い う 点 で も 利 点 は あ る 。 そ し て 上 記 し た M o b i l e S a f a r i に は い く つ か 制 限 事 項 が あ る 。 ・ フ ァ イ ル の ア ッ プ ロ ー ド/ ダ ウ ン ロ ー ド が で き な い ・ 「 マ ウ ス オ ー バ ー 」 の 表 現 が で き な い ・F l a s h な ど の プ ラ グ イ ン に 対 応 し て な い ・ フ レ ー ム 表 現 が で き な い ・ 日 本 語 フ ォ ン ト は 1 つ の み i P h o n e に は パ ソ コ ン の よ う に フ ァ イ ル 管 理 の 機 能 が な い 。 例 え ば 、 W e b ペ ー ジ 内 の 「 写 真 ア ル バ ム 」 に 保 存 を す る こ と 、 P D F フ ァ イ ル を M o b i l e S a f a r i で 開 く こ と 、 専 用 ア プ リ に 保 存 す る こ と は 可 能 だ が 、 そ

れ 以 外 の ほ と ん ど の フ ァ イ ル は ダ ウ ン ロ ー ド を 禁 止 さ れ て い る 。 「 マ ウ ス オ ー バ ー 」 の 表 現 が で き な い と い う の は 、i P h o n e は 画 面 を タ ッ チ す る こ と に よ り 操 作 す る 方 法 を 取 っ て い る た め 、 マ ウ ス の よ う に 「 移 動 」 と 「 押 す 」 を 分 け る こ と が で き ず 、2 つ ま と め て 「 タ ッ チ 」 と い う 動 作 に な る た め で あ る 。 そ の た め 、C S S の : h o v e r や 、 J a v a S c r i p t の o n m o u s e o v e r は 使 用 で き な い 。 J a v a S c r i p t を 工 夫 す れ ば 近 い 表 現 は で き る も の の 、 ボ タ ン の 上 に 指 を の せ る と 色 が 変 わ っ た り す る よ う な 処 理 は 難 し い と い え る 。 そ し て i P h o n e に で き な い こ と と し て 最 も 有 名 で あ る の が 、 F l a s h に 対 応 し て い な い こ と で あ る 。 ア プ リ を 使 用 す れ ば 再 生 可 能 の も の も あ る が 、 基 本 的 に 再 生 で き な い の が 一 般 的 で あ る 。 し か し 現 在 で は 韓 国 の S U M S U N G が 開 発 し 、 日 本 で は N T T ド コ モ が 販 売 し て い る G A L A X Y S な ど が F l a s h 対 応 し て お り 、 今 後 ス マ ー ト フ ォ ン と し て は 対 応 機 器 が 増 え る か も し れ な い 。 i f r a m e 要 素 を 使 っ た デ ス ク ト ッ プ 向 け サ イ ト は 少 な く な い 。 し か し M o b i l e S a f a r i で は こ の フ レ ー ム を 仕 様 通 り に 表 示 で き な い 。 H T M L 5 の 規 格 で は f r a m e 、 f r a m e s e t 、 n o f r a m e s 要 素 が 廃 止 対 象 と な っ て お り 、 i f r a m e 要 素 の み が 利 用 可 能 と な っ て い る が 、 使 い 勝 手 が 悪 い も の と な る た め i P h o n e で 使 う こ と は や め た 方 が い い と い え る 。 日 本 語 フ ォ ン ト は 1 つ の み と い う の は 、 M o b i l e S a f a r i の 使 用 上 の 制 限 で は な い も の の 、 日 本 語 フ ォ ン ト は ヒ ラ ギ ノ 角 ゴ シ ッ ク し か 付 属 し て お ら ず 、 明 朝 体 な ど は 使 え な い と い う こ と で あ る 。 日 本 語 フ ォ ン ト は 変 更 で き な い が 、 英 文 フ ォ ン ト は 充 実 し て い る の で 使 い 分 け す る こ と が 可 能 だ 。 以 上 が 、i P h o n e に 最 適 化 し た サ イ ト を 作 る た め に も 忘 れ て は い け な

い 制 限 事 項 で あ る 。 （ 2 ） i P h o n e 向 け W e b サ イ ト 作 成 こ こ で は i P h o n e 向 け W e b サ イ ト 作 成 の 基 本 的 な 方 法 と 最 低 限 の 知 識 を ま と め る 。i P h o n e は パ ソ コ ン と 違 い 、 画 面 サ イ ズ が 小 さ く 、 モ バ イ ル 回 線 を 使 用 し て い る た め テ キ ス ト や 画 像 の ダ ウ ン ロ ー ド に も 時 間 が か か る こ と な ど を 念 頭 に 置 き サ イ ト 設 計 を 考 え る 必 要 が あ る 。 実 際 に 私 も こ の 論 文 内 の 条 件 を 踏 ま え サ ン プ ル サ イ ト を 作 成 し て い る 。 な お 作 成 し た サ ン プ ル サ イ ト に つ い て は 卒 業 制 作 を み て ほ し い 。 （ ⅰ ） ペ ー ジ サ イ ズ は 横 3 2 0 p x 縦 4 8 0 p x デ ス ク ト ッ プ で は 、 横 幅 を 7 4 0 ∼ 9 6 0 p x 前 後 に 想 定 し て 設 計 す る の が 一 般 的 で あ る が 、i P h o n e で は 横 3 2 0 p x 縦 4 8 0 p x ま た は 横 4 8 0 p x 縦 3 2 0 p x と 設 定 す る 。 通 常 は 縦 表 示 時 の 横 幅 3 2 0 p x が 基 本 で あ る 。 こ こ で 大 事 な の が フ ァ ー ス ト ビ ュ ー で あ り 、 ア ク セ ス 時 最 初 に 表 示 さ れ る ペ ー ジ に は 最 も 伝 え た い 情 報 を 盛 り 込 ま な け れ ば な ら な い 。 M o b i l e S a f a r i に は 上 下 に U R L の 表 示 領 域 な ど が あ る た め 、 一 度 に 表 示 さ れ る 領 域 は 3 5 6 p x と な る 。 少 し で も 表 示 領 域 を 増 や す に は 、 H T M L の 最 後 に s c r i p t 要 素 を 記 述 、 そ こ か ら J a v a S c r i p t を 読 み 込 む こ と に よ り 、 U R L の 表 示 領 域 が 自 動 で 隠 れ る よ う に す る こ と が で き る 。 【H T M L 】 < s c r i p t t y p e = ” t e x t / j a v a s c r i p t ” s r c = ” j s / i p h o n e . j s ” > < / s c r i p t > < / b o d y > < / h t m l >

【j s . フ ァ イ ル 】 w i n d o w . a d d E v e n t L i s t e n e r ( ‘ l o a d , f u n c t i o n ( ) { s e t T i m e o u t ( f u n c t i o n ( ) { s c r o l l T o ( 0 , 1 ) ; } , 1 0 0 ) ; } , f a l s e ) ; 以 上 の 処 理 は 必 須 と い う わ け で は な い が 、 よ り 良 い サ イ ト 作 成 の た め に は 記 述 し た 方 が い い と い え る 。 （ ⅱ ） 画 像 サ イ ズ も 横 幅 3 2 0 p x 以 内 サ イ ト の 横 幅 が 3 2 0 p x な の で 、 画 像 も も ち ろ ん こ の 幅 に 納 め る 。 ま た M o b i l e S a f a r i は 読 み こ め る フ ァ イ ル サ イ ズ に 制 限 が あ る た め 注 意 が 必 要 で あ る 。 画 像 は そ の フ ァ イ ル の 「 重 さ （ フ ァ イ ル サ イ ズ ） 」 だ け で な く 「 大 き さ （ ピ ク セ ル 数 ） 」 が 制 限 の 対 象 に な っ て い る こ と に 注 意 が 必 要 で あ る 。 フ ァ イ ル の 種 類 制 限 G I F , P N G , T I F F 3 メ ガ ピ ク セ ル ま で J P E G 3 2 メ ガ ピ ク セ ル ま で H T M L , C S S , J a v a S c r i p t な ど 1 0 メ ガ バ イ ト ま で 上 記 の 他 に も 、

・ 文 字 サ イ ズ は 1 4 p x ∼ 1 6 p x 、 行 間 は 1 . 4 ∼ 1 . 6 ・ ペ ー ジ の 左 右 に は 1 0 p x の 余 白 を 作 る ・ ナ ビ ゲ ー シ ョ ン リ ン ク の 横 幅 は 4 4 p x 前 後 な ど 、 実 際 の 画 面 で 見 た 際 に 見 や す い 設 定 に し て お く 。 次 に セ マ ン テ ィ ッ ク ス 関 連 の 要 素 に つ い て で あ る 。 セ マ ン テ ィ ッ ク な マ ー ク ア ッ プ を 行 う と 、 作 成 者 が 文 書 の 構 造 を 理 解 し や す く な る だ け で な く 、 コ ン ピ ュ ー タ に と っ て も 理 解 し や す い デ ー タ と な る た め 、 サ ー チ エ ン ジ ン な ど で よ り 正 確 に デ ー タ を 取 り 出 せ る よ う に な る 。 例 え ば 、s e c t i o n 要 素 は 、 見 出 し と 本 文 で 構 成 さ れ る 1 つ の ま と ま り を マ ー ク ア ッ プ す る た め に 使 う も の で あ り 、 見 出 し が な い た だ の 文 章 の ま と ま り に 対 し て は 利 用 す る べ き で は な い 。 そ う い う 場 合 は d i v 要 素 を 使 用 す る 。 < s e c t i o n > < h 1 > セ ク シ ョ ン の 見 出 し < / h 1 > < p > 本 文 < / p > < / s e c t i o n > s e c t i o n 要 素 以 外 の 代 表 的 な も の は 、 a r t i c l e 、 n a v 、 h e a d e r 、 f o o t e r 、 f i g u r e 、 s m a l l な ど が あ り 、 H T M L の 各 要 素 を わ か り や す く す る た め に も セ マ ン テ ィ ッ ク ス 要 素 を 使 用 す る こ と を 忘 れ な い よ う に し た い 。 i P h o n e に 最 適 化 し た デ ザ イ ン に す る た め に は 、 V i e w p o r t の 設 定 も 忘 れ て は い け な い 。V i e w p o r t と は 、 表 示 領 域 を 指 定 す る た め の プ ロ パ テ ィ で 、 パ ソ コ ン 用 ブ ラ ウ ザ で は ウ ィ ン ド ウ の サ イ ズ に よ っ て 表 示 領 域 が 決 ま る も の だ が 、 i P h o n e は 特 に 指 定 し な い 限 り 表 示 領 域 の 横 幅 を

9 8 0 p x 分 を 画 面 に 収 ま る よ う に 画 面 サ イ ズ に 合 わ せ 縮 小 し て い る 。 ピ ン チ イ ン/ ピ ン チ ア ウ ト を 使 え ば 閲 覧 は 可 能 な も の の 、 よ り 快 適 に す る た め に も V i e w p o r t の 設 定 が 必 要 で あ る 。 V i e w p o r t は m e t a 要 素 を 使 用 し 、 下 記 の よ う に 定 義 す る 。 < m e t a n a m e = ” v i e w p o r t ” c o n t e n t = ” 値 ” / > 値 = 内 容 意 味 デ フ ォ ル ト の 値 w i d t h V i e w p o r t の 横 幅 9 8 0 p x h e i g h t V i e w p o r t の 縦 幅 幅 に 応 じ て 自 動 i n i t i a l - s c a l e ペ ー ジ 読 み 込 み 時 の 拡 大 率 1 u s e r - s c a l a b l e ユ ー ザ ー に よ る 拡 大 操 作 の 許 可 y e s m i n i m u n - s c a l e 拡 大 率 の 最 小 0 . 2 5 m a x i m u m - s c a l e 拡 大 率 の 最 大 1 . 6 V i e w p o r t を 指 定 せ ず に M o b i l e S a f a r i の デ フ ォ ル ト 値 を そ の ま ま 使 用 し た 場 合 は 、 次 の よ う に 指 定 し た の と 同 じ 状 態 に な る 。 < m e t a n a m e = ” v i e w p o r t ” c o n t e n t = ” w i d t h = 9 8 0 p x , i n i t i a l - s c a l e = 1 . 0 , u s e r - s c a l a b l e = y e s , m i n i m u m - s c a l e = 0 . 2 5 , m a x i m u m - s c a l e = 1 . 6 ” / > こ こ で は 、 値 を d e v i c e - w i d t h と 入 力 す る 。 そ う す る こ と に よ り 画 面 サ イ ズ が 3 2 0 p x 以 外 の デ バ イ ス で も 最 適 化 し 表 示 す る こ と が で き る た

め で あ る 。 （ 3 ） 基 本 的 な H T M L に つ い て 基 本 的 な セ マ ン テ ィ ッ ク ス 要 素 は デ ス ク ト ッ プ と ほ と ん ど 変 わ ら な い 。 ・ サ イ ト の ロ ゴ や ペ ー ジ の 見 出 し を h e a d e r で 囲 む ・ 見 出 し が あ る 節 を s e c t i o n で 囲 む ・ 写 真 や 挿 絵 な ど を f i g u r e で 囲 む ・ パ ン く ず リ ス ト を n a v で 囲 む ・ コ ピ ー ラ イ ト な ど を f o o t e r で 囲 む こ れ ら を 用 い て 、 ペ ー ジ の 各 部 位 の 意 味 を 明 確 に し て お く こ と を 念 頭 に お い て 作 業 を 進 め る 。H T M L フ ァ イ ル の 先 頭 で 、 V i e w p o r t や C S S の 設 定 を 行 う 。 こ こ で は そ の h e a d 要 素 の 定 義 に つ い て 説 明 す る 。 ① < ! D O C T Y P E h t m l > ②< h t m l l a n g = ” j a ” > < h e a d > ③< m e t a c h a r s e t = ” u t f - 8 ” / > ④< t i t l e > タ イ ト ル < / t i t l e > ⑤< m e t a n a m e = ” v i e w p o r t ” c o n t e n t = ” w i d t h = d e v i c e - w i d t h ” / > ⑥< m e t a n a m e = ” f o r m a t - d e t e c t i o n ” c o n t e n t = ” t e l e p h o n e = n o ” / > ⑦< l i n k r e l = ” a p p l e - t o u c h - i c o n ” h r e f = ” ア イ コ ン の フ ァ イ ル 名 . p n g ” / > ⑧< l i n k r e l = ” s t y l e s h e e t ” h r e f = ” c s s の フ ァ イ ル 名 . c s s ” m e d i a = ” s c r e e n ” / >

< / h e a d > ① D O C T Y P E 宣 言 ど う い う 仕 様 の H T M L ド キ ュ メ ン ト で あ る か を 宣 言 。 単 に 「D O C T Y P E h t m l 」 と 記 述 す る と H T M L 5 ド キ ュ メ ン ト と し て 処 理 さ れ る 。 ② 言 語 の 宣 言 ド キ ュ メ ン ト が 何 の 言 語 で 書 か れ て い る か の 宣 言 。 日 本 語 で あ れ ば 「l a n g = ” j a ” 」 と 記 入 。 ③ 文 字 コ ー ド 内 容 は サ イ ト 環 境 や ド キ ュ メ ン ト の 文 字 コ ー ド に 合 わ せ る が 、 特 に 指 定 や 制 約 が な い 場 合 U T F - 8 と す る の が 一 般 的 。 ④ タ イ ト ル デ ス ク ト ッ プ と は 違 い 、 表 示 で き る 文 字 数 が 少 な い た め 注 意 が 必 要 。 ⑤ V i e w p o r t の 設 定 上 記 で 説 明 し た と お り 、 値 を 「d e v i c e - w i d t h 」 と 設 定 。 ⑥ 電 話 番 号 認 識 の 無 効 化 M o b i l e S a f a r i に は 、 - （ ハ イ フ ン ） で 繋 が れ た 文 字 や 連 続 し た 数 字 の 文 字 列 を 見 つ け る と 、 電 話 番 号 な ど の 連 絡 先 と 判 定 し 自 動 的 に リ ン ク を 生 成 す る 機 能 が あ る 。 し か し 、 ハ イ フ ン を 用 い た 文 字 列 も 電 話 番 号 と 判 定 さ れ て し ま う 場 合 も あ る た め 、 こ こ で は あ え て 「” t e l e p h o n e = n o ” 」 と し て い る 。 ⑦ ホ ー ム 画 面 用 の ア イ コ ン の 設 定 M o b i l e S a f a r i で は 、 i P h o n e の ホ ー ム 画 面 に ブ ッ ク マ ー ク ア イ コ ン を 置 く こ と が で き る 。 こ れ を W e b ク リ ッ プ と 呼 ぶ 。 ア イ コ ン に 使 用 す る

画 像 は 、 横 11 4 p x 縦 11 4 p x 以 上 の P N G 形 式 で 作 成 す る 。 ア イ コ ン の 角 丸 と 光 沢 は i P h o n e の 方 で 自 動 的 に 付 け て く れ る た め 、 必 要 な い 。 ま た こ の 記 述 を せ ず に ア イ コ ン を 指 定 す る 場 合 は 、 画 像 の フ ァ イ ル 名 を a p p l e - t o u c h - i c o n . p n g に し て お き 、 サ イ ト の 一 番 上 の 階 層 に 配 置 す る 。 後 は 自 動 的 に ア イ コ ン が 生 成 さ れ る 。 ⑧ C S S の 読 み 込 み フ ァ イ ル 名 や デ バ イ ス の 種 類 を 指 定 し て C S S を 読 み 込 む 。 こ こ で 注 意 す る の が 、 m e d i a 属 性 で あ る 。 m e d i a 属 性 で 指 定 で き る 値 に は 「h a n d h e l d 」 と い う モ バ イ ル デ バ イ ス 向 け の 設 定 値 が あ る が 、 i P h o n e な ど の ス マ ー ト フ ォ ン で は パ ソ コ ン 用 ブ ラ ウ ザ と 同 じ 「s c r e e n 」 を 指 定 す る 。 （ 4 ） 基 本 的 な C S S に つ い て 次 に C S S の 説 明 を す る 。 デ ス ク ト ッ プ 向 け ペ ー ジ で は 、 W e b ブ ラ ウ ザ ご と の ス タ イ ル 設 定 の 違 い を 吸 収 す る た め に 、 最 初 に す べ て の 要 素 の デ フ ォ ル ト ス タ イ ル を リ セ ッ ト す る の が 一 般 的 で あ る 。i P h o n e の 場 合 は M o b i l e S a f a r i の み を 考 慮 す れ ば い い た め 、 本 来 は リ セ ッ ト す る 必 要 は な い 。 し か し 、m a r g i n や p a d d i n g な ど の レ イ ア ウ ト に 関 す る ス タ イ ル は 、 リ セ ッ ト し て お い た 方 が ス タ イ リ ン グ し や す い た め 、C S S フ ァ イ ル の 先 頭 で リ セ ッ ト を し て お く 。 M o b i l e S a f a r i に は 、 文 字 サ イ ズ を 自 動 的 に 調 整 す る 機 能 も 付 い て い る 。 そ れ を 制 御 す る た め の プ ロ パ テ ィ が 「- w e b k i t - t e x t - s i z e - a d j u s t - 」 で あ り 、 デ フ ォ ル ト 値 は 「a u t o 」 だ が 、 C S S で サ イ ズ を 調 整 す る 場 合 「n o n e 」 を 指 定 し 、 無 効 化 す る 必 要 が あ る 。 i P h o n e で は H T M L 5 を 使 用 し て い る た め 、 H T M L 5 の 一 部 の 新 要 素

に も 気 を 配 ら な け れ ば な ら な い 。H T M L 5 以 前 か ら あ る 要 素 に 対 し て は 、 そ れ ぞ れ ブ ラ ウ ザ 側 で デ フ ォ ル ト の d i s p l a y プ ロ パ テ ィ の 値 が セ ッ ト さ れ て い る 。 例 え ば 、h 1 要 素 は 「 d i s p l a y : b l o c k 」 が デ フ ォ ル ト で あ る 。 し か し 新 要 素 の 場 合 、 ブ ラ ウ ザ に よ っ て は セ ッ ト さ れ て い な い 場 合 が あ る た め 、 こ ち ら で 設 定 し て お く 必 要 が あ る 。h e a d e r 要 素 の よ う な も の で も 、 ブ ロ ッ ク レ ベ ル と し て 設 定 さ れ て い な い 場 合 が あ る た め 、 ブ ロ ッ ク レ ベ ル に 該 当 す る 要 素 は 、 「d i s p l a y : b l o c k 」 と 指 定 す る こ と が 望 ま し い 。 画 像 、 リ ス ト 、 表 な ど に 関 し て も 設 定 の リ セ ッ ト が 必 要 で あ る 。i m g 要 素 は ボ ー ダ ー を な し に 、 縦 方 向 の 配 置 を 下 揃 え に 設 定 し 、 リ ス ト に 使 用 す る l i 要 素 は リ ス ト ス タ イ ル を な し に す る 。 t a b l e 要 素 は ボ ー ダ ー 間 隔 を 0 に し 、 内 容 が な い セ ル も 表 示 す る 設 定 に す る 。 i P h o n e で は C S S 3 を 使 用 す る た め 、 ベ ン ダ ー プ レ フ ィ ッ ク ス と い う も の が 必 要 と な る 。 ベ ン ダ ー プ レ フ ィ ッ ク ス と は 、 正 式 に 仕 様 が 定 め ら れ て い な い が ブ ラ ウ ザ が 試 験 的 に 先 行 実 装 し て い る プ ロ パ テ ィ や 、 ブ ラ ウ ザ が 独 自 実 装 し て い る プ ロ パ テ ィ を 表 す 。M o b i l e S a f a r i の ベ ン ダ ー プ レ フ ィ ッ ク ス は 「- w e b k i t - 」 で あ る が 、 現 状 一 部 の プ ロ パ テ ィ を 除 き 、 ベ ン ダ ー プ レ フ ィ ッ ク ス の 記 述 が 必 須 と な っ て い る 。 そ の た め 、 今 後 ベ ン ダ ー フ ィ ッ ク ス が 正 式 に 勧 告 さ れ た 時 の こ と も 考 え 、 ベ ン ダ ー プ レ フ ィ ッ ク ス な し の 記 述 と あ り の 記 述 を 併 用 す る 。 - w e b k i t - b o r d e r - r a d i u s : 8 p x ; / / ベ ン ダ ー プ レ フ ィ ッ ク ス あ り b o r d e r - r a d i u s : 8 p x ; / / ベ ン ダ ー プ レ フ ィ ッ ク ス な し

（ 5 ） i P h o n e 風 ナ ビ ゲ ー シ ョ ン ペ ー ジ i P h o n e に は ア プ リ の 画 面 に 似 せ た ナ ビ ゲ ー シ ョ ン が 多 く 存 在 し て い る 。 そ れ ら は 一 体 ど う や っ て 表 現 し て い る の か 、 こ こ で 説 明 し て い く 。 i P h o n e の ホ ー ム 画 面 の よ う に 、 グ リ ッ ド 状 に ア イ コ ン を 並 べ た ナ ビ ゲ ー シ ョ ン は ユ ー ザ ー に と っ て 感 覚 的 に わ か り や す い ナ ビ ゲ ー シ ョ ン で あ る 。 例 と し て は ア イ コ ン の 角 丸 と 影 を C S S で つ け 、 縦 横 6 0 p x の 正 方 形 ア イ コ ン を 並 べ る と い っ た よ う な こ と で あ る 。 こ れ は ナ ビ ゲ ー シ ョ ン 全 体 を n a v 要 素 で マ ー ク ア ッ プ し 、 個 々 の ア イ コ ン に な る 部 分 は u l 、 l i 要 素 を 使 っ て 記 述 す る 。 ま た a l t 属 性 に は 詳 し い 内 容 を 記 述 す る 。 H T M L 5 で は i m g 要 素 の a l t 属 性 に 関 す る 以 下 の 詳 細 な 設 定 が 設 け ら れ て い る 。 イ メ ー ジ の 内 容 a l t 属 性 に 記 述 す べ き 内 容 図 表 な ど イ メ ー ジ が コ ン テ ン ツ に と っ て 重 要 で あ る 場 合 a l t 属 性 を 設 け 、 前 後 の 文 脈 に 自 然 な 形 で 、 対 象 イ メ ー ジ の 詳 細 な 表 現 を 記 述 ア イ コ ン 画 像 の よ う に 装 飾 や 補 足 の た め の イ メ ー ジ で あ る 場 合 a l t 属 性 を 設 け る が 、 中 身 を 空 に す る ま た リ ス ト 型 ナ ビ ゲ ー シ ョ ン も i P h o n e ア プ リ で は よ く 見 ら れ る 。 単 な る テ キ ス ト リ ン ク よ り も タ ッ プ し や す く 、 ま た 項 目 を 縦 に 追 加 し て い く だ け な の で 作 成 者 に も 後 々 使 い や す い ナ ビ ゲ ー シ ョ ン で あ る 。 そ し て ヘ ッ ダ ー 型 の ナ ビ ゲ ー シ ョ ン も そ の 1 つ で あ り 、 タ イ ト ル 表 示 と ナ ビ ゲ ー シ ョ ン の 機 能 を 兼 ね 備 え て い る 。 こ れ を 設 置 す る と ペ ー ジ 内 で ユ ー ザ ー が 迷 い に く い 、 移 動 の し や す い サ イ ト に な る 。 し か し こ れ

は ヘ ッ ダ ー に 表 示 領 域 を 確 保 し な け れ ば な ら ず 、 あ ま り 文 字 数 の 多 い も の は 収 ま ら な い た め 注 意 が 必 要 だ 。 i P h o n e の 基 本 的 な ペ ー ジ は こ れ ら 3 つ の 要 素 で ア プ リ の よ う に 見 せ か け る こ と が で き る 。 （ 6 ） ア ク セ ス の 振 り 分 け i P h o n e に 最 適 化 し た サ イ ト を 作 成 し た ら 、 i P h o n e ユ ー ザ ー を サ イ ト へ 誘 導 し な け れ ば な ら な い 。 こ こ で は 主 に 3 つ の 方 法 を 紹 介 す る 。 （ ⅰ ）. h t a c c e s s に よ る 振 り 分 け ま ず 「. h t a c c e s s 」 と い う W e b サ ー バ の 動 作 を 制 御 す る フ ァ イ ル を 使 っ て i P h o n e 向 け サ イ ト に 転 送 さ せ る 方 法 が あ る 。 利 用 し て い る W e b サ ー バ で 、m o d _ r e w r i t e と い う U R L を 書 き 換 え る 機 能 が 有 効 で な け れ ば 使 え な い た め 、 ま ず こ れ を 確 認 す る 。 次 に テ キ ス ト エ デ ィ タ を 用 い 、 下 記 の 内 容 を 「. h t a c c e s s 」 と い う フ ァ イ ル に 書 き 込 む 。 < I f M o d u l e m o d _ r e w r i t e . c > R e w r i t e E n g i n e o n R e w r i t e C o n d % { H T T P _ U S E R _ A G E N T } i P h o n e R e w r i t e R u l e ^ $ h t t p : / / w w w . e x a m p l e . c o m / i p h o n e / [ R ] < / I f M o d u l e > （ ⅱ ）J a v a S c r i p t に よ る 振 り 分 け デ ス ク ト ッ プ 向 け ト ッ プ ペ ー ジ( i n d e x . h t m l ) に か き 込 む と 、 デ ス ク ト ッ プ 向 け の サ イ ト の U R L に ア ク セ ス し た と き 自 動 転 送 さ せ る こ と が で き る よ う に な る 。

< h e a d > < s c r i p t > i f ( n a v i g a t o r . u s e r A g e n t . i n d e x O f ( ‘ i P h o n e ’ ) ! = - 1 ) { l o c a t i o n . h r e f = h t t p : / / w w w . e x a m p l e . c o m / i p h o n e / ; } < / s c r i p t > < / h e a d . > （ ⅲ ）P H P に よ る 振 り 分 け こ れ は P H P を 使 用 し て い る サ イ ト の 場 合 使 用 で き る 。 以 下 の 記 述 を P H P フ ァ イ ル に 書 き 込 む の だ が 、 ど の P H P フ ァ イ ル に 書 き 込 む か は サ イ ト の 構 成 に よ っ て 異 な る た め 、P H P に 詳 し い 人 な ど と 相 談 し て 加 え る こ と を 勧 め る 。 < ? P h p i f ( s t r o p s ( $ _ S E V E R [ ‘ H T T P _ U S E R _ A G E N T ’ ] , ‘ i P h o n e ’ ) ! = = f a l s e ) { h e a d e r ( “ l o c a t i o n : サ イ ト の U R L ” ) ; } ? > （ 7 ） 検 証 に つ い て 次 に 上 記 で 作 成 し た W e b ペ ー ジ が 正 し く 表 示 さ れ る こ と を 確 認 し な け れ ば な ら な い 。 こ こ で は そ の 検 証 方 法 に つ い て 紹 介 す る 。 （ ⅰ ）M a c の 場 合

M a c で 検 証 す る 場 合 、 i P h o n e シ ミ ュ レ ー タ （ i O S シ ミ ュ レ ー タ ） を 利 用 す る 方 法 と 、O S X の パ ー ソ ナ ル W e b 共 有 を 起 動 し 、 i P h o n e 実 機 で 確 認 す る 方 法 が あ る 。 本 テ キ ス ト で は 、 前 者 の 方 法 で 検 証 す る 方 法 を 紹 介 す る 。 i P h o n e シ ミ ュ レ ー タ と は 、 i P h o n e ア プ リ を 開 発 す る た め の i O S S D K に 含 ま れ て い る 、 動 作 検 証 用 の ソ フ ト ウ ェ ア で あ り 、 ダ ウ ン ロ ー ド に は 、i P h o n e D e v e l o p e r P r o g r a m へ の 無 料 登 録 が 必 要 で あ る 。 登 録 後 、i O S S D K の ダ ウ ン ロ ー ド を 行 い 、 イ ン ス ト ー ル す る 。 イ ン ス ト ー ル 後 に 、 i P h o n e シ ミ ュ レ ー タ を 開 く に は 、 「 D e v e l o p e r 」 → 「 P l a t f o r m s 」 → 「 i P h o n e S i m u l a t o r . p l a t f o r m 」 → 「 D e v e l o p e r 」 → 「A p p l i c a t i o n s 」 と 、 深 い 階 層 の フ ォ ル ダ ま で い か な け れ ば な ら な い 。 こ れ を 覚 え て お く の も い い が 、 S p o t l i g h t を 使 用 し 、 「 i P h o n e S i m u l a t o r 」 で 検 索 に か け る こ と を お 奨 め す る 。 i P h o n e シ ミ ュ レ ー タ で は 、 マ ウ ス が 指 の か わ り に な る 。 ピ ン チ イ ン / ア ウ ト を 行 う と き は O p t i o n キ ー を 押 し た ま ま ド ラ ッ グ す る こ と で 、 同 じ よ う に 動 作 す る と い う こ と も 覚 え て お く と い い 。 W e b ペ ー ジ を 検 証 す る と き は 、 「 S a f a r i 」 を 起 動 し 目 的 の W e b ペ ー ジ の U R L を 入 力 す る 。 ハ ー ド デ ィ ス ク 内 に 保 存 さ れ た W e b ペ ー ジ を 見 る 場 合 は 、 「 h t t p : / / 」 の 代 わ り に 「 f i l e : / / 」 を つ け 、 そ の 後 に 「/ U s e r s 」 か ら 始 ま る フ ァ イ ル パ ス を 入 力 す る と 表 示 さ れ る 。 こ の シ ミ ュ レ ー タ は i 「 ハ ー ド ウ ェ ア 」 メ ニ ュ ー の 「 デ バ イ ス 」 を 切 り 替 え れ ば 、 i P a d も 検 証 可 能 で あ る 。 （ ⅱ ）W i n d o w s の 場 合 i P h o n e シ ミ ュ レ ー タ は 、 W i n d o w s 版 の も の は 提 供 さ れ て い な い た め 、 上 記 の 方 法 は 使 用 で き ず 、 パ ソ コ ン だ け で 検 証 す る こ と は で き な い 。 し

か し W i n d o w s 版 S a f a r i を 使 え ば 、 だ い た い の 見 た 目 を 確 認 す る こ と は で き る 。 ま た i P h o n e の 実 機 が あ れ ば 、 W e b サ ー バ を 導 入 す る こ と で 検 証 が 可 能 に な る 。 こ れ に は フ リ ー ソ フ ト の X A M P P f o r W i n d o w s を 利 用 す る こ と を 推 奨 す る 。 こ れ を イ ン ス ト ー ル す る と 、 ス タ ー ト メ ニ ュ ー な ど に X A M P P C o n t r o l P a n e l が 登 録 さ れ 、 そ こ か ら A p a c h e を 起 動 す る 。 特 に 設 定 を 変 更 せ ず イ ン ス ト ー ル し た 場 合 、X A M P P は C ド ラ イ ブ 直 下 の 「x a m p p 」 フ ォ ル ダ に イ ン ス ト ー ル さ れ 、 そ の フ ォ ル ダ 内 の 「 h t d o c s 」 フ ォ ル ダ の 中 に 確 認 し た い フ ァ イ ル を コ ピ ー す る 。 そ し て i P h o n e で 「h t t p : / / パ ソ コ ン の ロ ー カ ル I P ア ド レ ス / 」 に ア ク セ ス す る こ と で 検 証 可 能 と な る 。 （ 8 ） i P a d に つ い て i P a d は 2 0 1 0 年 5 月 よ り 発 売 さ れ 、 大 谷 大 学 で も 新 し い 試 み と し て 2 0 11 年 度 か ら i P a d を 導 入 し た 。 こ こ で は i P a d と i P h o n e に つ い て 比 較 す る 。 ・ 画 面 サ イ ズ の 違 い ・ 画 像 フ ァ イ ル の 制 限 の 違 い ・ W e b ク リ ッ プ の サ イ ズ の 違 い ・ ビ デ オ の 再 生 方 法 の 違 い こ れ ら が 主 な i P a d と i P h o n e の 違 い で あ る 。 画 面 サ イ ズ は 見 て わ か る と お り 、i P a d の 方 が 大 き く 作 ら れ て お り 、 解 像 度 が 違 う 。 ま た i P h o n e で V i e w p o r t が デ フ ォ ル ト で 横 幅 9 8 0 p x に

設 定 さ れ て い る よ う に 、i P a d も デ フ ォ ル ト で は 横 幅 9 8 0 p x に レ ン ダ リ ン グ さ れ て い る 。 し か し 実 際 表 示 す る と 、 物 理 的 デ ィ ス プ レ イ の 大 き さ の 違 い に よ り 、i P h o n e で は 少 々 見 づ ら い サ イ ト も 、 i P a d で は 9 . 7 イ ン チ の デ ィ ス プ レ イ の た め そ れ ほ ど 見 づ ら く は な い 。 J P E G 画 像 は 両 方 と も 3 2 メ ガ ピ ク セ ル ま で 対 応 し て い る が 、 G I F 、 P N G 、 T I F F 画 像 の 場 合 、 i P h o n e 4 で は 3 メ ガ ピ ク セ ル ま で 対 応 し て い る の に 対 し 、i P a d で は 2 メ ガ ピ ク セ ル ま で と な っ て い る 。 i P a d で も W e b サ イ ト の ブ ッ ク マ ー ク を 、 W e b ク リ ッ プ と し て お く こ と が で き 、 ア イ コ ン の 指 定 方 法 も i P h o n e と 同 じ だ が 、 ア イ コ ン サ イ ズ だ け が 多 少 違 う 。 i P h o n e で は 、 ビ デ オ を i f r a m e や e m b e d 、 H T M L 5 の v i d e o 要 素 な ど で マ ー ク ア ッ プ し W e b ペ ー ジ に 埋 め 込 む こ と が 可 能 だ が 、 再 生 す る と き は 専 用 の プ レ ー ヤ ー が 起 動 し て 再 生 さ れ る 。 対 す る i P a d は 、 W e b ペ ー ジ に 埋 め 込 ま れ た 状 態 の ま ま 再 生 が 可 能 で あ り 、 デ ス ク ト ッ プ 向 け サ イ ト と 同 じ よ う に 再 生 す る こ と が 可 能 で あ る 。 し か し F l a s h 動 画 は 原 則 的 に 再 生 で き な い こ と に 注 意 が 必 要 で あ る 。 以 上 の こ と を 踏 ま え る と i P a d は 最 適 化 の 必 要 が ほ と ん ど な い よ う に 感 じ ら れ る 。 し か し な が ら 、 や は り 快 適 な W e b 閲 覧 を 可 能 に す る た め に i P a d に も 最 適 化 は 必 要 で あ る と い え る 。 以 下 に i P a d へ の 最 適 化 の 注 意 点 を 端 的 に 述 べ て お く 。 ・ i P a d に 合 わ せ た V i e w p o r t を 設 定 す る ・ F l a s h の 代 替 要 素 を 用 意 す る ・ 画 像 サ イ ズ の 制 限 に 気 を つ け る ・ ス ク ロ ー ル バ ー は 表 示 さ れ な い

・ p o s i t i o n e : f i x e d に 頼 ら な い ・ マ ウ ス オ ー バ ー の 表 現 が で き な い i P a d で の V i e w p o r t の 設 定 は 2 通 り あ り 、 1 つ め の 方 法 と し て は 「V i e w p o r t の w i d t h に 何 も 指 定 し な い 」 と い う 方 法 で あ る 。 こ れ は つ ま り デ フ ォ ル ト の V i e w p o r t サ イ ズ の ま ま に す る と い う こ と で 、 サ イ ト に よ っ て は デ フ ォ ル ト で も 問 題 な い サ イ ズ に な る 。2 つ め は 「 V i e w p o r t の w i d t h に サ イ ト の 横 幅 + α を 指 定 す る 」 方 法 で あ る 。 こ れ は デ フ ォ ル ト の 9 8 0 p x 以 外 の サ イ ズ を 指 定 す る こ と で 、 例 え ば w i d t h = 1 0 2 4 p x と い う V i e w p o r t に 設 定 し た 場 合 、 ペ ー ジ の 横 幅 が 9 8 2 p x の サ イ ト で あ っ た 場 合 は 左 右 に 余 白 が で き た 状 態 で 表 示 さ れ る 。 逆 に 9 3 0 ｐ ｘ な ど 小 さ い サ イ ズ に 指 定 す る と 、 少 し 拡 大 さ れ た よ う な 形 で 表 示 さ れ る 。 一 時 期 よ り F l a s h は 使 用 さ れ る こ と が 減 っ た も の の 、 現 在 で も 使 用 す る と こ ろ は 多 く 使 用 さ れ て い る 。F l a s h が 使 用 さ れ る こ と に よ り 起 こ る 問 題 は 、F l a s h を 主 要 メ ニ ュ ー に 使 用 し た 場 合 F l a s h 非 対 応 の 環 境 で 閲 覧 す る と 他 の ペ ー ジ に 移 動 で き な い と い う こ と で あ る 。 こ れ を 避 け る た め 、F l a s h コ ン テ ン ツ を 埋 め 込 ん だ 箇 所 に 代 替 の 要 素 を い れ て お き 、 F l a s h 非 対 応 環 境 で は 代 替 要 素 が 表 示 さ れ る よ う に す る 必 要 が あ る 。 画 像 サ イ ズ は 上 記 に 記 し た と お り 、 サ イ ズ 制 限 に 気 を つ け れ ば 表 示 さ れ な い な ど の 問 題 は ク リ ア で き る 。 i P h o n e も i P a d も ス ク ロ ー ル バ ー と い う 概 念 が な い 。 こ れ は 普 段 操 作 し て い る と き に 問 題 に な ら な い が 、i f r a m e 要 素 や o v e r f l o w プ ロ パ テ ィ を 使 っ た 要 素 の 大 き さ を 固 定 し た ス ク ロ ー ル を 行 う 場 合 、 問 題 と な っ て く る 。 例 え ば 、 デ ス ク ト ッ プ サ イ ト の ト ッ プ ペ ー ジ で 「 新 着 情 報 」 や 「N e w s 」 な ど の コ ン テ ン ツ が ミ ニ ボ ッ ク ス 内 で ス ク ロ ー ル で き る よ う

に な っ て い る 場 合 が あ る 。 こ の ス ク ロ ー ル は 、i P h o n e 、 i P a d と も に 実 質 的 に 使 用 不 可 能 で あ る 。 「 実 質 的 に 」 と い う の は 、 指 二 本 で ス ワ イ プ す る こ と で こ の ミ ニ ボ ッ ク ス の ス ク ロ ー ル は 可 能 な も の の 、 こ の 操 作 方 法 を す べ て の ユ ー ザ ー が 知 っ て い る わ け で は な い か ら で あ る 。 つ ま り 機 能 と し て は 問 題 無 い が 、 快 適 な 閲 覧 の た め に こ れ に 関 し て も 場 合 に よ っ て 最 適 化 が 必 要 と い え る 。 最 後 に 、 ス ク ロ ー ル バ ー と 似 た よ う な 問 題 だ が 、p o s i t i o n : f i x e d の 問 題 が あ る 。 例 え ば ス ク ロ ー ル さ せ て い る が 一 部 の 要 素 が 移 動 せ ず 、 画 面 に 表 示 さ れ 続 け る W e b ペ ー ジ が 存 在 す る 場 合 が あ る 。 こ れ は p o s i t i o n : f i x e d と い う C S S プ ロ パ テ ィ と 値 が 使 わ れ て い る た め で あ る 。 こ う い っ た サ イ ト を i P a d で 閲 覧 す る と 、 p o s i t i o n : f i x e d を 適 用 し て も 要 素 が 固 定 さ れ ず 、 ス ク ロ ー ル ご と 動 い て し ま う 。 ま た フ ッ タ ー な ど に 固 定 し て い る 場 合 、 フ ッ タ ー が コ ン テ ン ツ に 被 っ て し ま う こ と な ど が あ る 。 こ れ を 回 避 す る た め の 方 法 と し て 、i P a d 閲 覧 時 に は 次 の C S S が 適 用 さ れ る よ う に す る 。 【i P a d 用 C S S 】 . f o o t e r { p o s i t i o n : f i x e d ; w i d t h : 1 0 0 % ; b o t t o m : 0 ; } こ こ に 記 述 さ れ る p o s i t i o n : s t a t i c に よ り 、 i P a d で の 閲 覧 時 の み. f o o t e r が 普 通 に ス ク ロ ー ル す る こ と に な る 。 マ ウ ス オ ー バ ー に 関 し て は i P h o n e の 時 に 触 れ た と お り 、 i P a d も 同 じ

く 使 用 で き な い 。 こ れ に 代 替 す る も の と し て は 、J a v a S c r i p t の タ ッ チ 系 イ ベ ン ト で あ る 。 ・ o n t o u c h s t a r t （ o n m o u s e d o w n に 相 当 ） ・ o n t o u c h m o v e （ o n m o u s e m o v e に 相 当 ） ・ o n t o u c h h e a d （ o n m o u s e u p に 相 当 ） こ れ ら を 使 用 す る こ と に よ り 、 表 現 を 再 現 す る こ と が 可 能 で あ る 。 し か し 必 ず し も 表 現 を 再 現 す る 必 要 は な い の で 、 ケ ー ス バ イ ケ ー ス で イ ベ ン ト や 表 現 は 変 え た 方 が い い だ ろ う 。 3 . 最 後 に こ れ ま で サ イ ト を 作 成 す る 際 、i P h o n e や i P a d な ど に つ い て 考 え て 作 成 し た こ と は な か っ た 。H T M L や C S S な ど の 勉 強 は こ れ ま で 学 科 の 授 業 な ど で も 行 っ て い た た め 、 一 通 り の 基 本 的 知 識 は あ っ た 。 し か し 、 モ バ イ ル デ バ イ ス に 関 し て は 今 ま で 興 味 を 持 っ た こ と が ほ と ん ど な く 、 i P h o n e に し て も i P a d に し て も 自 分 か ら 勉 強 し た こ と は ほ ぼ な か っ た 。 昨 年 大 谷 大 学 で i P a d 2 が 配 布 さ れ た も の の 、 私 た ち は 4 回 生 だ っ た た め 授 業 カ リ キ ュ ラ ム は な く 、 宝 の 持 ち 腐 れ と な っ て い た 生 徒 も 多 か っ た と 思 わ れ る 。 私 自 身 i P h o n e ・ i P a d に つ い て の 知 識 は 今 回 卒 業 論 文 の テ ー マ に す る ま で 全 く 持 ち 合 わ せ て お ら ず 、 ま た 最 適 化 に つ い て も 暗 中 模 索 状 態 で あ っ た 。 今 後 こ う い っ た モ バ イ ル デ バ イ ス は 普 及 率 を 伸 ば す だ ろ う と 考 え ら れ る 。 現 在 は 携 帯 と ス マ ー ト フ ォ ン の 二 台 持 ち と い う 人 も い つ か は ス マ ー ト フ ォ ン 一 台 の み に な る か も し れ な い 。 ま た 今 携 帯 だ と い う 人 も 、 昔 ポ

ケ ベ ル が 携 帯 に 取 っ て 代 わ っ た よ う に 、 い つ か す べ て ス マ ー ト フ ォ ン に な る 時 代 が く る か も し れ な い 。 私 た ち サ イ ト 作 成 者 は 、 そ ん な も し も に 備 え 、 ユ ー ザ ー が 常 に よ り よ い 環 境 で 快 適 に W e b を 利 用 で き る こ と を 念 頭 に 置 く べ き で あ る 。 私 が こ の 論 文 内 で 紹 介 し た 最 適 化 は 本 当 に 基 本 的 な 一 部 分 で あ り 、 他 の や り 方 も も ち ろ ん 多 種 多 様 に 存 在 し て い る 。 今 こ の 瞬 間 も 世 界 中 で ネ ッ ト 利 用 者 達 が 新 た な 技 術 を 生 み 出 し て い る か も し れ な い 。 今 後 も H T M L や C S S の 規 格 が 改 定 さ れ る に つ れ ま た 変 わ っ て く る こ と も 多 く 出 て く る と 考 え ら れ る 。 し か し 冒 頭 で 記 し た と お り 、 こ れ か ら W e b サ イ ト を 作 成 し 公 開 し よ う と し て い る 人 、 ま た こ れ ま で に サ イ ト を 作 成 し た こ と が あ り 、 今 後 W e b サ イ ト を ス マ ー ト フ ォ ン 用 に 最 適 化 さ せ て い こ う と 考 え て い る 人 た ち に は 、 現 在 の こ と だ け で な く 今 後 ど の よ う に W e b は 展 開 し て い く か を 考 え 情 報 を 収 集 し な が ら サ イ ト を 作 成 し て 欲 し い と 考 え る 。 そ し て 、 そ の き っ か け に 少 し で も こ の 論 文 が な れ ば 幸 い で あ る 。

文 献 表 谷 拓 樹 著 『H T M L 5 + C S S 3 で 作 る 魅 せ る i P h o n e サ イ ト 』 『Y a h o o ! デ ベ ロ ッ パ ー ネ ッ ト ワ ー ク 』 h t t p : / / t e c h b l o g .y a h o o . c o . j p / h t m l 5 / h t m l 5 / 『H T M L 5 に つ い て の お さ ら い 』 h t t p : / / w 3 g . j p / b l o g / s t u d i e s / h t m l 5 r e p o r t 『i P a d F i l e s 』 h t t p : / / a r i g a t o - i p o d . c o m / i p a d - i p h o n e - i p o d - t o u c h . h t m l 『t o - R 』 h t t p : / / b l o g .w e b c r e a t i v e p a r k . n e t / 2 0 1 0 / 0 8 / 1 3 - 2 0 5 9 0 3 . h t m l 『i p h o n e w i k i 』 h t t p : / / w w w . i p h o o o n e . c o m / p u k i w i k i / i n d e x . p h p ? F r o n t P a g e 『i P h o n e 対 応 W e b サ イ ト 構 築 入 門 』 h t t p : / / s o u r c e f o r g e . j p / m a g a z i n e / 0 8 / 1 0 / 3 0 / 1 0 5 1 2 3 0 『i P h o n e i P a d 向 け サ イ ト を 制 作 す る た め の い ろ い ろ 』 h t t p : / / s y n a p s e 2 8 . c o m / i p h o n e - i p a d 向 け サ イ ト を 制 作 す る た め の い ろ い ろ/