2006年8月アーカイブ

2006年8月31日

マッシュアップで工数削減コンテンツ追加！

ＳＮＳに付加価値を何かしらもたせたいたい！しかしそんなに工数はかけられない！

そんなこんなでＡＰＩを利用して適当にマッシュアップして便利なものを作ってみようかなってなりました
あみだくじでＡＰＩとＡＰＩを組み合わせて画期的なサービスをつくろうかなと思っています、ちゃんと考えないと多分無理ですが

エクセルですがほしい方はどうぞ（都合の悪いものは載せていませんので網羅しているわけでは御座いません）
適当に集めたＡＰＩのリスト（.xlsです）

2006年8月18日

「HTMLコーダーの幸せ探し」は素晴らしい

日々のネコゼログログ様の「HTMLコーダーの幸せ探し」の資料を偶然発見する事ができまして、正直感動した！

ネコゼ様の考えている事は全く持って僕と同じ！おそらくこんな考えを持った方は多いはず
とりあえずmixiにHTMLコーダー労働組合でも作ろうと思いました。
ネコゼ様に感謝いたします。

特に強調したい点はこれら

  • いくら奇麗なソースで組んでも、評価される訳ではない
  • 自分が抜けたらメンテナンスを誰がする？
  • 周りに「勉強して下さい」とは言えない？

実際ソース自慢はするものの「すごいんでしょうね」ですまされますし

幸いうちの会社はまだ理解がある方で、個人的に発言権は与えられている方ですが
傾向としてはどうしても立場が弱くなりがちなHTMLコーダーです。
そんな世間のコーダー諸兄よ立ち上がりましょう！

僕はコーダー地位向上のための策を考える会
「HTMLコーダー労働組合」コミュニティを解説いたしましたので皆さんよろしくお願いします
http://mixi.jp/view_community.pl?id=1229998

2006年8月13日

CSS管理～マルチシートアプローチ～

私事ではありますが、先日外注先とのやりとりで、
こちらで雛形となるベースコーディングを行ってファイル一式を渡したんですが
そこでとてもうれしい一言をいただきました

「素晴らしいソースです、こんなに綺麗なソースは初めて見ました」

だそうです。個人的にテンション上がりまくりです。
SEOという魔法の言葉を駆使して社内営業をしているのですが、同業者からの賛辞は最もうれしかったりします。

さて、本題ですが。
こないだのガイドラインの話からまだ引っ張るんですが、ガイドラインを徹底するとこんな事もできますよ、という話です。

そもそも、WEBの制作の際制作スピードの向上に最も特効薬となるのは「複数人で作業する事」です、実はこれは意外と難しくてコーディングの複数人での作業は経験がない人が打ち合わせをせずに行うとひとりでやる２倍くらいの時間が掛かってしまうと思います。

これを解消する有効な手段がマルチシートアプローチ。
今日はマルチシートアプローチの薦めです。

なかなかよそ様のCSSのURLを直リンクするわけではいけないので手前みそで申し訳ないですがうちのCSSをご覧ください

第一のCSS、style importor

STOPN' LISTEN のset.css

こちらはなにかと言うとCSSをまとめてimportしているためだけのCSSです。
実はこのCSSにはもうひとつ役割があって、各種CSSハックを駆使してブラウザによる振り分けをしています。

具体的なソースを提示すると 

@import url("default.css");

上記のように「(　)でくくると」部分は旧ブラウザ達もimportしてくれるものが多く、

@import "base.css";

この形で書くことである程度の旧ブラウザははじいてくれるという事です。
よって旧ブラウザにはdefault.cssしか読み込ませていないという事になります。

次に以下の部分

/* Style for MacIE 5.x gp

------------------------------------------*/

/*for MacIE5*/

/*\*//*/

  @import "ie5m.css";


/**/

こちらではバックスラッシュハックを駆使してMac IEにだけ読み込ませるCSSを設定できるようにしてあります、ちなみに僕は書いてはいるものの特別使っていません。

次、

第二のCSSinitial setting


STOPN' LISTEN のdefault.css

こちらでおこなっているのはdefaultのスタイルをリセットすると共に各スタイルの基準値を設定しています。
詳しい中身の詳細は以前のエントリー「コピペで使えるデフォルトスタイルリセット」を参照して下さい。

そして次のCSSは

第３のCSSbase parts style

ここで何を行っているかというと、レイアウトに関するCSS定義を行っています。
サイト全体において共通のレイアウトのスタイルを書き込み最低限の配置をおこないます。

そして、次は

第四のCSSmodule style

STOPN' LISTEN のmodules.css
ついにこちらで最終的なスタイルを定義していくわけですが、重要な事はmoduleという言葉がさすように、機能ごとにモジュール分けをしてまとまりを持たせているということです。

Movable Type等、CMSを利用してサイトを構築した経験がある方は実感できる事だと思いますが、数十ページに及ぶサイトの構築には要素をコンポーネントで考えるという事は大変大切です。
そしてこのCSSが複数人での作業を可能にするのです。

僕は実際の案件では大規模なものになるとこのmodule.cssに更にコンテンツごとにCSSを分けimportしている時もあります。

加えて、意外と現場で大事なことが、CSSごとの責任者の設定という事が重要です。
うちのサイトでは

/*
	Site Name: STOPN' LISTEN
	Description: style import
	Version: Beta
	Author: charge by kennsu
*/

というふうに書いてありますが、わかればなんでもいいです。
charge by kennsuというところが責任はkennsuにありますよ、というわけです。
僕は大規模なポータルサイトを運営しているメンバーの一人ですがコンテンツごとにCSSの管理者をわける事によって複数人管理を実現しています。リスク管理にもつながりますし、一人一人の負荷が軽減されます。

もちろんその際には個々のCSSを書くメンバーにはガイドラインを配布し徹底的にホワイトリスト方式で書式や方針を統一します。

このようにCSSの管理を徹底すると複数人での作業を実現する事ができ、スピードが極端に早くなります（最終的にはあがってきたものはチェックしますけどね）。

今おもいついたんですが、prototype.jsやlightbox.jsみたいにCSSもライブラリにして配布したら皆使うかな？
ちょっと今やる気になりました。しばらくCSSのライブラリについて考えます。

特定のid/classを設定するだけで基本レイアウトが実現できるとか・・・・

2006年8月 2日

出会い、それは突然

いつも気配り上手で危ないところにははすぐ警告をだして注意してくれる、よく気がつくよい子。
頑張りやさんがゆえたまに無理しすぎて動けなくなっちゃう事も多いけれど、日本語がたまにわからない時があるけども。
とっても器用でサポート上手、おまけに質素でお金がかからないなんて。
今日はこんなパーフェクトなAptanaちゃんと部長の紹介で出会いました。

今とあるSNSを新規に構築しています。
どうみてもインターフェイスの機能を実装するにはDOMが必要なんですが僕はjavascriptの経験殆ど無し、5行くらいしか書いたことないですよ。
Actionscriptは多少経験があるんですが全く同じというようにはなかなかいきません。

ほとほと困り果てた上にたどり着いたのがprototype.jsとAptana（詳しくはGIGAZINE様の記事『Dreamweaverの代わりになるフリーソフト「Aptana」』へ）。実際に使用している動画がこちらで見られます「http://www.aptana.tv/」

しかしながらAptanaさんもDreamweaverのかわりをつとめるとなるとキツイものがあるというか英語が読めなくもないが馴染まないというか・・・
個人的にはHTML＋CSSはDreamweaver（コーダーならばIDEなど使わなくともどのブラウザでどんなバグがあるか把握したいものです）が最速。
JavascriptはAptana最速かも（コードヒントがあれば尚よし、英語理解できてないだけであるかもしれません・・・）。

Aptanaがサポートしてくれるので調子にのって明日はLightbox（今更）あさってはDojo.js（今更）に挑戦してみます！

2006年8月 1日

livedoor clipに追加するアイコンを追加する

今日は割りと早くかえれたんで、また機能追加しました。

最近ログを見ているとかなりlivedoor clipから来ている事に気づきました、僕は個人的にははてな派なんですが今日ユーザー登録してみると結構ブックマークされているものですね、ついでなんで簡単にブックマークできるアイコンを設置してみましたよ。

livedoor clipから提供されているリンク先は

http://clip.livedoor.com/clip/add?link='+encodeURI
Component(location.href)+'&title='+encodeURICompone
nt(document.title);

ですから、URIに関係する部分（イコール[=]以下の部分）にうまくMTタグを挿入して

＜a href="http://clip.livedoor.com/clip/add?link=
＜$MTEntryPermalink archive_type="Individual"$＞
&title=＜$MTEntryTitle$＞&jump=myclip"＞
＜img src="/img/myclip.gif" alt="このエントリを li
vedoor クリップへ追加" title="このエントリをlivedoor 
クリップへ追加" /＞

以上で完成作業時間たったの５分
イメージの部分はアレンジしてください

« 2006年7月 | メインページ | アーカイブ | 2006年9月 »