その後も、ちょこちょこ改修を行ってます。
]]> 1.wikiをやめた ぼちぼちphp、mysqlを覚えてきたので、pukiwikiをやめ、オリジナルのテンプレートを作ることにしました。カテゴリトップは1月に作り終わったので、主に作品、人物ページのテンプレート作成です。
その理想の形を実現する為、htaccessと長い闘いが始まります。
デバイス毎の振り分けは、主に以下の2つの方法があります。
色々悩んでDRACOでは2番を選択しました。実装方法としてはやはりhtaccessを使います。
phpはそれなりだったんですが、htaccessはとってもやっかいでした。
今も上手くいっているとは言い難いです。
次回はその当たりを書きたいと思います。
では。
]]>元マークアップエンジニアの現在webディレクターです。
pukiwikiはインストールも簡単。
プログラムを知らなくてもちょっとしたカスタマイズはできるので、サイト立ち上げの時は便利でした。
立ち上げた当時の自分はJavaScriptもほとんど書けず、htmlとcssの知識で、どうにかwikiっぽくないサイト作った程度でした。
これが4年前。
それから細々とJavaScriptでできる範囲で機能拡張（俳優の画像自動表示とか、rssを読み込むとか）。
2010年春ぐらいで、当時やれることは全てやりきってました。
なので、次になに作ればいいかも定まって無く、それを決めるために企画から立てることにしました。
そもそも自分のサイトがデータベースサイトなのか、コミュニティサイトなのかも定まっていなかったので、 そのあたりのコンセプトを詰めます。
会社の業務でも企画の手伝いはするのですが、一からする経験はありませんでした。
とにかく過去の企画を見まくりました。
流れとしては
調査・分析→戦略立案→課題出しと解決作
です。
市場調査や、競合調査をして、どんなサイトがユーザーに受けるかを考えました。
そしてサイトの「あるべき姿」を見つけます。
そのあるべき姿と現状とのギャップが課題として浮き上がってきます。
その課題の解決作を設計書に落とし込み、サイトに実装していきます（設計の話は長くなるので割愛）。
この時点（2010年8月くらい）で作りたいものは決まっても、スキルが追いついてません。
開発言語はpukiwikiがPHPだったので、PHPがいいのかなーと思ってました。
一番開発者が多いとも聞いていたからです。
それから何冊かPHPの本を買ったのですが、全て挫折。
そして出会ったのが「よくわかるPHPの教科書」（たにぐち まこと著）。
初心者向けに書いてあるので、私には非常に分かりやすかったです。
ようやくhtmlとプログラムの関係が分かってきました。
この本のお陰で、思い描いていた機能が実装できそうだと思えてきました。
10月頃はこの本を元に、ブラウザに文字列を表示したり、フォームからデータをプログラムに渡したり、 ページに沿って基礎的なプログラムばかり書いてました。
そして恥ずかしながらgetとpostについて初めてしっかりと学びました。
これでフォームに入力した内容をサイトに反映できるようになりました。
具体的にいうと、検索結果表示とか、絞り込み検索とかの仕組みが分かってきました。
phpと同時にデータベース（mysqlです。以下、DB）についても解説がありました。
DBを使えば色々なデータを簡単に扱えることが分かりました。
いままでよく分からなかったDB、webのサービスにはほぼ必須なDB。
「これってエクセルやん！」というのが自分の中の答え。
それも素晴らしく検索性とデータの連係が得意なエクセル。
そう思えたのもphpMyAdminというGUIツールがあったため。
これがめっちゃ便利。
さくらサーバには標準でphpMyAdminがインストールされているので簡単にDBを扱えました。
まずはDBにデータをいれてみようと海外ドラマのデータをエクセルにまとめます。
この際、便利だったのが「http://www.lancers.jp/」。
デザインとか色々な仕事を依頼できるサービスです。
12月にたまたま、タスク方式というサービスが始まりました。
これはデータ集めや、テキスト入力など単純な作業を依頼できるサービスです。
これで400件くらいの海外ドラマのデータを収集して頂きました（収集元は英語Wikipedia）。
phpMyAdminにはCSV（カンマ区切りのテキストデータ）をインポートする機能があり、400件も一気に登録できました。
ちなみにCSVはエクセルから作れます。
このデータをサイトに表示させる過程で学んだのが配列と繰り返し処理。
なんどもDBからデータを取り出すには必要不可欠なプログラムです。
JavaScriptを学んでいるときも配列と繰り返し処理は知っていました。
が、DBを扱ってようやくその真価を知った気がします。
次はテキストだけだと味気ないので、画像データを取得したいと思いました。
世の中にはAPIといってyahoo、googleやamazonなどのデータを引っ張ってこれ便利なサービスがあるのは知ってました。
このAPI、知れば知るほどステキです。
ルールに従い、簡単なURLを作って、アドレスバーに打ち込めばXMLやらJSONというファイルを表示してくれます。
そしてPHPはこのXMLの扱いが超簡単。
JavaScriptでもXMLは扱えるのですが、PHPの方が遥かに簡単にXMLをパースできます。
パースと言う言葉もここで覚えました。構造解析といったような意味。
画像はamazonから取得することにしました。
amazonのapiの解説書はとってもわかりずらいので「amazon api 使い方」などで検索。
「http://www.ajaxtower.jp/ecs/」が参考になりました。
ちなみに、個人的に分かりやすかったAPIは「yahoo」と「楽天」です。
実例交えた解説があり、ひとまずデータを取ってくるまでは簡単にできます。
APIを知れば、手間暇かけて、自分でデータを探さずとも、情報量のあるサイトがぱっと作れます。
「http://ma5.mashupaward.jp/」などにapi一覧がまとまっているので、ここから何ができるかアイデアを練るのもありかもしれません。
そして作ったサイトが「海外ドラマ検索サイト」です。
【海外ドラマJP DRACO】
http://www.kaigaidrama.jp/
一番時間がかかったのが「条件から探す」機能。
http://www.kaigaidrama.jp/search/
件数表示から、ページングまでいろいろな実装が必要で苦労しました。
その割に地味ですがw
その他の「50音一覧」「おすすめ・特集」ページも全てphpで作ってます。
11月頃から初めて、ようやくこの1月に公開。
ここまでたどり着けたのも、自分が好きな海外ドラマのサイトだったからです。
やはり好きなものにつぎ込む情熱は別格です。
次の課題はどうやってサイトをPRしていくかw
]]>業務で使っていたテンプレートをブラッシュアップして汎用化したものです。
今後は大規模サイトを何度も構築してきたノウハウも合わせて公開していく予定です。
画面左のメニューにカスタムレポートがあります。そこをクリックすると、「カスタムレポートを管理」というリンクがでてきます。
カスタムレポート管理画面になるので、右上の「カスタムレポートを新規作成」をクリックします。
下のキャプチャの画面になります。左にメニューが出てくるので、ここから「指標」と「ディメンション」を選びます。
「指標」は「利用状況」の中の「セクション」を、「ディメンション」は「システム」の中の「ドメイン」を選びます。
画面中央の点線にドラッグ＆ドロップします。尚、「指標」は「セクション」以外も「ページビュー」など好きなものが選べます。
「レポートを保存」ボタンをクリックすると完了です。
Twitter-APIを使ってみました
jsonpでtwitterAPI利用メモ【jQuery】
<div id="twttierInner">
<p class="loading">読み込み中......</p>
<!-- /twttierInner --></div>
<script type="text/javascript">
$(function() {
searchTwitter("検索キーワード");
});
</script>
<script src="/common/js/jquery.twittersearch.js"></script>
function searchTwitter(query){
$.ajax({
url: "http://search.twitter.com/search.json",
data: {
q: query,
rpp: 30
},
dataType: "jsonp",
success: function(data){
$("#twttierInner").empty();
$.each(data.results, function(i,item){
var profile_image_url = item.profile_image_url;
var created_at = item.created_at;
var from_user = item.from_user;
var to_user_id = item.to_user_id;
var text = item.text;
var id = item.id;
var from_user_id = item.from_user_id;
var geo = item.geo;
var source = item.source;
var created_at = created_at.slice(0, 25);
var html = '<div class="article">'
+'<p class="pic"><a href="http://twitter.com/'+ from_user +'"><img src="'+profile_image_url+'" alt="'+from_user+'" width="48" height="48"></a></p>'
+'<p class="text"><a href="http://twitter.com/'+ from_user +'" class="userId">' + from_user +'</a>'+ text + '</p>'
+'<p class="time">'+created_at+'</p>'
+'</div>';
$("#twttierInner").append(html);
});
}
});
}
で、宣伝。
うちの会社で「webサイト高速化」サービス始めることになりました。
Webサイト高速化 | プロダクト・ソリューション | サービス・ソリューション | インテリジェントネット株式会社
]]> ADSLや光回線などの高速回線が普及し、Webサイトの表示に長時間待たされることは少なくなりました。しかし、各種の調査や研究の結果、わずかな表示速度の差であってもユーザーの行動にはそれが現れてくることが指摘されています。表示速度の改善は、ユーザーの満足度やアクセス数の向上につながります。ご興味のある方は一読くださいませ。
]]>詳しい比較は上記をご覧下さい。
ちなみに私は、Topsyを選びました。
ツイート数を押した後の画面が見やすいのが決め手でした。
さらにTopsyではAPIが公開されているので、いろいろできそう。
次は下記を試してみよう。
jQueryとTopsy APIを使ってそのページを言及したツイートを表示するスクリプトを作った
Topsy API を使ってブログに「つぶやかれ数」を自由にレイアウトする
参考になりそうな記事を紹介。
http://journal.mycom.co.jp/news/2009/07/03/041/?rt=na
]]> これで本命はHTML5に絞られました。アップルのSafari4ページがHTML5でできていたり、Google、モジラなんかもHTML5に言及してます。
ここで沈黙しているのがマイクロソフト社。この流れには逆らえなさそうです。
ディレクトリ内の画像ファイルを探し出して、ulではき出すようなプログラムを作っておく。
画像と画像のパスを並べて出力。
そうすれば、どんな画像があるかが一目瞭然。デスクトップ上で見るよりもわかりよい？？
common内の共通画像だけでもいいかもしれない。
と書きつつ、根本的な解決にはなってないなー。
うーん。
document.write('<script type="text/javascript" src="common/js/jquery.js"></script>');
document.write('<script type="text/javascript" src="common/js/master.js"></script>');
知ってしまえば非常に簡単。
今まであまり見あたらなかったのは、何かリスクがあるからでしょうか？
実装してみて今のところ、不具合は起きてないです。
追記。
関数・定数が引き継げないっぽいですね。
<ul class="links">
<li class="external"><a href="http://www.hoge.com">hoge com</a></li>
<li class="pdf"><a href="/hoge.pdf">hoge（256KB）</a></li>
</ul>
となります。