tag:blogger.com,1999:blog-15622992035304595652023-11-16T00:30:54.361+09:00Astrograph's LABフリーランスのWEBクリエーター『<a href="http://www.astrograph.jp/">Astrograph</a>』が執筆するブログです。<br>
主にWEB制作に関することを記していこうと思います。astrographhttp://www.blogger.com/profile/07568136403235938192noreply@blogger.comBlogger8125tag:blogger.com,1999:blog-1562299203530459565.post-84934745175387001512011-06-27T21:40:00.002+09:002011-06-27T21:50:34.808+09:00ブログを再開だいぶ更新していなかったブログですが、<br />備忘録として再開しようかと思っています。<br /><br />あと、Facebookページも始めます。<br />↓↓↓<br /><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2F%25E3%2582%25A2%25E3%2582%25B9%25E3%2583%2588%25E3%2583%25AD%25E3%2582%25B0%25E3%2583%25A9%25E3%2583%2595%2F219732801399721&width=400&colorscheme=light&show_faces=false&border_color&stream=false&header=false&height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:62px;" allowtransparency="true"></iframe>astrographhttp://www.blogger.com/profile/07568136403235938192noreply@blogger.com0tag:blogger.com,1999:blog-1562299203530459565.post-29936068985377818882008-11-27T21:43:00.008+09:002008-11-30T17:15:19.099+09:00CMSの流行少し前の話ですが、「2008オープンソースCMSアワード」の結果が出たようです。<br /><br /><a href="http://web-tan.forum.impressrd.jp/u/2008/11/07/4374" target="_blank">http://web-tan.forum.impressrd.jp/u/2008/11/07/4374</a><br /><br />総合部門の順位は<br />1. Drupal<br />2. Joomla!<br />3. DotNetNuk<br />となったようです。<br /><br />日本ではMovable Type, Wordpress, Xoopsが主流ですが、海外ではDrupal, Joomla!が定番との噂を耳にします。今後は日本でもDrupalやJoomla!へ流れていくのでしょうかね。。<br /><br />個人的にはDrupal, Joomla!はやれることが多いので、大規模なサイト構築には向いていると思うのですが、その反面、管理画面の作業も多くて覚えづらいので、小中規模のCMSとしては使いづらいのでは?と思ったりします。<br />Movable Type, Wordpressなどと上手く使い分けていくことが大事かもしれませんね。astrographhttp://www.blogger.com/profile/07568136403235938192noreply@blogger.com0tag:blogger.com,1999:blog-1562299203530459565.post-59293163838228260202008-10-31T23:13:00.005+09:002008-10-31T23:57:25.073+09:00Ajaxを取り入れたSONYのコーポレートサイト<a href="http://www.apple.com/" target="_blank">Apple</a>や<a href="http://www.gucci.com/" target="_blank">GUCCI</a>のサイトのように、Ajax&エフェクトを駆使したFLASH的なサイトを探していたら、SONYのコーポレートサイトに出くわしました。9月頃にFLASHをやめてAjaxに移行してリニューアルしてたらしいです。(話題になってたっぽいですね。。)<br /><br /><a href="http://www.sony.co.jp/" target="_blank">http://www.sony.co.jp/</a><br /><br />これくらいのクオリティで作るとFLASHに近い感じで気持ちいいですね。<br />(さすがに派手なエフェクトはFLASHには敵いませんが・・)astrographhttp://www.blogger.com/profile/07568136403235938192noreply@blogger.com0tag:blogger.com,1999:blog-1562299203530459565.post-6103005180479590162008-10-27T23:12:00.005+09:002008-10-28T01:33:48.339+09:00スムーズスクロールの表現Javascriptによるページ内リンクをスムーズスクロールにする動作はよく見かけますが、「KAZUMiX memo」というサイトのDEMO動作が大胆な使い方で、こういう使い方もおもしろいなと思いました。<br /><br /><a href="http://d.hatena.ne.jp/KAZUMiX/20080418/scrollsmoothly" target="_blank">http://d.hatena.ne.jp/KAZUMiX/20080418/scrollsmoothly</a><br /><br />配布しているライブラリの仕様も、JSファイルを読み込むだけで、ページ内リンクがスムーズスクロールになる仕様なので、簡単で使いやすいです。jQuery, prototyp.jsなど他ライブラリを必要としない点も魅力的です。<br /><br />画像主体の紙っぽいサイトで、スムーズスクロールを上記DEMOみたいにダイナミックに使ってみると、動きがでて良さげですね。astrographhttp://www.blogger.com/profile/07568136403235938192noreply@blogger.com0tag:blogger.com,1999:blog-1562299203530459565.post-21648447931020127152008-10-21T15:30:00.004+09:002008-10-21T16:02:26.214+09:00Dream Weaver CS4 新機能<div>Dream WeaverのCS4の新機能についての記事。</div><a href="http://www.adobe.com/jp/devnet/dreamweaver/articles/dwcs4_publicbeta.html" target="_blank">http://www.adobe.com/jp/devnet/dreamweaver/articles/dwcs4_publicbeta.html</a><div><br /></div><div>プレビュー機能「Live View」や、CSSの内容がポップアップでプレビューできる「Code Navigator」がコーディング時間の短縮に活躍しそうです。</span></span></span></span></div>astrographhttp://www.blogger.com/profile/07568136403235938192noreply@blogger.com0tag:blogger.com,1999:blog-1562299203530459565.post-51155769465719735762008-10-13T23:45:00.009+09:002008-10-14T00:12:01.944+09:00アンカーリンクやフォームに使えそう - Seek Attentionコリスさんの記事で見つけた気になるJSエフェクト「<a href="http://coliss.com/articles/build-websites/operation/javascript/1507.html" target="_blank">Seek Attention</a>」。<div>注目させたい場所にスムーズスクロールし、</div><div>さらに該当場所を白抜きして目立たせるエフェクト。</div><div><br /></div><div><a href="http://enhance.qd-creative.co.uk/demo/seekAttention/" target="_blank">Seek Attention デモページ</a></div><div><br /></div><div>動作もいくつかバリエーションがあるし、アンカーリンクに活用すれば、ページ下部へのアンカーリンクもユーザーに判りやすくできそうです。フォームのエラー画面とかにも使えそうです。</div><div><br /></div><div>主要ブラウザで上記デモページをざっと動作確認をしてみました。</div><div><br /></div><div>動作OK</div><div>IE6, IE7, FF2, FF3, Safari1.3, Safari3, Chrome, Opera9</div><div><br /></div><div>動作NG</div><div>Netscape7, Opera9.5</div><div><br /></div><div>ほとんどのモダンブラウザで問題ないようです。</div><div>(Opera9.5もスクロール動作が一旦ページトップへ動いてしまうバグ以外は問題ないようです)</div>astrographhttp://www.blogger.com/profile/07568136403235938192noreply@blogger.com0tag:blogger.com,1999:blog-1562299203530459565.post-57555504233823024752008-10-13T06:29:00.004+09:002008-10-13T06:42:27.465+09:00Ajaxに使えるローディング画像<div>Ajaxの通信中のローディング表示使えるアニメーションGIF作成サイト。</div><div><br /></div><a href="http://www.ajaxload.info/" target="_blank">http://www.ajaxload.info/</a>astrographhttp://www.blogger.com/profile/07568136403235938192noreply@blogger.com0tag:blogger.com,1999:blog-1562299203530459565.post-66374944807811699812008-10-09T11:24:00.002+09:002008-10-13T06:09:43.154+09:00CSSコーディングのメリット・デメリットここ数年、世間の流れではCSSコーディングが主流になっていますよね。<div>僕自身もクライアントから特に指定が無い限りは基本的にCSSでコーディングしています。<div>でもたまにお客様から「なぜCSSで組まないといけないんですか?」という質問を受けます。</div><div>まぁこの質問に対してあげられる回答としては、以下のようなものがあがると思います。</div><div><ul><li>ソースが適切マークアップされているので、<br />どんな環境(プログラム)からでもスムーズに読める。<br /></li><li>ソースが読みやすいのでSEOにも適している<br /></li><li>デザインとコンテンツを別に管理でき更新が容易になる<br /></li><li>コンテンツが適切にマークアップされていれば、<br />アクセシビリティがよくなる(音声ブラウザ対応など)</li></ul></div><div>まぁ他にもいろいろCSSでコーディングするメリットはあると思います。</div><div>上記のようなメリットを見るとなんだかいたれりつくせりで、CSSで組むのがやはり当たり前って気がしますが、僕個人の見解としては一概にそうとも言い切れないのでは?と思ったりもします。</div><div><br /></div><div>以下は実際に僕が携わった案件を通してデメリットなのでは?と思った事柄です。</div><div>(ひとまずざらっと記して細かいことは後述で。)</div><div><ol><li>サイトオープン後、運用にあたって、コーディングに関するリテラシーがないと編集作業がとっつきにくい。(お客様自らで編集、更新をする際など)<br /></li><li>CSSコーディングはプログラム的な構築方法なので、最初にデザイン設計を確実に行わなければ、そのメリットが発揮できない。</li><li>CSSコーディングもさまざまな方法が普及したのでデザインの再現率は高くなったが、それでもまだ自由度が低い。</li><li>マークアップを適切にすることが前提だが、現状普及している(x)htmlのバージョンではマークアップのタグ種が不十分。</li></ol></div><div>と、ぱっと思い浮かんだことを書いてみました。</div><div><br /></div><div><div>1.に関してですが、サイトをクライアント自らで運用更新するのはよくあるケースだと思います。</div><div>TABLEコーディングのようにデザインがHTML上にあれば、オーサリングソフトなどを使って見たまま直感的に編集できると思いますが、CSSコーディングの場合はそう手軽に編集できません。オーサリングソフトもCSSサポートはだいぶ充実してきているので、ある程度シンプルなデザインなら編集しやすいと思いますが…。</div><div>下手にCSSを編集してしまうと他ページが崩れてしまったりしますし、既存CSSをいじるのが恐いからといって新規にCSSを追加して、それが繰り返して行われていってしまっては最初に綺麗に設計した意味がなくなってきます。そんなこんなでソースやファイルがぐちゃぐちゃしてしまうなら、最初からTABLEコーディングの方がある意味シンプルで判りやすいです。他ファイル干渉もないですし。(コーディングマニュアルを納品するって手もありますが、クライアントにWEBマスター的な役職の人がいれば飲み込みは早いでしょうが、コーディングになじみが薄い方にはおっくうな気がします・・)</div><div><br /></div><div>続いて2.に関して。</div><div>デザイン設計がきちんと行われCSS設計をきちんとやらないと、初期構築の際の多人数での作業が難しいですし、運用の際にもソースやファイルがごちゃごちゃとしてきてしまいます。</div><div>プログラム的に考えると、作業分担して行う場合に各々思うまま組んでしまうのでページによって仕様がバラバラ。運用後にどんどん仕様追加。といった状況ではないでしょうか。</div><div><br /></div><div>3.に関して。</div><div>CSSの技術も向上しましたが、まだ表現が弱いところはあると思います。</div><div>DIVタグを多用したり、Javascriptで補ったりと工夫をすればフルCSSで再現できないことは無いですが、それだと結局ソースも複雑で本末転倒な気がします。</div><div>各ブラウザが最新バージョンのCSSを取り入れ動作統一してくれれば、できることが増えるのですが。。</div><div><br /></div><div>4.に関して。</div><div>現状普及している(x)htmlのバージョンでは、「これって文法的にマークアップは何?」って要素に出くわします。紙っぽいデザインで「文法どうこうないんじゃない?」ってページにマークアップするのってどうなんでしょう。。数年経てば次世代のバージョンが普及して、もう少しマークアップの幅は広がりそうですが。</div><div><br /></div><div>まぁそんなこんなでCSSコーディングのデメリットを書いてみました。</div><div>(自分で読み返すとなんだかアンチな感じですね・・・)</div><div><br /></div><div>「コンテンツ内容が魅力的」これをバックアップする意味でのWEB標準。と思う今日この頃です。</div></div></div>astrographhttp://www.blogger.com/profile/07568136403235938192noreply@blogger.com0