TAAKO.COM 開発日誌
たあこの技術的なメモやTAAKO.COM製作裏話をまとめてあります。あくまで独り言ですので、文章の信頼性(特に技術的な情報)はゼロと言っても良いでしょう。何か検索キーワードにひっかかって来てしまった人ごめんなさい。でも間違ってたときのツッコミは欲しかったりします(^^;今タコGUI
誰だったかに、今タコはTwitterのはしりだね、というお褒めの言葉を頂きました。ありがとうございます。何年も前から「手軽に今のワタシを配信」という発想に基づきサービスを提供しておりました。違いとしては私しか書き込めないことと、ほんとに「今」の状況しか読むことが出来ないて点があげられます。
せっかくなので今タコについて語っておきましょう。実は今タコの真骨頂はその入力GUIにあるのです。WindowsOSと携帯から入力が可能ですが、Windowsでは図１のような入力画面を提供しております。
超軽量で仕事の邪魔にもならない。メモ帳としても使えます。
作り方はいたって簡単。まず次のような入力用HTMLを用意して、サーバにリリースします。
<head><title>imatako</title></head>
<body style="overflow:hidden;">
<form action="imatako_edit" METHOD="POST">
<input name="note" style="font-size:12px;position:absolute;left:-2px;top:-2px;width:200%;height:200%;">
</form>
</body>
</html>
次にデスクトップで次の操作を行います。
・タスクバーを右クリック、「ツールバー」→「新規ツール バー」を選択。
・「フォルダ」に上記HTMLのURLを記載し「OK」をクリック。
・作成したツールバーを右クリック、「タイトルの表示」のチェックを外して、タイトルを表示させなくする。
以上。
ツールバーにブラウザを表示できるなど私は知らなかったので、それはそれはうれしかったのでございます。
NHK時計
(2006.10.20)
HTML4.0 Strictの葛藤
HTMLは文書をマークアップするものである。という思想のもとHTML4.0 Strictにこだわる努力をしてきた。が、今回右メニューを設けることによってStaticコンテンツからも動的メニューを呼び出すべくIframeを使用することになった。つまりStrictの仕様にないタグを使うことになった。
これは以下の葛藤による苦肉の策である。
- たあこのHTMLについての解釈は次のルールに行き着いている。
- 「テーマ(titleタグだったりH1だったり)」に関係のない内容はそのドキュメント1ファイルには含まれるべきではない。
- Strictに表現することで、情報が整理されSEOの評価を受けることにも繋がった。
- SEO効果によってサイトに訪れる人はほとんどトップページから訪れる人ではなくなった。
- その結果、トップページに集約されている「筆者が本当は見て欲しい最新の記事」は確認されていないことが判明。
- やはりすべてのページに最新の記事への導線が欲しい。
- だがしかし、最新のメニューはやはりそのページのドキュメントにとっては関係のない情報であることが多い。
- であれば、最新のメニューは、そのドキュメントから切り離そう。
- そもそも最新のメニューは動的ファイルなのでスタティックコンテンツからは呼び出せない。
- そして実現方法としてIFRAMEが選ばれた。
- HTML4.0 Strictじゃない。
- がっかり
現在の実装環境
現在使用しているtaako.comの実装環境は以下のとおり。
- ミドルウェア
- Apache Tomcat 5.x
- Postgres 8.x
- 言語、フレームワーク
- HTML4.0 strict(のポリシーで・・極力・・) , css2
- Java
- Struts Framework,Spring Framework, ..and more.
- Flash6
- Java
- 開発環境
- maven , cvs , eclipse3.x
(2006.3.1)
SEO、SEM調査
そんなこんなで最近何かと話題のSEO、SEMについて色々調査。 昨今いっぱい出てる関連本も２冊ほど手にして読んでみたりもした。 もはや狂信的にアクセスアップだー、アクセスアップだー、googleだー、overtureだーと えんえん同じことを綴られてる本をずーっと読んでたらなんだか笑けてきた。 strictHTMLの布教価値としてこの「SEO」と「アクセシビリティ」という テーマがあるわけだが、アクセシビリティについては意義が感じられてやってて楽しいけど、 SEO探求はなんだかさもしくてアホくさい。 とはいうものサイト製作の提案段階であがっていたであろう 「訴えたいものはなんだろう」「来て欲しいユーザは誰だろう」等の大事な要素を 改めて見つめなおすという意味ではとても意義があると思う。 適切なキーワードを軸として文書校正を見直し適切にマークアップすれば 自ずと検索エンジンにも評価されることでしょう。 広告を効果的に張ったりするマーケティングはともかく、 検索エンジンのアルゴリズムを探ったりしながらこまい作業をするのは ナンセンスすぎる。具体的に何か違いがあるのかどうかは知りませんが、googleからYAHOO JAPANに買収されたovertureが台頭してきたらまた対策練り直すのかって問題もあるし。(あ、またそこで提案しなおしてお金貰えばいいのか。) てゆか結局正攻法でないSEO対策はSEOスパムと 評されて除外されちゃうみたいだし。まじめにやることやってればよいのです。
ところで、徐々に進めているTAAKO.COMのstrictHTML対策ですがSEO効果は出てきてるようです。 今まではエロ単語でしか上位にこなかった検索キーワードも対策を施した画面から順に検索に 上がってきているもよう。よし。TAAKO.COM アクセスログ状況
余談ですが、わざと固有名詞を間違えるってのはいいかもしれません。ちゅらさんでお馴染み「ゴーヤーマン」ですが、 微妙に間違えてる「ゴーヤマン」で検索すると当サイトのコンテンツ「ゴーヤマンはニー」が上位に来ます。ゴーヤーマンでは上位に食い込むわけがないですが、わざと間違えやすいキーワードで競争率を減らし上位を目指すのはありかも。それこそさもしい？
SEM注意することリスト
- 文書の校正やサイトマップを見直す
- 適切にマークアップする
- 効果的な広告をうつ
- ちゅーかその前にイケてるサイトなの？
(2004.2.6)
strictHTML & CSS によるアクセシビリティの恩恵
長いので、別ページに移動しています。
TOMCAT4.x移行
いつまでもTOMCAT3.xを使ってるのもどうかなと思い、新しい文献を見ながらJSTLなどを勉強したかったので、 TOMCAT4に移行して見た。意外とさっくり移行完了。strutsの新旧混在による障害がちらほらと。 よく使われる部分は見えるようにしたが、servletが軒並み動かず。google先生に聞いてみたところ、 日本語周りの設定とか変えたり、web.xmlの記述方法も違うんですね。面倒なのでしばらく放置。 でもServletを書いてるところってのが、Flashコンテンツ周りだから動いてくれないとかっこ悪いのよね。
それはさておきJSTLを勉強してみる。今まではJSPの中にぐりぐりjavaのコードを 書いてたのが、こいつらのお陰でとてもシンプルになった！ jsp内javaコード0を目指して、ちょくちょくリプレイスしてきます。
現在のTAAKO.COM問題点と改善メモ
- Servletが動かない。
- Shift_JISとEUCが混在している。そのとき気分でやってたらそんなことに。最近のブラウザは頭良いので トラブルも起きなかったのでさぼってた。改めてちょっとずつShift_JISに統一していく予定。
- javaコード50%以上のJSPソース。
- スタイルシート使ってこ。
FlashMX 描画API
正円との戦い。長いので移動しました(要FlashPlayer６)
引退式
２年以上稼動し続けた自分の作った忌わしきサービスが今日停止した。新しいシステムへのせかえる為だ。データベースについて全くの初心者だった私がいきなり触ったのがObjectStore(日本エクセロン)と呼ばれるObjectデータベース。何かと苦しめられ続けた奴ではあったが、別れとなると情が深まっていたことを実感する。あぁあの悪戦苦闘の日々。せっかくの年越しは必ずお前を監視するハメにあってたね。いざさらば。こういう感情を実感できるってのは「作る」仕事の醍醐味だなぁと思う。開発中何かと手助けいただいた先人に感謝。新しいシステムはPostgreSQL＆Tomcat(java)ベースで動きます。安っ。(2002.3.25)
パンくずリスト
自分が今現在いるページが解るように表現する手法として
「TOP -> 芸能 -> 芸術 -> 写真」
などと書いてあるのを良く見かけるが、これの名称「パンくずリスト(Breadcrumbs)」と呼ぶらしい。すげー。知らんかった。覚えとこう。童話「ヘンゼルとグレーテル」の道しるべにまいたパン屑から来てるらしいけど、あれってお話の中で鳥に食べられてしまって意味あらへん。って話じゃなかったっけ。意味ないんじゃん。ってことで、その疑問はやっぱみんな思ってるらしいけど、これは省スペースだし、分かり易いし、すぐ親ページにも飛べるし、良い手法だと思う。取り急ぎメモ。(2002.3.20)ヒットコンテンツ
やっぱり世の中煩悩なんかなー。TAAKO.COMの人気コンテンツ、何を隠そう「エロマンガ島」なんですよね。ログ参照。もっぱら検索エンジンから「エロマンガ島」とでも入力してきてんだろうけど、普通検索エンジンから来ちゃった人は、外れサイトってことですぐ帰って行かれるんですが、エロマンガ島への来客はすべてのメニューをチェックして行くんです。ありがたいんですけど、あそこ何の更新もしてないから申し訳なさすぎです。ちなみにその次が「エレファントマン」なるほどgoogleで検索すると意外に上位にきてるらしい。なお両者ともそこからTAAKO.COMトップに来てくれるカスタマーはいません。当たり前か。(2002.3.4)
TAAKO.COMチューンアップ
最近、TAAKO.COMがやたら遅いなぁということで、ちょっとソースを見直してみた。するとやばいことだらけ。 DBから日記などひっぱってくるのに、毎回すべてひっぱってくるようなSQL文になってたもんだから、メモリ食う食う。PostgreSQL独自のlimit文を入れて最小限の引用にしました。これだけでもものすごいコストダウンです。さらにカウンターや日記などよく使われるデータは、JSPのapplicationに突っ込むことでDBへのアクセスを減らしました。んで、結果平均800m秒かかってたところが30m秒に・・・。俺ってアホ？いたるところでDBにアクセスしてるので、まだまだ改善するところは盛りだくさんみたいです。(2002.2.5)
Flash の共同開発「アランとナターシャ」
Flash5になってActionScriptが導入されて色んなことが出来るようになりました。フラッシュの処理能力さえ気遣えば、かなり色んなことができるので、デザイナーだけの遊び道具にしとくのはもったいないです。さらにデザイナーとプログラマが手を組めばもっと楽しいことが出来るはず。ということで、Flashで共同開発は円滑に行えるのか？というテーマのもとひとつFlashゲームを作成してみました。ライブラリの管理やデザイン部分とスクリプト部分の分割など色々気遣いながらかなりスムーズに作品を仕上げることができました。で、今回作成した作品はこちらです。(2001.12.13)
→サンタでポン！ECMAScript
Flash5のActionScriptはJavaScriptに似ているらしいということで、結局ECMAScriptというベースになる言語仕様があることを知った。早速ドキュメントを読んでみると英語しかない・・。なんとか読んで見たがなかなか判りやすくて良い。ベースだとか言いながらドキュメントの日付が99年ぐらい。ほんとにベースなのか、それともその後まとめたのか・・。サイトもecma.chなんてなんだかありがたみの無いドメイン。とにかくActionScriptの仕様とかJavaScriptの仕様って見つかんなかったからこれだけで結構役にたちそう。一緒にjavaScriptも極めましょう。
はじめに
WEBデザイナーとか言ってるけど、ぶっちゃけ話、たあこにデザインのスキルはぜんぜんありません。勉強をしたこともありません。たあこはプログラマです。そもそもwebデザイナーの定義は何って感じですが、HTMLをかじってるのでちょっとだけレイアウト方面に携わってるしぃってことでwebデザイナーって名乗らしてちょ。ってことです。まぁレイアウトのセンスもないですけどね。はは。 そっちのが響きいいんすよー。プログラマって名乗るよりさぁ。「web」は小声で「デザイナー」はハッキリと。
TAAKO.COMはたあこの技術研究と、サイト訪問者のユーザビリティのリサーチという大きな目的があります。 例えばはじめてサイトに訪れた人はまずどこを見てそのサイトを評価するんだろうとか、ページのレイアウトによってどういう順に人は見るのだろうとかこんなちっぽけなサイトでも立ち上げていると毎日が発見です。 というわけでTAAKO.COMは日々ユーザが快適に過ごせるサイトを模索していきたいなぁと思ってるわけです。 TAAKO.COMをどうぞよろしくお願いします。