カテゴリー「携帯サイト作成」の13件の記事

2008年7月31日 (木)

携帯サイトでのユーザーナビゲーションはページ内リンク

携帯サイト ユーザビリティ ナビ
>>①→②→③→④

「地下鉄に乗っているときでも、駅で読み込んでおけば、駅と駅の間でたくさん読める」

とはてブコメントにあるように、3ページぐらいに渡る長い読み物ではまとめて1ページに表示してページ内リンクにした方が携帯ユーザーにとっては読みやすい。ただ1ページあたりに表示できる容量はだいたい100KB以下なので注意したい。

 

| | コメント (0)

2008年7月30日 (水)

iPhone用アプリ開発者向けサイト [まとめ]

iPhone用アプリケーション開発者向けエントリーを、はてなブックマーク 人気順 - iphoneよりピックアップしました。

iPhone用アプリ開発者向け記事
□iPhone用アプリ開発
 →iPhone/iPod touchアプリケーション開発者になるための高速道路
 →iPhone向けWebアプリを作ろう(1/4) - @IT
□タッチパネルの座標を取得するJavaScript
 →90秒で理解するiPhone JavaScript(マルチタッチ編)
□iPhone用アプリ紹介ブログ
 →iPhoneアプリケーション.jp
□iPhone SDK ダウンロード
 →iPhone Dev Center

□iPhone用ウェブサイト構築
 →iPhoneサイトを作ってみよう - builder by ZDNet Japan
 →WordPressをiPhoneなどのモバイル端末で表示させるプラグイン集 | コリス

iPhoneについて
□iPhoneまとめ
 →iPhoneまとめサイト: qanda
□スペック
 →iPhoneの説明書(前編)
□ひらがな入力
 →iPhone 3G の新しい日本語入力方式(動画) - iPhone・iPod touch ラボ

このエントリーを含むはてなブックマーク

Apple Inc. (Public, NASDAQ:AAPL)○
特色
Macintosh、MacOS、QuickTime、iPod、iPhoneなどの開発・製造・販売。
時価総額(2008/7/29)
$139.08Bilion = 13.9兆円(1$=100\)
株価
$157.00
売上高(2007年度)
240.6億USドル = 2.40兆円(1$=100\)
CEO
スティーブ・ジョブズ

どなたがiPhone開発本を最初に出すのか楽しみですね。

[追記]2008年8月22日
夏の50連発!! これが定番iPhoneアプリだ(前編)

[追記]2008.11.4
サンプルコード付きのiPhone向け開発リファレンスまとめ(labolo)

[追記]2008.11.14
連載:目指せ!iPhoneアプリ開発エキスパート(技術評論社)

[追記]2008.12.29
fladdict» iPhoneアプリって結局儲かるの?

[追記]2009.4.9
日本人がつまずかないためのiPhone開発ポイント(@IT)

| | コメント (0)

2008年7月21日 (月)

[携帯サイト] リンクをスクロールさせるhtmlタグ

携帯サイトは240px画面幅との戦いです。ユーザビリティを考えるとリンクは一行で表示させた方が良いかもしれないと思い調べて見ました。

<div mode="nowrap">改行禁止のブロックで長い文章を書くとPCなら横スクロールバーが出ますが携帯ではその部分だけスクロール</div>

<p mode="nowrap">改行禁止のブロックで長い文章を書くとPCなら横スクロールバーが出ますが携帯ではその部分だけスクロール</p>

テキストリンクが一行で表示され、選択フォーカスされるとマーキー(Marquee)タグのようにスクロールされます。ただAuだけのようですね。

[参考]
携帯ページで文章スクロール - 教えて!goo
携帯サイト制作について教えて下さい。 - 教えて!goo
au one net Q&Aコミュニティ 携帯サイトのスクロールのタグ?
携帯タグ一覧表

| | コメント (0)

2008年4月23日 (水)

携帯サイト作成入門・注意点

@海外で携帯サイトを作ったのですが、初めて携帯サイトをつくってPCサイトと勝手が違い手間取りました。そういえば携帯サイト用テンプレートエントリーも書きましたね。

先ほど、携帯サイトをつくるに当たり知っておいた方が良いエントリー「携帯サイト初心者の方に向けたセミナー資料」が良くまとまっていたので防備録も兼ねて紹介します。

Mobile0
ドコモが6割ですが、携帯サイトメインユーザー若年層のキャリア比較すると4:4:2ぐらいかな。

Mobile1
PCサイトのソースでは携帯端末では意図したように表示されません。さらに携帯各端末によって表示のされかたが違い早くブラウザ統一をお願いしたいです。

Mobile2
公式サイトになるには審査が厳しいですし、自由にリンクや広告掲載ができないデメリットも多く、集客サイトを持っているならば勝手サイト(一般サイト)の方がマシかも。
>>ケータイ公式サイトとライブドアの関わり

Mobile3
パケット定額化し、さらに第4世代が始まれば通信速度も向上し、PCサイトとの差も縮まるはず。

Mobile4
3G携帯がメインとなっています。

Mobile5
携帯画面は小さいので無駄を省いたサイト作りをしていれば100KBは切れますが画像の質を落さないとね。

Mobile6
240ドットないんですか、知らなかった。

Mobile8
マイクロソフトと同じでドコモが嫌われる理由のひとつ。ロゴ変えるだけじゃなく仕様もお願いします。3社用のサイトを作っていること自体コスト増なんですから。

Mobile9
これも面倒なんですよね。

Mobile10
日本国内の3大キャリア用のためとはいえメンドクサイよ。

Mobile11
絵文字はソフトバンクだけ互換性がないというのはどういうことだ。

Mobile12
携帯端末用Web制作バイブル」は持ってます。携帯サイト作成に必要な情報がほぼカバーされているのでオススメです。「ケータイHTMLコンパクトリファレンス」こちらのレビューも良さそうですが在庫切れで残念。イメージを見る限りこちらも欲しいです。

Mobile13
P1エミュレータは約500機種対応テスターです。全端末を用意するのは容易じゃなく、ようやく出たかって感じですね。

Mobile15
独自タグや使えないタグの把握は重要です。

Mobile16
FlashMX以降に導入された「FlashLite」。FlashCS3にアップデートしようかな。
>>AdobeStoreウェブデザイン&開発

Mobile17
PCとの境がなくなることを考えてUTF-8でしょ。

Mobile18
これは知らなかった。φ(..)メモメモ

| | コメント (0)

2008年4月 2日 (水)

P1エミュレーター

約500機種の携帯サイトテスター「P1エミュレーター」。携帯機種によりこれほど違いが出るとは思わなかったのでちょい凹んでおります。

自分の携帯は「カシオW53CA」というau機種で思いのほかタグによる制限がなく思い通りの画面になるので実機テストはこれとドコモの(たしか)905SHの2機種だけでしたが「P1エミュレーター」で確認したらボロボロ。画面ブラウザぐらいキャリアさん側で統一してくれよ(特にドコモとソフトバンク)。

グチはこのぐらいにしてタグ防備録。

■携帯サイト頻繁タグ
<A>リンクタグ
<IMG>画像挿入タグ
<DIV>汎用ブロックレベル
<BR>改行タグ
<FONT>フォントタグ
<HR>区切り/水平線タグ
<CENTER>中央揃え
<MARQUEE>マーキータグ


まず、PタグとBRタグ。
Pタグはブロックレベル要素のため、要素の上下に1行分の余白が生まれます。本来、ブロックレベル要素だからと言って要素の上下に余白が必要だと規定されているわけではないのですが、多くのブラウザ(携帯ブラウザ)を含め、そういった挙動になります。

こ の余白はCSSで調整が可能であるという点、さらに、SEO等でPタグが重視される傾向にあることから、PタグはPC向けサイトではよく使われます。一 方、携帯サイトでは、外部CSSがauにしか対応しておらず、Pタグで余白の調整ができません。そのため、携帯サイトで余白を作るのに、BRタグが用いら れるという背景があります。

次に、DIV要素。
PC向けではIDやクラス指定によって、CSSでボックスを定義する場合がほとんどです。しかし、既述の理由により、携帯サイトでは、CENTERタグでは制御できない左右揃えのために、DIV要素はもっぱら「align属性」を指定するにとどまります。

次に、STRONGタグ。
論 理強調タグ、Bタグは多くのブラウザでは太字で表示されます。しかし、携帯サイトでは、これらのタグで囲っても太字で表示されないので、使う意味があまり ありません。ちなみに、これらのタグが太字で表示されなければならないという規定があるわけではありませんので、携帯ブラウザのバグではありません。な お、携帯SEOが今後流行ることを予測すると、STRONGタグは使用しておくのも良いかもしれません。

次に、リストタグ。
こ ちらもPC向けでは、SEO対策の一環として、よく用いるのですが、携帯サイトでは使いません。リストタグを使用すると、左に余白ができますが、これも既 述の理由で、調整が不可能なため使用しません。常に1行表示が求められる携帯サイトでは、左に余白ができると1行で表示できる文字数が減るため、これが使 われない大きな要因です。

次に、TABLEタグ。
TABLEタグは、段組に使用する超メ ジャーなタグ。しかし、入れ子でソースが複雑化する・SEOに不向きといった理由からPCサイトでもあまり使用されなくなってきました。携帯サイトでは TABLEタグが使用できる端末は割と新しいものではないと、内容が表示されない可能性が大きく、さらに入れ子などは御法度になります。

次に、フォントタグ。
PC向けでは、CSSを用いて、SPANやDIVタグで指定するのが普通。一方携帯サイトでは、既述の理由により、FONTタグで代用する古い手法が用いられます。

次に、HRタグ。
区切り線は、PCサイトでは全くと言っていいほど使用しません。CSSやTABLEタグで代用することが可能なため、あまり使われていないのが現状です。携帯サイトでは、既述の理由により、CSS及びTABLEタグが不可のため、線を表示するのに多用します。
ち なみに、携帯ブラウザでは「noshade:影なし」は対応していないようです。さらに、「size="1"」では、auが正しい表記をする一方、ドコモ は「size="1"」でもあきらかに「size="2"」で表示されるような…また、「size="2"」以降でauでは影が表示されますが、ドコモは 影自体が表示されないようです。

次に、CENTERタグ。
要素を中央揃えするのに、このタグを用いるのはいささか古い。PC向けではDIV要素で指定するのが普通です。携帯サイトではDIV要素でも指定ができるのですが、一部機種が未対応のため、中央揃えにこのタグがよく使用されます。

次に、マーキータグ。
こちらは過去の記事に詳しく書いたので、そちらを参考にしてください。

ほんと↑知らんと悲惨です。
○<font color="#FFA500">オレンジ</font>
×<span style="color:orange">オレンジ</span>
Spanタグだとダメなんですよね。

他にもTableタグなんてさらに悲惨でした。もうグダグダです。最終的にはPCブラウザと同じになるでしょうけどたぶん2年後ぐらいだと思います。まあ市場のほとんどは3Gらしいので強気(?)にいきましょう。

[引用・参考]
携帯サイトのページコーディングでよく使うHTMLタグ
携帯サイト作成時のTips②■DoCoMoではTableのcellpaddingとcellspasingがきかない
携帯サイトのTableタグ - 人力検索はてな

[追記]Tableタグ

<table>
<tr><td bgcolor="#FFFFFF">○</td></tr>
</table>

<table>
<tr bgcolor="#FFFFFF"><td>×</td></tr>
</table>

bgcolorはtdタグの間違いでした。

| | コメント (0)

2008年4月 1日 (火)

Mobile Link Descovery

Mobile Link Discoveryとは
閲覧しているウェブサイトのモバイル端末用ページのURI(URL/URN)を、Webクローラ等エージェントが理解できるよう、(X)HTML / RSS / Atom フィードなどで表現する仕様です。 同じ内容のコンテンツだけど、PC用と携帯電話用ではURLが異なる場合に使うそうです。

[XHTML]
<link rel="alternate" media="handheld" type="text/html" href="携帯サイトURL" />

[Atom 1.0]
<link rel="alternate" x:media="handheld" type="text/html" href="Atom用URL" />

[RSS]
<rss xmlns:xhtml="http://www.w3.org/1999/xhtml">
<xhtml:link rel="alternate" media="handheld" type="text/html" href="RSS用URL" />

人力検索はてなで説明すると

[PC用URL]http://q.hatena.ne.jp/1206984155
<head>
<link href="http://q.hatena.ne.jp/mobile/1206984155"
type="text/html" media="handheld" rel="alternate"/>

</head>

[携帯用URL]http://q.hatena.ne.jp/mobile/1206984155

PC側に仕込むってことですね。このエントリーを含むはてなブックマーク

[参考]
開発者さま向け - Mobile Link Discovery 対応について
Mobile Link Discovery - naoyaのはてなダイアリー
[ヅラド] 携帯電話用ウェブサイトをつくりはじめた
ライブドアブログでのMETAタグの設置場 - livedoor ナレッジ 知識、知恵のカタマリ
HTML文書からCSSへのリンク - CSS(カスケーディングスタイルシート)入門

| | コメント (0)

2008年3月20日 (木)

携帯サイトの画面サイズ

『今後の主流は240×400ピクセル!?』

携帯サイトを作っていて少し不安になり始めました。

従来では「QVGA」(横:240×縦:320ピクセル)が基本でしたが、最近では「VGA」(横:480×縦:640ピクセル)や、さらに上のサイズが 数多く登場しています。サイトで画像などを表示させる場合、このディスプレイサイズのデータを入力しその端末に合った画像サイズが表示されるようにしま す。最近では(横:480×縦:800ピクセル)という端末も出てきました。今までは「QVGA」に合わせていた画像やバナーなどのサイズも、今後はさら にもう1サイズ上の画像を用意することが必要になっていくことでしょう。
>>新端末の注目ポイント - livedoor ディレクター Blog

とりあえず注意すべき横幅20(全角10文字)で作っておけばほとんどの機種には対応できそうです。

[参考:画面サイズ一覧]
ドコモ
au
ソフトバンク
WILCOM
TU-KA

このエントリーを含むはてなブックマーク

| | コメント (0)

[モバイルサイト]絵文字の使い方

絵文字って携帯サイト上では非常に有効な装飾になります。

StyleWalker」という「Girlswalker」や「東京ガールズコレクション」で有名なゼイヴェルの子会社があります。どうやらファッション系SNSらしく益若つばささんをイメージキャラクターとして会員集めをしています。

その携帯サイト「StyleWalker Mobile」では絵文字が頻繁に使用されておりました。

ブランドのブログを見たりshineup欲しかったアノ服scissorsアバターで着てみたりhappy02note同じブランドFAN仲間を見つけたりheart01何でもできちゃうshineオシャレなSNSにハマリすぎ注意報impact発令中だsign05bearingheart04upsign03

文章はシャベリ言葉で、「カラフルな文字」と「5連続の絵文字」がポイントですね。

ただ言葉のセンスも重要です。SNSなので空メールで本人確認などを行いますが普通なら「空メールを送信してください」とするところをStyleWalkerでは

今スグ遊ぶsign03カラメを送信heart01

これは絶句です。F1層って手強いですね。

[参考]
ライブドアディレクターブログに絵文字の使い方がありました。
>>モバイルサイトにおける魅せ方[絵文字編] - livedoor ディレクター Blog

40,000曲の歌詞が無料で見放題!

この何でもない文章が絵文字と文字色を追加するだけで

4万曲punch歌詞kissmarkfree見放題sign03

このようになります。この変換作業は疲れるけど文章に「華」が出来ますね。

| | コメント (0)

2008年3月12日 (水)

外部携帯サイトからミクシィ(mixi)にリンクを貼る

外部携帯サイト(モバイルサイト)から普通にAタグリンクでジャンプさせても個人のトップに表示されていた問題がようやく分かりました。

<a href="http://m.mixi.jp/view_community.pl?id=(コミュID番号)">[mixi]コミュニティ名</a>

メンドクサイ。。

| | コメント (1)

2008年3月 5日 (水)

画面メモを意識したタイトル

携帯サイトを作成するときは「タイトル」には注意したほうがいいですね。
>>画面メモを意識した

「ページの内容を端的に示したページタイトルをつけること」は、PCでも携帯でも必要なことです。ただ、携帯は、情報の一覧性や機器の操作性がPCよりも劣るため、画面メモ(=ページタイトル)から、ページ内容がすぐに思い出せることの重要性が高くなるのです。

もちろん「お気に入りのページ」に登録するときなども考慮して置いたほうが良いです。

| | コメント (0)