by ciccioetneo :: ON & OFF
既存のサイトをスマートフォン対応にしようと思ったときに、どうしよう。基本的にjQueryとCSSで対応できそうなので、それで対応した。あとは、そこへテンプレートタグを埋めこんで、きちんと動くようにする。
まず、JSをつかってスマートフォンのUAを取得、それと一致するようならそれようのCSSを出力。また、URLを変えたい場合はそのURL先を提示、移動を促す。その場合には双方向で行き来しやすくなると良いと思う。
URL変えたくない場合は、CSSで visiblity:hidden;と display:none:でいらない要素を徹底的に消していって、表示したいやつをうまく整形する。
スマートフォンっぽい見た目にするのに手軽なのが、iUiというライブラリ。画像とかも入ってて、ドキュメントも充実してるようだ。デモはここから。
ちなみに、このライブラリを使っているのは、日本語版LifehackerやGizmodoなどをはじめとするメディアジーンのメディアに見られる。これらはもともとGawker Mediaのブログネットワークのひとつ。オンラインメディアが事業としては地道にこつこつと積み上げていかなければいけないものであるとファウンダーも言っているけど、そうならざるを得ない理由として、誰でも新規参入ができるという点があるだろうと思う。そして、収入が既存のメディアよりも多く無いから事業が大きくなりにくい。特に新規にはじめる場合。
あ、話を戻すけどゴーカーの一部のメディアは新規テンプレートに移行したけど、あのテンプレート、個人的には微妙だと思うよ。だって、他のサイトとナビゲーションが全く違うから。しばらく使っているうちにこのテンプレートが意外と使いやすいかも、とか、過去のポストまでのナビゲーションを必要以上に用意する必要はないのか、とかに気がつくからなんとも言えない。今後スタンダードになるならばアリだな。
コミュニケーションの機能をより強く押して、ポータルサイトとかをあくまで導線に。面白い話をするならゴーカーのサイト内だよな。ってことを目指してるのかな。
なんか、愚痴ったけど以下、今回見たサイト。いい加減デザインや技術関連の本とかほしいね。
・iPhoneの向きによって画像の大きさを自動的に変えるスクリプト – blog.remora.cx
・iPhone用サイトで、画像を縦横ともに画面幅いっぱいにリサイズさせる //iPhone – bute_lab.
・iPhone用にCSS/PHP/JavascriptでCSSを切り替える基本的な方法｜linker journal｜linker
・風俗系スマートフォン向けサイトの作り方 | LonelyComet | 風俗系のデザイン指南サイト
・スマートフォンコーディングTips : HTMLコーディングのノウハウ ： HTML/XHTML、CSSコーディング最安保障～クロノドライブ～
例えば筑波大学に入学したものの満足の行くような講義に出会えていないという場合、その興味をiTunes内の他大学の公開講義に目を向けてみても良いかもしれない。筑波大学はご存知の通り大学が集まる都心からは離れており、そのため気軽に他大学の講義に潜り込むという良くある知の探検ができない。そんな時に有効な選択肢に成りうる。
講義を公開している日本の大学として以下が挙げられる。
・東京大学
・慶応大学（湘南藤沢キャンパス）
・明治大学
・早稲田大学
海外の大学の授業も広く公開されており、自分の興味にマッチする講義に出会えることだろう。もちろんダウンロードができるので、ひと通りまとめてダウンロードしてから選別するという方法をとったほうが探しやすいかもしれない。というのも、iTunes上ではコンテンツにアクセスする時間がそれぞれかかるし、シークもできないからだ。
iTunesだけでなく、大学によっては自前で講義を配信するサービスを提供しているところもある。この講義つまんねー。という状況で寝るのも選択肢のひとつではあるけど、どうせパソコンが使えるのならば他の講義を聞いてみてもいいかもしれない。
ちなみに、筑波大学の月曜2限総合科目のテクニカルライティングはつまらないし、あまり役に立たない。単位ロンダリングの為にあるみたいなものだ。
by Alain Bachellier
Google Appsは独自ドメインをGmailインターフェイスで利用できる非常に便利なウェブサービス。以前は公式サイトに有料プラント無料プランが用意されていた。
しかし、今日久々にアカウントを新規作成しに行ったところ、そのリンクは見当たらず、年間1ユーザー当たり6000円のプランしか用意されていなかった。しかし、ダイレクトリンクは生きている。
ここから直接以前の「スタンダードプラン」に登録できる
リンクを削除したのは意図的なものだろう。有料版の利用をススめているとしか思えない。ちなみに、無料版を使いはじめて気がついたが、無料で使えるユーザー数が50に減っていた。以前登録したときは200だった。
UPDATE:リンクが見つかった。Google Appsのスタートページがビジネス向けのページであった。右サイドバー中ほどのGoogle Appsをクリックして、右サイドバー上部のボタンから登録ができる。実に分かりにくいインターフェイス。あるということを知らなければ、有料版に登録しそうな勢いだ。
以前名刺を作ったと書いたがそれの発注を名刺21という会社にお願いした。正直、適当に作った名刺なので、もうちょっとクオリティが上がったら、良い紙を使ってみようと思う。
で、名刺をつくるときにいろいろとデザインを参考にしたんだけど、その過程において、Photoshopのチュートリアルを見て、自分でも何か書いて見ようという気になった。秋休みもあるので、デザインカンプをこれで作って見よう。自分のポートフォリオを一応(本当に一応)公開したけど、いまいちなので画像ホイホイでキレイにしよう。
最近ニュースサイトやってますが、集客に悩み中。いろいろとためしてみるつもりだけど、果してどうなるか。。。年内終了は避けたい限り。
もう誰にも「ごめんなさい、名刺きれちゃってるんです」ということがないように（高校時代に作った名刺を配り終えた）、新しい名刺を作った。あえて増刷ということはせず、新しいモノにした。
作成には、友人3人くらいを呼び、「名刺を作るかい？（会）」なるものを開き、それぞれが名刺を作った。みんなで一つの名刺を作る訳ではないので、作業はそれぞれの問題だけど、数人集まる事でやる気もわくし、わからない作業とかあれば聞けるので良かったと思う。3時くらいから6時くらいまでイラレをいじって完成。そのうちだんだんなれると思われる。
これから印刷に出すから、出来上がったら配ろうとおもう。
MacBookProの13インチを大学のMOC（マックおんキャンパス）というシステムを利用して割安で購入した。13万円くらいだったか。
MACに触れるのは人生初のことなので、操作になれる必要があると感じているが、購入後の満足感は非常によい。
とりあえず、Firefoxを入れて、Xcodeをインストールディスクから追加で入れ、AdobeCS5の製品群のうち、作業に必要になったInDesignとDreamWeaverをとりあえず入れた。その他ちょいちょい追加している、1日目に入れたソフトは以下の通り。
・Firefox
・Thunerbird
・Picasa
・Xcode
・Keynote
・Cyberduck
・InDesiign
・DreamWeaver
この後は、Evernoteとかブックマーク同期のツールとかをちょいちょい入れていって、使いやすくしていきたい。外付けHDD
にTimeMachineの設定もしておきたいかも。
しばらくは、作業環境を作りつつ、その過程も楽しめそうな気がする。
請け負っているウェブデザインの作業と雑誌のライティングの作業が完全にバッティングしてしまったので、デザインのほうで友人に助けてもらった。リソースを分けていただいたことに感謝している。
ただ、まだ完了しておらず、ディテール部分をつめているところ、更新するコンテンツを継続的に増やしつつの作業となっているが目処がたってきた。WPのテーマの知識を蓄積できた良い経験だった。
これから学園祭。楽しみだ。
去年の冬、HTMLとCSSを勉強がてら、某ニュースサイトをMT4.2で制作したが、（MT4テンプレート作りに早速実践投入してみた）、今度は特設ページを作りたいのでMT3で作ってくださいと言われ、レビューサイトを制作することになった。本当は最新版がよかったんだけどな…
MT4以下でレビューサイトならプラグイン必須
MT4以降にはカスタムフィールドが追加されていて、テンプレートに組み込むのが容易となっている。その為、商品記事として商品説明分を書いて、カスタムフィールドに価格や店情報や画像などを付与してやれば、テンプレートにそったレビューページを創成してくれるのだ。しかしながら、MT3にはそれがない。その為、RightFieldsというプラグインを利用する必要があった。
HTMLとCSSを書く
例によって適当に書いてみたHTMLとCSSをFirebugさんのようなもので調整。やはり直感的に作れるのはうれしい。数値を変更するとリアルタイムに反映されるのはとても気持ちがよいモノだ。今回Google Chtome付属のデベロッパーツールを利用した。こいつは結構使える。
MTタグ入れて完成
タイトルだけで終わりなんだけど、結構面倒くさい。大きなサイトでカテゴリごとに条件分岐させて、表示するべきページ内容を変えなければいけなかったからだ。今あるサイトに新たに特設サイトをつける形だったので、新規に作るより面倒だった。
苦労したこと
Google ChromeにCSSのキャッシュが残ってしまっていて、CSSの内容を更新したはずなのにページが変わらないという状況が発生していたことが判明するのに気がつくのに非常に時間がかかってしまった。いやぁ焦ったね。CSSも条件分岐させてたりしたいるので、ここの記述を間違えていると思い込んでいた。
今後の課題
もっと早く作れるようになること。MT5も勉強する。
ウェブ媒体を新規に立ち上げようと思っても、なかなか立ち上げ後、軌道に乗らないと思う。
というのも、アクセス数を稼ぐサイト資産を持っていない場合は、そこからの流入が見込めないからだ。同時に被リンクが獲得できないということはSEO的にも不利だ。
なので、純粋に良質コンテンツを作っていたとしても、そのコンテンツが認知されるまでに非常に多くの時間がかかってしまうというのは言わずもがな。
良質なコンテンツを沢山投稿するというのは非常にランニングコストがかかる作業であるが、立ち上げ後しばらくは元が取れない。
サイト資産を持っておらず、ランニングコストがかかるという2点において、新規立ち上げは難しいのだ。
PCデポをぶらぶらしていたら、名刺用紙みたいなものが売られていたので買ってみた。
前々から名刺は欲しいと思っていたけども、なかなか着手出来てなかったので、これを機に…と思い。
Elocom MT-JMN1WNというもの。他にも和紙風とか色つきとか様々な用紙があったけど、初めはデフォルトだろと思い。もっともベーシックはものを選択。
A4サイズで、公式のらくちんプリントというソフトを使って印刷するとぴったり印刷できた。
元画像を用意しなくてはいけないのだが、こういったphotoshop用のモデルがすでにアルので、それを元に作ったとさ。
基本は白ベースに黒の文字だったんだけど、葉っぱ模様をつけてアレンジ。
制作時間は1時間ほどで、印刷後のマイクロミシンを切り離す作業まで出来た。
非常にお手軽で、社会人でもない僕程度のレベルの人間は自作してもいいかなと思いました。
120枚刷れるらしいが、今回は40枚刷った。刷ってみて気がついたが、こんなに配ることはあるのだろうか…
早速実践投入してみた。自分用作業メモ。
今回は新しいものを実際に使ってみて、どれほど実用に耐えるレベルになるか。ということを目標に、MT（MovableType4.2）のテンプレートを作ることに。
某社からできますかといわれ、できますと言い、自分を追い込んで勉強。
作業はラフデザインからテンプレートにするという流れ。
まずは適当につくってみる
HTMLとCSSをFirefoxのアドオンであるFireBugさんを使ってどうやって適当に企業サイトを見ながら組めばいいのかということをなんとなく理解。
そのままの流れで、Adobe DreamWeaverの体験版（30日間使える。学習には十分。）を使ってHTMLを書いてみた。どこかでこまめにdivタグで囲うとよいということを知っていたので、その記憶に従いヘッダーやボディーフッター、サイドバーと大きく分けた。そして、その後CSSを当てていく方法が効率がよいことがわかった。
ぶっちゃけHTMLタグとか全部理解してないけど、使うのはpとかhとか数種類でスタイルは全部CSSに投げてしまうのですぐ形にはなった。
これをMTテンプレートの各種部分に入れていき（存在しないものはモジュールテンプレートを使ってほしい場所にインクルードする）作った。
Firebugさんに頼る
この段階で記事を投稿してももちろん画面には出てこない。というのも、MTタグを使ってエントリボディなどを読み込ませてないからだ。まぁ適当にデフォルトテンプレートにあったMTタグをそれっぽく配置してすぐに対応できた。
MTでインデックスを再構築すると、テーマが適応される。
ここで、Firebugさんの出番。要素をライブで編集して確認できるので、それを元にスタイルシートに追加していく。この作業を繰り返すこと数時間。だんだんとHTMLタグとの兼ね合いやDIVでどこをくくるべきなのかがわかり、ちょっと達観できる。
これで、一応完成。
その後MTタグ埋め込み
MTタグのだいたいの理解をしようと試みる。
本文初めから何文字表示させたいか。というときに使えるタグなどを探してきて、モディファイアを色々と試してみると、これまたやはりHTML同様に対して多くの種類は存在しないことに気がつく。lastn=”n”やcategory=”NOT name” words=”n”などそこら辺しか使わない。
プラグイン導入で使えるタグが増えたりするので、こちらを使って関連記事を表示させるようにもしてみた。
JavaScript登場
略してジャバスクですある。スクミｚ…
こいつを使って、特定カテゴリの記事の画像を、ぐるぐる回転させるAmazonのウィジェットっぽいものを取り入れることになった。ここで使うのがJavaScriptだった。
一応jQueryなる超便利なライブラリをグーグルのホスティングの元、読み込むことで、たいしたことしないでも動く様になったけど、理解してやったかといわれるとキツイ。
さらにこいつは、HTMLやCSSの時のようにFirebugさんがライブで使えないので、困った。
このジャバスクはこれから勉強していく予定だ。
苦労したこと
全部はじめて使うものばかりだから、初めは何から手をつけていいのかわからなかった。特にHTMLとCSSは両者が相関関係にあるような気がして、とても複雑に見えた。
CSSにおいて、IEの解釈がやばい。Firefoxを使って作っていたのだけどもIEではとんでもないところにサイドバーが行っていたりすることはざらだった。
俗にCSSハックといわれる先人の知恵がアーカイブされているようだが、短期間でここまで学べる気はしなかった。（最終的にはIEでも表示できるようになってきたが）
MTタグがバージョンによって使えたりそうでなかったりするようだ。MT5でテーマを作った後、MT4に移行したらcategoriesタグをcategoryタグにしないと再構築エラーが出てしまった（ように思う）。
ここで数時間悩み、原因発見に相当労力を割いた。
今後の課題
・CSSでバックグラウンドイメージを指定してグラデーションの効いたちょっと高級なデザインにする
・画像をスライスしてそれをCSSに入れていく（？ というイメージ）手法を学ぶ
・ジャバスクを勉強する
・ページの軽量化、高速化