Web文章上達ハンドブックを読む

職人芸としての携帯サイト制作 ケータイサイトの制作・運営でつまずく65のポイントとその解決策
一般論。まんべんなく網羅されています。総花的です。

伝わるWeb文章デザイン100の鉄則
webの特性に合わせた文章作法。
伝わるように短く、簡潔にしましょう。

Web文章上達ハンドブック―良いテキストを書くための30ヵ条
取り寄せ中
届きました。
日本エディターズスクールの本です。
プロのライターや現場向けです。
原稿料が出るサイトの作り方です。

文章に付いての本なのでhtmlタグの説明はありません。

  • ライターに発注した文章をどう手直しすればいいのか。
  • だれにどうやって発注すれば良いのか。
  • 構成と管理を誰が行いどう対処すべきか。

実務的な内容です。
個人サイトに不足しがちな要素を意識しながら読みました。
推敲やワークフローについてアイディアが詰まってます。
ハンドブックなので読みやすく、手元に置いて時々見直そうと思います。

続きを読む →

携帯用サイトとパソコン用サイトの違い

ちょっとだけ「php」を触ってます。

表示はされるのですがテストサーバーではエラー。
どこかコードをしくじるとエラー。
小さいことでもエラー。

小姑

プログラムは無理っす。
JavaScriptとかjQueryぐらいの設置すれば動くものが上限。

webのページを増やす際、ワードプレスなら携帯サイト用の表示が自動です。
同様に普通のwebページも携帯用の表示にしたいのです。

ここでphpの出番。

  • ユーザーエージェントで振り分ける
  • htaccessで振り分けるなど

幾つか方法があります。

phpを使って機種毎に飛ばすなら携帯用とパソコン用にページを作らねばならず面倒。
一枚でどうにかするには・・・・・どうしよう。
ワードプレスはエントリー分の、日記のテキストを共有し枠だけ変えてるみたい。

だから、携帯はこちらの枠を使って・・・・・なんて仕組みが理想です。
ただ、調べれば調べるほどやっかい。

ワードプレスにはこちらの便利なプラグインを入れてます。
WordPress Plugins/JSeries » Ktai Style (携帯対応プラグイン)
すごく便利。

静的なHTMLならサーバーサイドインクルードで共有部分を外部ファイルに移動。
携帯用の広告はdisplay:noneで消してしまうのが簡単か。

【違うから】
携帯とパソコン用は文章の読み方が違う。
だから各段階で文章を書き分けなければいけない。

ふだんは携帯電話での表示は自分がしないから考慮に入れていない。
携帯電話ユーザー用の作文を意識せねば。

うむ、結局分けるしかないのか。

作文も、携帯ならtwitterの120文字程度でも辛いだろう。
やっぱり違うものには違う対応をしないとダメか。

これは「効く!」Web文章作成&編集術逆引きハンドブック
ライティングに言及した数少ない一冊。
文章命、写真一枚で勝負が決まるのがwebの世界です。
この部分がボンヤリしたままのショップとかサイトをよく見かけます。
(オレのサイトか?)

携帯画像の作り方

【パソコンを使え】
携帯の画像はどうやって変換するのか聞かれたので、画像処理ソフトで「バッジ処理」でもすればと伝えました。さにあらず、聞いてきた人は「デジカメで撮ったデータを携帯で処理したい」と。

しかも「デジタル一眼」の最大画素数。
うちの軟弱パソコンでは危うくハングアップですよ。

もう最初から携帯電話に付いているカメラで撮影すればよろしい。
そのためにカメラが付いているんだ。

イメぴた
画像変換が出来るようです。

画像変換サービス – オレンジスタジオ
パソコン用。

続きを読む →

携帯サイトとパソコンのサイト

【今回のお題】
携帯サイトとパソコン用のサイトを一枚のページとして書き込みたい。

【phpの利用】
PEARモジュールを利用して作る。
PEAR::Net_UserAgent_Mobile 3G対応携帯判別(ケータイ判別) – PHP::PEAR – dozo PukiWiki
phpを拡張子.htmlで動かす:WEB備忘録(うぇぶびぼうろく)

【スタイルシート】
読み込む順番を変えると、分離できるのではないか。
そう思ったが甘かった。
スタイルシートは一番最後の?スタイルを上書きする性質があるので、どういうワケか「これだ!」と思いました。ためした結果、携帯用に書いたインラインのスタイルが一番最後に上書きされるため、外部ファイルのスタイルを優先できず何の意味もなし。

携帯用CSSを書く上で押さえておくべきポイント – TRANS [hatena]

【javascript】
文字サイズは切り替えられますが、ボタンが手動です。
読みにくい携帯用の文字サイズからパソコン用に切り替えていただくためのスクリプト。
パソコン用に使うなら便利そうです。
携帯からみると表示もされない余分なコードが邪魔ですね。
JavaScriptを使ったCSSの切り替え
styleswitcher.jsでスタイルシート切り替え – @inつくば – つくばで働くデザイナーが日々徒然、気の向く侭に綴るブログ。

【Cake php】
このレベルまでたどり着けません。
CakePHPで携帯サイトを作る – HTML出力振り分け(1) « trekdevel

【もう、CMSだろう】
MTにモバイル用のスキンを掛けた方が簡単じゃないか。
MOONGIFT: » 必見!怖くなるくらい優秀なCMS「concrete5」:オープンソースを毎日紹介
CMSではテンプレートを使わずDreamweaverで更新という選択/コニカミノルタ+TeamSite | Web担当者Forum

だいたいこの辺の結論をいつもぐるぐるまわってサイトを作る労力を失います。

PEAR::Net_UserAgent_Mobile 3G対応携帯判別(ケータイ判別) [dozo dokuwiki.php]
PHPによるWebアプリケーションスーパーサンプル 活用編(AD)

半日悩んで、夜風呂に入るときにパソコンと携帯を同じページにしてスタイルシートで見栄えだけを変える作戦を思いつきました。

「PEAR::Net_UserAgent_Mobile」で判別して、携帯用なら携帯用、パソコンならパソコン用のヘッダを読み込んでその中にスタイルシートを書き込めば自動判別だよ!と息巻いたのですが、牛乳を飲んだ時点で冷静になってやっぱりどうかなと思いました。

エラーが出るんですよね。サーバーが華奢だし。phpが自由に使いこなせればできそうですが、サーバーの乗り換えが面倒です。

【賢い主婦になったつもりで】
新しく技術を仕込んで作ると良さそうに見えます。

案外古くさい人間なので新しいものを避ける嫌いがあります。

いまあるもので必要十分なものを、少ない材料と道具で作る」といういささか貧乏くさい好みがあります。

だから、いまある静的htmlとスタイルだけで作ろうと思います。

phpでエラーを出すのも面白くないし。

なかなか「できあがらない究極のカレー」を夢見るよりも、「夕食時にちゃんとできてるハウスバーモンドカレー」が食べたいですね。きちんと出汁から作ればおいしくなります。

サイト作りがうまくいかないのは料理ができないのと一緒なのかもしれません。お裁縫とかセーター編みに近いのかもね。

(AD)

キャリアの悪口

【携帯キャリアはいろいろあるよ】
目が覚めたら、パソコンテーブルに「某キャリアのバカ」と名指しの悪口が書いてありました。

「某キャリア」のいつもの独自仕様に、寝る前の私はウンザリしたのでしょう。
覚えてませんが眠くて頭に来たようです。

ダメな殿様キャリアのご機嫌を取る趣味はございませんので、あの藩は無視することにいたしました(喜)

根っこはマジメな性格なので、どんな場合でもきちんと動かそうと試みるのですが、それで作業が全部止まることが多々あります。これから私が作るサイトで、文字が白くて背景に色が付かなくて字が読めない人は、キャリアを乗り換えるかフルブラウザで見ていただくことにします。そしてわたしは安眠。

3G以前の携帯とか知らないから。

【キャリアの違い】
DoCoMo向けにCSS指定をインラインに埋め込むPHPライブラリ「toInlineCSSDoCoMo」作りました : アシアルブログ
DoCoMoのCSSとXHTMLまとめ | 村式開墾日記
携帯3キャリアの違い
携帯サイト コーディング&デザイン
(AD)

【アクセス解析】
WordPress の携帯版に Google Analytics を設置してみる【SELENE.GA4K】:トイレのうず/ぼやき
グーグルアナリスティックス(Google Analytics)のAPIを利用した解析ソース。
Googleの順位決定にGoogle Analyticsのデータが使われていたことが判明! | Web担当者Forum
これ重要。

無料モバイルサイト解析ツール|myRTモバイル
モバイル用の解析。キーワード対応。「うごくひと」とちがって、広告非表示。

無料 携帯アクセス解析「うごくひと」
モバイルキーワード対応の先駆け。