ＩＴキヲスク http://smkn.xsrv.jp/blog Hack / Tips for web creators. Wed, 17 Mar 2010 04:01:35 +0000 http://wordpress.org/?v=2.9.2 ja hourly 1 商用利用可 + クレジット記載不要 + バックリンク不要のフリーアイコン19選 http://feedproxy.google.com/~r/itkiosk/~3/Yb-zcRRta0c/ http://smkn.xsrv.jp/blog/2010/03/summary-for-completely-free-icon/#comments Wed, 17 Mar 2010 04:01:35 +0000 smkn http://smkn.xsrv.jp/blog/?p=1391 アイコン」ですが、その重要度と需要からか、世界中の多くのデザイナー方が、高品位なアイコンをフリー素材として公開・提供してくださっています。 特に海外のデザイナーブログなどでは定期的にフリーアイコンを発表していたりして、webデザイナーの方もお世話になったコトがあるのではないでしょーか。 しかしながら、実際にそのアイコンを利用するには、商用利用が禁止されていたり、クレジットやバックリンクが必須だったりと、なかなかどうして目的に沿うライセンスのモノを見つけるのも難しかったりします。 なので今回のエントリーでは、「使用料が無料」という前提の中で、まず「商用利用も可能」で、さらには「クレジット（著作者名）の記載が不要」で、なおかつ「バックリンクも不要」という、webデザイナーならいくらでも持っていたいフリーアイコンをまとめてみました。 小さなサイズながら、時にはナビゲーションの導線として、時にはアテンションを与える特効薬として、アイコンはwebデザインに欠かせないほどの重要な要素。 公開してくださったデザイナー方に感謝の意を表しつつ、実際のアイコン画像と合わせてご紹介していきますよー！]]> webデザインにおいて、サイトの雰囲気や方向性はもとより、その個性すらも大きく左右する存在の「アイコン」ですが、その重要度と需要からか、世界中の多くのデザイナー方が、高品位なアイコンをフリー素材として公開・提供してくださっています。

特に海外のデザイナーブログなどでは定期的にフリーアイコンを発表していたりして、webデザイナーの方もお世話になったコトがあるのではないでしょーか。

しかしながら、実際にそのアイコンを利用するには、商用利用が禁止されていたり、クレジットやバックリンクが必須だったりと、なかなかどうして目的に沿うライセンスのモノを見つけるのも難しかったりします。

なので今回のエントリーでは、「使用料が無料」という前提の中で、まず「商用利用も可能」で、さらには「クレジット（著作者名）の記載が不要」で、なおかつ「バックリンクも不要」という、webデザイナーならいくらでも持っていたいフリーアイコンをまとめてみました。

小さなサイズながら、時にはナビゲーションの導線として、時にはアテンションを与える特効薬として、アイコンはwebデザインに欠かせないほどの重要な要素。

公開してくださったデザイナー方に感謝の意を表しつつ、実際のアイコン画像と合わせてご紹介していきますよー！

ご紹介する配布アイコン使用時の注意

本エントリーの主題である「使用料無料」、「商用利用可能」、「クレジット（著作者名）記載不要」、「バックリンク不要」というのはあくまで「作成者からのサービス」とでもいうようなもので、権利的・条件的に何の制約も無いワケではありません。

また何にも増して、その素材は時間と手間を割き、人の手によって制作されたものです。

使用する際はその事を忘れずに、アイコンを提供なさっている方のご迷惑にならないようにご利用ください。

具体的には、

  1. ダウンロードした素材を販売したり再配布しちゃダメ
  2. ダウンロードした素材を「自分のオリジナル制作物です」ってウソついちゃダメ
  3. 違法サイトや公序良俗に反するサイトで使用しちゃダメ
  4. 画像を直リンクで使用しちゃダメ（一度ダウンロードして、自分の管理下からリンクすること）
  5. その他、各サイトさんの使用条件を良く読み、「しないで！」ってコトはしない

上記は必ずお守りくださいね！

また、このエントリーの情報は2010年3月18日現在の情報になります。今回ご紹介するアイコンも、将来的には方針を変更して有償になったり利用条件が変更されるかもしれません。あくまでご利用は自己責任の上で、ちゃんと先方の使用許諾やLicenseやreadme.txtやTerms of useといった説明をよく読みましょー！

それでは、webデザイナー必携の無料アイコン、どばっと一挙19個ご紹介っ!!

商用利用可 + αのフリーアイコン

Double-J Design – Free Icon Download, Stock Icon, Custom Icon Design, Custom GUI Design, Free Web Resource » Blog Archive » A Free Icon Set ‘Diagram’

少し丸みのあるフォルムが可愛いアイコンです。

32×32px、48×48px、64×64px、96×96pxという4種類のpng画像の他、aiベクターファイルも同梱されているので、心おきなく調整できちゃいます。

100 Free Icons – Weby Icon Set | IconsPedia

代表的なブラウザのアイコンをはじめ、タグやカートなんかもある、柔らかい印象のアイコンです。

64×64のpng画像とともに、16×16pxのicoファイルも入っていますので、そのままfaviconとしての使用も可能ですね。

Free Icon Pack: Web Injection | Tutorial9

48×48pxのアイコンと、紹介用画像のpsdファイルが同梱されています。

アイコンはCDやタグの他、注射器やデータベース(？)のような一風変わったものがあったりします。

Pro Theme Design | Circular Icons

16×16px、円形のpng画像アイコンが117個、どどーんと配布されています。

小さいながらも細部まで作り込まれていて、ちょっとしたアクセントに最適なアイコンとなっています。

Centigrade GmbH · Blog · Free Medical Stock Icons: The Centigrade MedicalSeries

コレはかなり珍しい、医療系のアイコンです。

32×32pxのアイコンが46個、128×128pxのアイコンは14個、それぞれ違う画像で用意されています。

Mobile Icon Set | Web Icon Set

32×32px、48×48px、64×64px、128×128pxの4サイズが同梱されたアイコンになります。

128×128pxのモノでもかなり作りが精巧なので、思い切った使い方をしてみたいアイコンです。

Elegant Themes Icon Pack, For Free!-Elegant Themes Blog

ブログ系のデザインにピッタリのモチーフを取り揃えたpng画像のアイコンです。

76個もアイコンが入っているので、このアイコンファイルだけでも1つのサイトデザインを賄えちゃいそうです。

Icojoy – stock icons shop, article ‘Free web development icons #4 SE’

24×24px、60のモチーフがアイコンになっていますが、驚愕すべきは同梱されているファイルの数。

まず影のありなしで分けられ、さらにそれぞれスタンダードと別バージョンの2つに分けられ、果てはbmp、gif、ico、png、tiffという5つの画像形式ごとにアイコンが用意されています。

その合計数、なんと1200個！

Icojoy – stock icons shop, article ‘Onebit free icon set’

角が丸く境界線がくっきりとしたアイコンが48×48pxで50個ほど入っています。

結構オールマイティーに使えそうなのが良いですね。

Icojoy – stock icons shop, article ‘Onebit free icon set #2′

上記と同じシリーズの第二弾。

テイストも同じなので、合わせれば合計70個にもなりますので、さまざまな目的で使えるかと思います。

200+ Free Exclusive Vector Icons: ‘Primo’ | Webdesigner Depot

ブルー・グレイ・ブラックを基調とした、結構重量感のある印象のアイコンです。

48×48px、64×64px、128×128pxの3種類とともに、なんと1画像につき1つのaiファイルが同梱されていますので、アイコン素材としてはもちろん、aiでの画像作成の教材にもなっちゃいます。

Free Icons – 200 Free Exclusive Icons: Siena | Webdesigner Depot

クリアーで清潔感のあるテイストのアイコンが200個も入っています。

こちらはaiファイルが34個、サイズはなんと6種類（16×16px、24×24px、32×32px、48×48px、128×128px、256×256px）となっています。

Developpers Icons by ~Sekkyumu on deviantART

カチッとした境界線の、存在感のあるアイコンになります。

webサービス系なんかに使えそうなモチーフのものが多く含まれています。

Knob Buttons Toolbar icons by ~iTweek on deviantART

円形の中に記号的な画像を配したアイコンです。

色は4色、それぞれ無地のアイコンも含まれているので、足りない場合はコレを基に自作もできそうですね。

August Iconset by ~austintheheller on deviantART

iPodからカラーピッカーまで、多岐に渡るモチーフのアイコンが85個も入っています。

テイスト的にもかなり使い勝手の良さそうなアイコンです。

Flavour Extended: The Ultimate Icon Set For Web Designers – Smashing Magazine

webサービス寄りのモチーフが特徴的なアイコンです。

マグカップやフロッピーディスクのモチーフなど、探すと意外と見つからないモチーフが含まれているので、重宝するコト請け合いです。

Freebie Release: Quartz Icon Set – Smashing Magazine

ブログにもwebサービスにも使えそうなアイコンが91個も入っています。

グラデーションもフォルムも美しく、細部まで考えて作られているのが分かります。

On-Stage: Free Vector PSD Icon Set – Smashing Magazine

柔らかい雰囲気のブログ用アイコンになります。

オリジナルのブログデザインをする際には非常にありがたいアイコンなんじゃないでしょうか

Project Icon Set For Free Download – Smashing Magazine

アプリケーションなんかに向いてそうなアイコンです。

18個と数自体は比較的少ないですが、まさに少数精鋭といって過言ではないクオリティーです。

以上、19個のプロクオリティーなフリーアイコン特集、いかがだったでしょーか。

繰り返しになってしまいますが、使用の際はくれぐれも先方のサイト内の利用規約や、ダウンロードしたアイコンフォルダに同梱のreadme.txtなどを読み、自己の責任の上、用法容量を守って正しくご利用くださいまし☆

それでは、素晴らしいアイコンデザイナーの方々に最大級のリスペクトを込めて、敬礼っ！

関連する投稿

]]> http://smkn.xsrv.jp/blog/2010/03/summary-for-completely-free-icon/feed/ 0 http://smkn.xsrv.jp/blog/2010/03/summary-for-completely-free-icon/ 2010年3/7～3/13の週間ブックマーク http://feedproxy.google.com/~r/itkiosk/~3/F3w0lcn30dM/ http://smkn.xsrv.jp/blog/2010/03/2010%e5%b9%b437%ef%bd%9e313%e3%81%ae%e9%80%b1%e9%96%93%e3%83%96%e3%83%83%e3%82%af%e3%83%9e%e3%83%bc%e3%82%af/#comments Sun, 14 Mar 2010 06:02:50 +0000 smkn http://smkn.xsrv.jp/blog/?p=1631 はてさて今週は久しぶりにjQueryプラグインがアツい一週間でした。

今までの「webページに仕込んでエフェクティブにうんちゃらかんちゃら」ってカタチじゃなく、サイトに新しい機能自体を追加しちゃうような。

他にもdocomo界隈で新しい仕様が公開されたり、役立ちそうなまとめエントリーやフリーアイコンなど、なかなかに盛りだくさんでしたねー。

そんな感じの今週のブックマーク、まずは目次からどーぞ。

んじゃ、今週のブックマークの詳細をどぞ☆

HTML Tips

HTML5 基礎知識 – web探検隊

かなり分かりやすいエントリーです。

今度一回つくってみよー。

JavaScript ライブラリ

HTMLやJavaScriptでWindows/Mac/iPhone/Androidアプリを開発するフレームワーク「Appcelerator Titanium 1.0」公開 – SourceForge.JP Magazine

jQuery Tips

もっと便利に！jQueryでラクラクサイト制作（実践サンプル付き）：第18回　jQueryでAJAX入門：RSSをAJAXで取得してリストに表示する ｜gihyo.jp … 技術評論社

Google AJAX Feed APIさいこー！

jQuery プラグイン

初jQueryプラグイン！HTMLのスライド mukiSlide.js | labs.yusukenakanishi.com

パワポみたいな感じで、これ結構使いどころ多いかも。

PHP、Perl、Ruby、C、C++等40以上の言語をブラウザで実行できるようになるjQueryプラグイン「Run This」:phpspot開発日誌

すげーｗ

でも怖えー。

MOONGIFT: » ストリートファイター系ゲームまで！ゲーム用jQueryプラグイン「gameQuery」:オープンソースを毎日紹介

もはやJavaScript何でもアリか。

ピュアHTMLでキャラクターと背景がアニメーションするjQuery | CREAMU

キレーだなー。

IT関連ニュース

カプコンに学ぶデスマーチにならない仕事術 – teruyastarはかく語りき

各種まとめエントリー情報

柴犬速報:すっきりしたデスクトップ作ってみませんか？

こーゆーの見ると途端にデスクトップ改造したくなる。

アイディアの素としてもオススメ。

優れたウェブアプリケーションを構築する鍵–フレッド・ウィルソン氏の提唱する10の法則 – builder by ZDNet Japan

これはアタマに留めておきたい。

モバイル関連情報

ドコモがPC向けの認証サービス「docomo ID」の提供を開始したようです | ke-tai.org

ドコモがPC向けの認証サービス「docomo ID」の提供を開始したようです　その２ | ke-tai.org

フリー素材情報

Elegant Themes Icon Pack, For Free!-Elegant Themes Blog

商用可能なアイコンです。

実際に使えるクオリティーなので、迷わずダウンロードしちゃいましょー。

Halftones Pack – 55 Free Vectors, Brushes, and Images « Media Militia

使い勝手の良いハーフトーン系の素材。

PSブラシ、AIベクター、png画像が取り揃えられてるのもアツいです。

デザイン関連情報

8 Design Elements Your Blog Should Have

ブログに必要な要素と、それに対するデザインについて。

味気ないデザインを一新！使いやすい検索ボックスを作る6つの方法 | Webクリエイターボックス

検索枠のデザインギャラリーとしても素晴らしい記事ですよ。

Bad Design Vs Good Design: What You Should Be Doing (Part 1) « PSDFan

デザインの好例と悪例について、キャプチャ画像付きで解説されています。

デザインギャラリー

30 amazing ajax css form | Graphic and Web Design Blog -Resources And Tutorials

フォームのギャラリー件チュートリアル紹介。

Showcase of 30 Beautiful Blog Designs | Vandelay Design Blog

29 Sexy iPhone App Designs

なんかコレ見てると、クリエイティブなインスピレーションに満たされる気がします。

面白いネタが浮かびそうな。

5 Awesome Flash WordPress Themes Giveaway | 10Steps.SG

気になったオープンソース

MOONGIFT: » 実務でも使われている物流会社向け販売、在庫管理システム「olut 販売管理システム」:オープンソースを毎日紹介

使う見込みはありませんが、何か有事の際に覚えとこうかと。

気になったサイト

Website Templates, CSS Templates, Flash Templates – TemplateWire

XHTML/CSS、Flash、Logoのフリーテンプレートを掲載している海外サイトです。

掲載されているモノ全てダウンロードできるようなので、勉強用素材としても使えそうですね。

ぺんたん info

web制作系の広範な情報を掲載されているサイトさんです。

何がなにやらよくわからない煩雑な感じも、個人的には宝探しみたいで好きです。

ScanNetSecurity – スキャン・ネットセキュリティ [国内最大級の情報セキュリティ専門ポータルサイト]

いろんなアプリケーションの脆弱性情報やウィルス情報、セキュリティ関連情報を高頻度で更新されているサイトです。

有名オープンソースの脆弱性なんかも見つかり次第掲載されているようなので、この手の情報が必要な方はぜひRSS購読を！

Day 21 – 365psd

一日一個、psdファイルを無料配布しているファンタスティックなサイトさんです。

カテゴリー検索とかあったらサイコーなのになー。

ネタ的ななにか

Opera Logo with CSS · David DeSandro

CSS3だけでOperaのロゴを再現してます。

このページのフッターもCSS3で組まれていて、ここはここで新鮮なアイディアがあったり。

あの世にvipがあったらありそうなスレタイ ぶる速-VIP

このノリなら逝ってもいいわｗ

今回からこの「週間ブックマーク」シリーズ、一部自作スクリプトで生成してみました。

カテゴリーとurlを記入すると、勝手にサイト名を取得してきて、自動的に目次と詳細を生成してくれる仕組みです。

サイト名の取得は先日記事にした「PHP Simple HTML DOM Parser」を使用してみたところ、なかなかどうしてイイ感じ。

まだちょっとチューンアップは必要だけど、だいぶ効率上がりました。

やっぱPHP、便利だなー。

関連する投稿

]]> http://smkn.xsrv.jp/blog/2010/03/2010%e5%b9%b437%ef%bd%9e313%e3%81%ae%e9%80%b1%e9%96%93%e3%83%96%e3%83%83%e3%82%af%e3%83%9e%e3%83%bc%e3%82%af/feed/ 0 http://smkn.xsrv.jp/blog/2010/03/2010%e5%b9%b437%ef%bd%9e313%e3%81%ae%e9%80%b1%e9%96%93%e3%83%96%e3%83%83%e3%82%af%e3%83%9e%e3%83%bc%e3%82%af/ 2010年2/28～3/6の週間ブックマーク http://feedproxy.google.com/~r/itkiosk/~3/e8mXLp_I_8o/ http://smkn.xsrv.jp/blog/2010/03/2010%e5%b9%b4228%ef%bd%9e36%e3%81%ae%e9%80%b1%e9%96%93%e3%83%96%e3%83%83%e3%82%af%e3%83%9e%e3%83%bc%e3%82%af/#comments Sun, 07 Mar 2010 13:19:54 +0000 smkn http://smkn.xsrv.jp/blog/?p=1627 もうね、今週はかなりアツい！

新作Flashコンポーネントから始まり、プロの目によるデザイン寸評、ネタ満載のデザインギャラリー、たくさんの素晴らしい情報サイトなど、ホント豪勢な一週間となりました。

どんどん吸収していって、自分自身のクオリティーを上げていきたいですね。

という感じで今週のブックマーク、目次いっきまーす！

それでは今週のブックマーク、詳細になりまうす。ちゅー。

Flash コンポーネント

これからは、賢く楽しくサムネイる。 | swfthumnail

コレ、ハンパない！

アイディアもユニークだし、使い勝手も良さそうだし、エフェクトもインパクトのあるものが多くて、マジ速攻で使ってみようかと思ってます。

HTML Tips

一歩上行く！携帯HTML/XHTMLデザイン・コーディング術(第二弾)

各キャリアのtable周りに関する挙動についてのアレコレ。

CSS Tips

ベーシックなCSS3を取り入れてみよう！

RGBA、Text Shadow、Box Shadow、Border Radiusに関する解説。

そろそろ本気で取り掛からんとなー、CSS3。

PHP Tips

Google翻訳をPHPから使って翻訳できるクラスライブラリ

使い方がカンタンで良いですねー。

JavaScript情報

wxJavaScriptを使ったデスクトップアプリケーションの作成

HTML＋JavaScriptでiPhone/Androidアプリを作れるTitanium Mobileとは

上記も合わせて、やっぱ時代はJavaScriptなのかねー。

PHP情報

PHPによるデザインパターン入門

コレが無料なのはスゴい！

めちゃめちゃ勉強になるので、時間作って熟読します。

フリー素材情報

PS brash/png/AI vectorと取り揃えられたゴージャス感バリバリの飾り線

ECサイトに使えそうなpng形式のフリーアイコン10個

とにかくハイクオリティー。

商用利用も可能なので、バシバシ使っていきたいですね。

デザイン関連情報

ウェブサイトやブログの魅力的で便利なフッターを作る方法

使えるフッターって、案外難しいですよね。

ビジネスサイトにも流用できるサイトレイアウトのチュートリアル（psd付き）

デザインギャラリー

ZEN cart製の音楽系サイトギャラリー

ちょっとめずらしい音楽系のデザインギャラリー。

vCards（バーチャルビジネスカード）のデザインギャラリーとテンプレートまとめ

vCard、作りたいなー。

新鮮でハイクオリティーなWEBデザインまとめ

基本、グラデーションの使い具合が素晴らしいサイトが多く掲載されてます。

有料の美しいWordPressテーマ30選

Deviantartに掲載されている40のWEBデザインに対する寸評

コレは面白いコンセプトです。

出来れば同僚なんかとワイワイあーでもないこーでもない言いながら見ていきたいですねー。

印象的なポートフォリオ系デザイン40選

55のカラフルなWEBデザインギャラリー

気になったオープンソース

WebKitを使ってスクリーンショットを取得「webkit2png」

Python製、Mac OSX向け。

気になったデスクトップアプリケーション

Firefoxと完全互換の高速起動が可能な軽量ブラウザ「Pale Moon」

コレは良さそう。狙ったトコが良いですねー。

ちょこっといじってみようかな。

気になったサイト

ｋ本的に無料ソフト・フリーソフト

デスクトップアプリのフリーソフト情報を提供しているサイトさんです。

ほぼ毎日更新されているようなので、便利ツールマニアの方ならずとも一読の価値ありまくりです！

[C!] Creazy!

ユニークなオリジナルWEBサービスをいくつも提供されているサイトさんです。

PHPのTipsやブックマークレット、ユーザースクリプトなども公開されているので、速攻でRSS購読することをオススメしちゃいます！

php and Ruby on Rails Clone Scripts of all popular websites + Photoshop Resources

日本でいうところのMOONGIFTさんのような、オープンソースの情報を提供されている海外サイトさんです。

国内ではまだ紹介されて無いようなオープンソースも多数掲載されてますので、興味のある方はぜひ覗いて見てください。

ただ、サイト名にも冠しているように、PHPとRuby製のものをピックアップされてますが、どの言語を使っているかが紹介文上では明記されて無い場合もありますので、そこはご注意を。

Free Vector – Download free vectors for commercial projects!

商用でも個人用でも使えるフリー素材を集めて公開されているサイトさんです。

コレはデザイナー必見ですよー。

ネタ的ななにか

スーパーマリオのクリア画面を自分の好きなメッセージで作れるジェネレータ『Thank You Mario!』

確かに404とかに使ったら良さそう。

心理学：口癖

ところで自分の口癖ってなんだろう？

まずはそっから。

なんか最近、週末になると腹壊してる気がします。今もフルパワーでブレイキングしてます。

みなさまも体調にはくれぐれも気をつけてくださいねー。

関連する投稿

]]> http://smkn.xsrv.jp/blog/2010/03/2010%e5%b9%b4228%ef%bd%9e36%e3%81%ae%e9%80%b1%e9%96%93%e3%83%96%e3%83%83%e3%82%af%e3%83%9e%e3%83%bc%e3%82%af/feed/ 0 http://smkn.xsrv.jp/blog/2010/03/2010%e5%b9%b4228%ef%bd%9e36%e3%81%ae%e9%80%b1%e9%96%93%e3%83%96%e3%83%83%e3%82%af%e3%83%9e%e3%83%bc%e3%82%af/ いろんなエディタのzen-codingプラグインをまとめてみました http://feedproxy.google.com/~r/itkiosk/~3/Rag0kPUfhJ4/ http://smkn.xsrv.jp/blog/2010/03/zen-coding-plugins-summary/#comments Wed, 03 Mar 2010 01:17:02 +0000 smkn http://smkn.xsrv.jp/blog/?p=1615 zen-coding」。 「zen-coding」とは、カンタンな記述で構造化されたHTML/CSSが生成されるという、コーダー感涙の超絶便利なライブラリです。 その便利さ、コーディングが驚くほど簡略化されるというコトで、AptanaやDreamWeaverをはじめ、WordPressやCodaにもzen-codingプラグインが続々と登場しております。 そこで今回のエントリーでは、そんなzen-codingの各種エディタ用プラグインをまとめてみました。 まだ触ったコトの無いコーダーさん！もし自分の愛用エディタのプラグインがあったら、ぜひ騙されたと思って導入してみてください♪]]> 先週くらいから爆発的な注目を集めている、HTML/CSSショートカット用ライブラリ「zen-coding」。

「zen-coding」とは、カンタンな記述で構造化されたHTML/CSSが生成されるという、コーダー感涙の超絶便利なライブラリです。

その便利さ、コーディングが驚くほど簡略化されるというコトで、AptanaやDreamWeaverをはじめ、WordPressやCodaにもzen-codingプラグインが続々と登場しております。

そこで今回のエントリーでは、そんなzen-codingの各種エディタ用プラグインをまとめてみました。

まだ触ったコトの無いコーダーさん！もし自分の愛用エディタのプラグインがあったら、ぜひ騙されたと思って導入してみてください♪

zen-codingとは

先ほども書きましたが、zen-codingとは「カンタンな記述で構造化されたHTML/CSSが生成される」というモノです。

文章だけでは伝わらないと思うので、早速ですが実例を。

<div id="header">
	<h1></h1>
	<ul id="topmenu">
		<li class="menulist"><a href=""></a></li>
		<li class="menulist"><a href=""></a></li>
		<li class="menulist"><a href=""></a></li>
	</ul>
</div>

上記のような雛形HTMLを作りたい場合、下記を入力します。

div#header>h1+ul#topmenu>li.menulist*3>a

たったコレだけを入力して、あらかじめ決められたショートカットキー（F4 とか Ctrl+, とか）を押すだけで、上にあったHTMLが瞬時に生成されます。

軽く説明しますと、”＞”は入れ子関係を表し、”＋”は兄弟関係を意味します。

idは”＃”、classは”．”というCSSと同じ表記になり、”＊”は繰り返す回数を表します。

単純計算ではありますが、フツーにコーディングすると186回のキータッチ（タブや改行も含む）を必要としますが、zen-codingを使えば40キータッチ、約4.5倍もの差になります！

また、DOCTYPEなんかも一瞬で記述が可能です。

html:xt

たった7文字を入力するだけで、下記の文言が生成されます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
</head>
<body>

</body>
</html>

ね？もはや自動生成と言っても過言じゃないほどのラクチンさ。これは使いこなせば絶大な効率化になりますよー！

細かな使い方に関してはホスト先のGoogle Project HostingにあるZen HTMLセレクタ一覧にてご確認下さい。

というワケで、以下より各種エディタのzen-codingプラグインのまとめ ＋ 具体的な解説をなさっているブログエントリーになります。

いろんなエディタのzen-codingプラグイン

Dreamweaver

・Dreamweaverでzen codingを使ってみた。 | vayu : soft true fossil
・zen codingは超便利！Dreamweaverで使ってみました。 | VIVID COLORS + BLOG

秀丸

・秀丸マクロでZen-Coding（via exoego.net）
・Zen-Codingを秀丸マクロで試しました。 – E-riverstyle Vanguard

Vim

・Big Sky :: zen-coding for vim を pure vimscript だけで書いてみた。
・Vim の Sparkup プラグインで HTML タグを Zen Coding 風に簡単入力 : Serendip

WordPress

・WordPressにZen Codingを導入するプラグイン「WP Zen-Coding」 – Rewish
・WordPressでzen-codingを使えるようになるプラグイン・WP Zen-Codingが凄く便利 – かちびと.net

Movable Type

・MT Zen-Coding に名前を変えてちょっとパワーアップさせました – かたつむりくんのWWW

EmEditor

・EmEditorで Zen-Coding | trapon

Emacs

・簡単な入力するだけでHTMLタグを生成してくれるZenCoding | Happy My Life

Coda

・Coda で Zen-Coding を使う – p15.jp

TextMate

・TextMate+Zen-Codingで超速コーディング？  |  gaspanik weblog

Eclipse

・Aptana 以外の Eclipse で Zen-Coding を有効にする方法 – OTCHY.NET

Aptana Studio

・Aptana Studio 2.0 日本語化とzen-coding｜skuare.net

こーやってみると、テキストエディタもたくさんあるんですね。

ちなみに自分は「EmEditor」と「さくらエディタ」とWINDOWSデフォルトのメモ帳を使い分けてます。

有料版EmEditor、個人的にはオススメですよー。

関連する投稿

]]> http://smkn.xsrv.jp/blog/2010/03/zen-coding-plugins-summary/feed/ 0 http://smkn.xsrv.jp/blog/2010/03/zen-coding-plugins-summary/ カーナビやGPSのユニークなアイディアを募集！「第3回 あっ!!と驚く位置利用サービスアイデア大募集」 http://feedproxy.google.com/~r/itkiosk/~3/744LZDSjrLk/ http://smkn.xsrv.jp/blog/2010/03/gps-idea-contest/#comments Tue, 02 Mar 2010 04:51:02 +0000 smkn http://smkn.xsrv.jp/blog/?p=1607 「財団法人 衛星測位利用推進センター」というトコで、なんだか面白そうなコンテストを開催しているようなので、サラっとフワっとご紹介。

GPSやカーナビなどといった、いわゆる「衛星測位による位置情報」を用いたユニークなアイディアを広く募集しており、最優秀賞にはなんと20万円！優秀賞にも5万円の賞金が贈呈されるとのコト。

アイディアだけならタダで用意できますし、何か良いネタをお持ちの方はこの機会に是非☆

第3回 あっ!!と驚く位置利用サービスアイデア大募集

今年度に予定されている日本初の測位衛星、準天頂衛星「みちびき」の打ち上げを記念して実施されるコンテストです。

日本の都市部は高い建物が多いため、衛星の可視条件が悪く、測位精度の低さが指摘されていたそうですが、この準天頂衛星「みちびき」は日本のほぼ真上にくるため、GPS測位の精度向上や測位可能な時間・場所が改善されるそうです。

より精度の高いGPSを利用できる事で、もっと面白いユニークなアイディアをカタチに出来るチャンスとなるようです。

ちなみにこの「アイデア大募集」は過去にも2回実施されており、前回のコンテストには177件の応募があったそうです。

最優秀賞が１名、優秀賞が５～６名のようなので、競争率的にも狙いメかもしれません。

本年6月30日まで開催中、アイディアは郵送とメールで受け付けているので、是非ともチャレンジしてみてください！

第3回 あっ!!と驚く位置利用サービスアイデア大募集

実は結構こんなコンテスト系、好きだったりします。

どっかにこーゆーののポータルサイトって無いのかなー。

関連する投稿

]]> http://smkn.xsrv.jp/blog/2010/03/gps-idea-contest/feed/ 0 http://smkn.xsrv.jp/blog/2010/03/gps-idea-contest/ デザイナー必見のオススメFlickrグループ7選+2 http://feedproxy.google.com/~r/itkiosk/~3/Cxnd_64YwVE/ http://smkn.xsrv.jp/blog/2010/03/flickr-good-group/#comments Mon, 01 Mar 2010 05:36:54 +0000 smkn http://smkn.xsrv.jp/blog/?p=1591 web2.0時代の代表的なサイトの一つ、Flickr。 ほとんどの画像がCCライセンスで公開されているので、デザイナーにとってはかなり重宝するサイトの一つであり、実際にアカウント取って活用されてる方も多いんじゃないでしょうか。 そんな画像共有サイトとして不動の地位にあるFlickr、総数43億枚以上（!!）もの画像の中には、綺麗なwebサイトのキャプチャーやアイコン・ロゴなどといったweb関連のものも数多くあります。 もちろんグループとしてジャンル別に分類されているものもありますが、そこは相手も43億、グループだけ取っても膨大な量ですし、さらに同じようなジャンルのグループでも質自体はそれぞれでマチマチだったりします。 なので今回のエントリーでは、質・量ともに素晴らしく自信を持ってオススメできるFlickr内のweb系グループを厳選してご紹介しますよ。 新しい画像も随時更新されるような活発なグループばかりですので、webデザイナーの方のネタ元として参考になれば幸いです。]]> web2.0時代の代表的なサイトの一つ、Flickr。

ほとんどの画像がCCライセンスで公開されているので、デザイナーにとってはかなり重宝するサイトの一つであり、実際にアカウント取って活用されてる方も多いんじゃないでしょうか。

そんな画像共有サイトとして不動の地位にあるFlickr、総数43億枚以上（!!）もの画像の中には、綺麗なwebサイトのキャプチャーやアイコン・ロゴなどといったweb関連のものも数多くあります。

もちろんグループとしてジャンル別に分類されているものもありますが、そこは相手も43億、グループだけ取っても膨大な量ですし、さらに同じようなジャンルのグループでも質自体はそれぞれでマチマチだったりします。

なので今回のエントリーでは、質・量ともに素晴らしく自信を持ってオススメできるFlickr内のweb系グループを厳選してご紹介しますよ。

新しい画像も随時更新されるような活発なグループばかりですので、webデザイナーの方のネタ元として参考になれば幸いです。

デザイナー必見のFlickrグループ：Web Design編

Web Design

1万点以上の画像がある、Flickrの中でも比較的大きな規模のグループです。

かなりハイセンスかつハイクオリティーなページデザインが満載ですので、サイト構築前のネタ集め段階には心強いコト間違いなしです。

Webdesign Inspiration

こちらも上記と同じくページデザインを扱うグループの一つです。

特筆すべきはページデザインと無関係な画像、いわゆる「ノイズ」の少なさ。

ほぼ全てがページデザインの画像なので、とても効率よく見て回るコトが出来るグループです。

web designs

続いてもページデザイン系のグループになります。

ロゴやポスター画像などのノイズがあったり、上記2グループとカブる画像があったりですが、もちろんそこに無い画像も数多くありますので、上記グループでグッと来なかった場合の押さえに良いかもです。

デザイナー必見のFlickrグループ：ロゴ編

Logo Design Pro

C・I（コーポレート・アイデンティティー）やサイトタイトルなど、とにかくロゴが満載のグループです。

ポップなニュアンスからクールなモノまで幅広いテイストを網羅しているので、ロゴ案に悩んだら一見の価値ありまくりですよー。

Design the Logo

アイコン画像や名刺デザインなどのノイズも見受けられますが、上記グループには無い感じのロゴも多数掲載されていまず。

トレードマークみたいなモノをお探しの際なんかでも活用できるグループかと思います。

デザイナー必見のFlickrグループ：アイコン編

Fluid Icons

iPhoneアプリとかで使われてそうなテイストを中心に、数多くのアイコンがあるグループです。

中にはかなり斬新なアイコンもあるので、ネタに困った時に覗いてみるとヒラメキーノしちゃうかもしれませんよ。

Icon Favorites

500個程度と掲載数は少ないですが、プロクオリティーのwebデザインにでも十分使えるアイコンが集められたグループになります。

アイコンらしいアイコンをお探しでしたら上記よりコチラのグループの方がオススメかもしれません。

おまけの2つ

The Business Card

来ましたよビジネスカード！愛すべき名刺デザインギャラリーです。

クリエイティブな名刺って、なんでこんなにテンション上がるんでしょーかね。

Lifehacker Desktop Show and Tell

アルファブロガー・アワード2009に受賞されたライフハッカーさんの恒例シリーズ「～究極のデスクトップを求めて」のネタ元になっているグループです。

デスクトップというインターフェイスも、こうやってみるとまだまだ可能性のカタマリですね。

デザイナーたるもの、常にアンテナは張っておきたいし、そのアンテナの受信感度も受信範囲も、常に向上させていきたいものです。

それにしても43億って何億？すげーなー。サーバとかどーしてんだろ。

関連する投稿

]]> http://smkn.xsrv.jp/blog/2010/03/flickr-good-group/feed/ 0 http://smkn.xsrv.jp/blog/2010/03/flickr-good-group/ 2010年2/21～2/27の週間ブックマーク http://feedproxy.google.com/~r/itkiosk/~3/6chMcjPZK-o/ http://smkn.xsrv.jp/blog/2010/02/2010%e5%b9%b4221%ef%bd%9e227%e3%81%ae%e9%80%b1%e9%96%93%e3%83%96%e3%83%83%e3%82%af%e3%83%9e%e3%83%bc%e3%82%af/#comments Sat, 27 Feb 2010 18:11:09 +0000 smkn http://smkn.xsrv.jp/blog/?p=1599 暑かったり寒かったりスギ花粉だったりと、体調管理の難しい時期に突入していますが、皆様いかがお過ごしでしょうか。

今週は正規表現の基礎や自作デスクトップアプリの作り方みたいな、個人的にもかなりアツい記事をはじめ、高品位なフリー素材なんかも見つかって、なかなかに嬉しい一週間でした。

というコトで、鼻腔の違和感と眼球の痒みに耐えつつ、今週のブックマークの目次からお送りします☆

んじゃ、今週のブックマークの詳細でございますー。

jQuery プラグイン

アイコンをモワッと拡大させる「BubbleUP」

コレは使い勝手良さそう。

ページのフッターに常に便利リンクを固定で表示するためのjQueryプラグイン「jQuery Fubar」

ガクガクしないのはいいですねー。

常に導線を確保しときたいメニューなんかは、こーゆー小ネタで生かしたいですね。

WordPress テーマ

黒がキーカラーの無料テーマ40選

艶のあるブラックってイイですよねー。

PHP Tips

GPS携帯を使った口コミサイト構築

かなり実務に即したような具体的な内容なので、めっちゃ参考になります。

“CakePHP 入門” フォーラム

CakePHP、そろそろ覚えてこーかなー。

正規表現は怖くない

基礎的な部分から、よく使いそうな正規表現のサンプルまで。

サンプルがPHPなのが嬉しいです。

Photoshop Tips

デザイナーの助けになる25のハイクオリティーなPhotoshop用アクション

有料モノも含まれますが、お金出しても全く惜しくないほどのクオリティーのアクションが数多く掲載されてます。

アクションって結構ピンポイントなので、もしそこに当てはまるネタがあったら、買っちゃうのも手だなーと。

各種まとめエントリー情報

サイト公開前に役立ちそうなフリーのツールやWebサービスいろいろ

ブラウザ別チェックやモニタサイズ別のチェックに使えるツールの紹介記事。

いくつか知らんツールもあったので、メモ的に。

Ruby,Python,PHP,JavaScriptでマルチプラットフォームなデスクトップアプリを簡単に作成する

コレは制作欲をそそられますねー。

何にせよ、近年はホントJavaScriptの活用範囲が広がってる感じです。

World Wide Web関連情報

月刊「web creators」のWebサイト移行のお知らせ

実質、雑誌の方は廃刊になるようです。

これからどうやってWEB媒体で盛り上げていくのか、マーケティング観点からも気になってます。

マーケティング関連情報

Google Analyticsで知ったかぶるための10の方法

SEO関連情報

YahooのSEOに関する疑問・質問に物凄い勢いで答えてみる

フリー素材情報

「花満開の桜の樹」の無料ベクター素材（aiファイル）「Freebies_桜」

モバイルサイトに適したアイコン「Mobile Icon Set」

重厚なドラゴン88体を収めたPhotoshop用ブラシファイル

ドコで使うのかは見当も付きませんが、ネタとして珍しいので。

デザイン関連情報

ウェブデザインに黄金比やフィボナッチ数列など数学的な要素を取り入れる方法

凝り固まりすぎてもいけませんが、レイアウト考える時や、何となく配置の収まりが悪い時なんかにはかなり使える知識です。

クリエイティブなポートフォリオサイトに必要な10のトレンド＆具体例まとめ

デザインギャラリー

ネットショップ作成に役立つリソースまとめ

明るくカラフルな40のサイトデザイン

31の勉強になるインターフェイスデザイン

気になったオープンソース

その場でコンテンツを編集するSEO対応したCMS「SEOTOASTER」

日本語もフツーに通りました。

複雑じゃなくて直感的なCMSをお探しなら、一考の価値アリです。

ネタ的ななにか

Bloom Energy、スタートを切る

21世紀のエネルギー革命になり得るものですね、コレ。

ココを押さえたGoogleはさすが。

I’m just sayin’

愛すべき童貞志向とでも言うべきかｗ

ちょっとマニアックな話題でアレですが、nagi ＝ ガゼルだったんですねー！！

リアルタイムでハマってた者として、なんかすっげー嬉しくて鳥肌立ちまくりました。

「もしかしたらオリコン１位も遠くないかもね！」

関連する投稿

]]> http://smkn.xsrv.jp/blog/2010/02/2010%e5%b9%b4221%ef%bd%9e227%e3%81%ae%e9%80%b1%e9%96%93%e3%83%96%e3%83%83%e3%82%af%e3%83%9e%e3%83%bc%e3%82%af/feed/ 0 http://smkn.xsrv.jp/blog/2010/02/2010%e5%b9%b4221%ef%bd%9e227%e3%81%ae%e9%80%b1%e9%96%93%e3%83%96%e3%83%83%e3%82%af%e3%83%9e%e3%83%bc%e3%82%af/ 2010年2/14～2/21の週間ブックマーク http://feedproxy.google.com/~r/itkiosk/~3/hCplvm_xQdo/ http://smkn.xsrv.jp/blog/2010/02/2010%e5%b9%b4214%ef%bd%9e221%e3%81%ae%e9%80%b1%e9%96%93%e3%83%96%e3%83%83%e3%82%af%e3%83%9e%e3%83%bc%e3%82%af/#comments Sat, 20 Feb 2010 21:52:26 +0000 smkn http://smkn.xsrv.jp/blog/?p=1584 なんだか今週は優良情報てんこ盛りの一週間でした。

はてなブックマークで人気になった記事をはじめ、携帯周りのアレコレや、珍しくPhotoshopやIllustratorの無料ブラシデータ、ちょっと自己啓発ちっくなエントリー、さらにはIT系のニュース的なトコまで、結構広範な話題に触れるコトが出来ました。

それでは冬季五輪に目を奪われつつ、まずは今週のブックマークの目次からどーぞ。

んじゃ今週のブックマーク、詳細いっきまーす！

JavaScript ライブラリ

シンプルなソースで拡張性の高いバリデータ『Ketchup Plugin』

HTML Tips

一歩上行く！携帯HTML/XHTMLデザイン・コーディング術(第一弾)

画像入れるとスキマが出来ちゃう時の対応策として、コレは王道かつスタンダードかつ必須知識。

PHP Tips

UK STUDIO – PHPについて適当に

アクセサについての、めっちゃ分かりやすい解説。

PHPで誰でも簡単Webサービス製作！でなんか作って公開した奴ちょっと来い

WEBサービスを公開する際には絶対に知っておくべき、PHPプログラミングでのセキュリティーに関するお話。

真面目にエロサイトを作ってみた【プログラマ編】

実際のシステム設計に関する過程がかなり詳細に書かれてて、とても参考になります。

WordPress Tips

WordPressの使える10のTips

髪の毛を描くのに最適なフリーのPhotoshop用ブラシ

コレはイラスト描く人にはめっちゃありがたいアイテムなんじゃないでしょーか。

くるくるとアーティスティックな流線型のIllustrator用ブラシ「Swirly Curls」

筆テイストのIllustrator用フリーブラシ「fudeline(フデライン)」

和風テイストのデザインには欠かせない、筆っぽい感じのブラシです。

ライセンスも「個人・商用問わず、思う存分使って下さい。」とのコトなので、その際にはありがたく使わせていただきます！

Illustratorで使える無料のブラシセットその１

Illustratorで使える無料のブラシセットその２

World Wide Web関連情報

自宅サーバを無届けで設置すると逮捕される？

今週かなり話題になったニュースですが、こちらの記事を読めば無為な不安は取り除けるのではないかと。

住所を知らない人にTwitter経由でプレゼントを贈れる「ギフトナウ」

ホントtwitter関連のWEBサービスは今バブル期ですねー。

モバイル関連情報

携帯キャリア24社がアプリ配信プラットフォーム整備へ、業界団体WACを設立

先生「はいみんな二人組作ってー。」
au「。。。」

何にせよホントにカタチになったら、かなり大規模なプラットフォームになりそうです。

フリー素材情報

IPAフォントから派生した「Takaoフォント」

貴重な漢字込みのフォントです。

windowsの方はzipファイルの方をダウンロードしてくださいねー。

かなり珍しいメディカルテイストのフリーアイコン60個

使いどころが難しいけど、ユニークでクオリティーももちろん高いので、あえてネタ的に使うのもアリかなと。

ハイクオリティー過ぎる60個のフリーアイコン

これで無料は嬉しすぎる！

デザイン関連情報

真面目にエロサイトを作ってみた【デザイナー編】

「真面目にエロサイトを作ってみた」シリーズのデザイナー版。

目的を明確にしたデザイン、意味のあるデザインだというコトが分かりますね。

デザインギャラリー

めちゃくちゃクリエイティブなRSSアイコン75選

RSSマニアとしては外せないエントリーです。

とにもかくにもクリエイティブです。

インスピレーションが湧きまくる60のWEBデザイン

新しいアイディア満載のサイトデザイン25選

素晴らしい発想の宝庫です。

12の素晴らしいBuddyPress用テーマ

ロゴをデザインするときに使えるチュートリアル＆テクニック30個まとめ

ウェブサイトのレイアウトを一から作成するPhotoshopのチュートリアル集

気になったウェブサービス

入力したHTMLからセレクタを抽出してくれる「Jquery CssGrab」

これは使い方によってはかなりアツいWEBサービスだと思います。

どーにかAPIとかにしてくれないかなー。

気になったサイト

プログラムメモ

PHPやPerl、JavaScriptといったプログラム系のTipsを筆頭に、フリー素材やflashなんかの話題も取り扱っているサイトさんです。

これだけ広範な話題を取り扱うサイトさんもなかなか無いので、ソッコーでRSS購読させていただきました☆

音楽関連サイトリンク集「MUSIC-STYLE」

ミュージシャン必見のリンク集的ポータルサイトです。

いつか音楽系のサイトって作ってみたいなーと思ってるんですが、コレはかなりイメージに近かったです。

camelmasaの開発日記

PHPを中心として、技術系の情報を取り扱っているブログです。

特筆すべきは「インストール」系のエントリー。何をとってもすごく丁寧に詳しく書かれているので、参考になる事請け合いです！

ネタ的ななにか

面白い制度のある会社

こーゆーユニークな風土の会社で働いてみたい。

もしくは作りたいｗ

何か大きなことを成し遂げるときに、最初にやること

「ココからそっちへ」ではなく、「そっちからココを」ってゆー視点なんだなー。

サイトを解析してテーマ曲を作ってくれる『CODE ORGAN』

意味分からんけど、着眼点が面白い！

いやー、冬季オリンピック、正直ナメてたわー。

スキーの大回転とかってヤツ、めっちゃくちゃ面白いんでやんの。

雪山で生身で時速100kmとかいって、正気の沙汰とは思えん！でもすげー興奮する☆

関連する投稿

]]> http://smkn.xsrv.jp/blog/2010/02/2010%e5%b9%b4214%ef%bd%9e221%e3%81%ae%e9%80%b1%e9%96%93%e3%83%96%e3%83%83%e3%82%af%e3%83%9e%e3%83%bc%e3%82%af/feed/ 1 http://smkn.xsrv.jp/blog/2010/02/2010%e5%b9%b4214%ef%bd%9e221%e3%81%ae%e9%80%b1%e9%96%93%e3%83%96%e3%83%83%e3%82%af%e3%83%9e%e3%83%bc%e3%82%af/ htmlSQLよりアツい!?jQueryみたいにセレクタでHTMLをparse(解析)する「PHP Simple HTML DOM Parser」 http://feedproxy.google.com/~r/itkiosk/~3/YYMpm-PM11M/ http://smkn.xsrv.jp/blog/2010/02/php_simple_html_dom_parser/#comments Thu, 18 Feb 2010 19:11:11 +0000 smkn http://smkn.xsrv.jp/blog/?p=1569 真面目にエロサイトを作ってみた【プログラマ編】｜ASTRODEO」や、IDEA*IDEAさんでも紹介されていた、PHPでHTMLをparseするライブラリ「htmlSQL」ですが、解析するHTMLを指定するにはSQLちっくな書き方をするので、SQL自体に触れる機会の少ない方には手を出しにくいシロモノです。 SQLわかんないです＞＜ もっとカンタンにparseしたいぉ☆ってゆー方に全力でゴリ押ししたいのが、今回紹介するMITライセンスのPHPライブラリ「PHP Simple HTML DOM Parser」です！ PHP5で書かれたこの「PHP Simple HTML DOM Parser」の最大の特徴は、解析したいHTMLをセレクタで指定できるってトコ。そう、まるでjQueryのように。 そんなワケで今回のエントリーは、jQueryみたいにセレクタでHTMLをparseできるお手軽PHPライブラリ「PHP Simple HTML DOM Parser」のご紹介です。]]> 今週はてブでも大人気を博した記事「真面目にエロサイトを作ってみた【プログラマ編】｜ASTRODEO」や、IDEA*IDEAさんでも紹介されていた、PHPでHTMLをparseするライブラリ「htmlSQL」ですが、解析するHTMLを指定するにはSQLちっくな書き方をするので、SQL自体に触れる機会の少ない方には手を出しにくいシロモノです。

SQLわかんないです＞＜ もっとカンタンにparseしたいぉ☆ってゆー方に全力でゴリ押ししたいのが、今回紹介するMITライセンスのPHPライブラリ「PHP Simple HTML DOM Parser」です！

PHP5で書かれたこの「PHP Simple HTML DOM Parser」の最大の特徴は、解析したいHTMLをセレクタで指定できるってトコ。そう、まるでjQueryのように。

そんなワケで今回のエントリーは、jQueryみたいにセレクタでHTMLをparseできるお手軽PHPライブラリ「PHP Simple HTML DOM Parser」のご紹介です。

セレクタでHTMLをparseする「PHP Simple HTML DOM Parser」

1.使用するための準備

まずは今回の主人公を狩りに行きましょう。

SourceForge.netの「PHP Simple HTML DOM Parserページ」に行き、緑色のDownloadボタンをクリックすれば自動でダウンロードが開始されます。

落としたフォルダ内の「simple_html_dom.php」ってのが主人公の彼で、他は全部サンプルとかマニュアルとかのファイルになります。

なので、実際に使う際はこの「simple_html_dom.php」だけをアップロードしてください。

2.全体的な基本設定と使用方法

例えば、mixiのトップページにあるロゴ画像を取得したい場合は、下記のように書きます。

<?php
include('../simple_html_dom.php');
$html = file_get_html('http://mixi.jp/home.pl');

foreach($html->find('#headerArea h1 a img') as $e)
    echo $e->outertext;
?>

いやー、なんてjQuery。

２行目でsimple_html_dom.phpを読み込み、３行目で取得したいページのURLを記述します。

で、５行目のfind()の中に、jQueryのような感じで「取得したい部分」を記述します。

あとは６行目で取得する範囲を「outertext」ってカタチで選んでいます。

取得する範囲の指定は、innertext（”取得したい部分”を含まない）、outertext（”取得したい部分”を含む）、plaintext（”取得したい部分”のテキストだけを取得する）といった感じで指定してきます。

例えば下記のように記述すれば、Yahoo画像検索の結果を抽出するコトも余裕で可能です。

<?php
include('../simple_html_dom.php');
$html = file_get_html('http://image-search.yahoo.co.jp/search?ei=UTF-8&fr=top_ga1_sa&p=sexy');

foreach($html->find('#yschres .grid img') as $e)
    echo $e->outertext;
?>

ね？ヤバくね？

3.全体的な基本設定と使用方法

他にも詳しい説明や使い方などは、PHP Simple HTML DOM Parserマニュアルページにてご確認下さい。

idやclassは”div[id=○○○]”みたいな書き方での指定もできるみたいですし、「取得したい部分」のタグ自体を取り出すコトもできるみたいです。

4.最後に

コレを上手に使えば、結構いろんなWEBサービスのネタをカタチにできるんじゃないでしょーか。

現在進行中のプロジェクトですので、もしバグ等を発見した場合はぜひ報告して、より良い未来を築き上げていこうじゃありませんか諸君！

なにはともあれ、このような偉大なライブラリの作者方にご加護と栄光あれ！

PHP Simple HTML DOM Parser

最初htmlSQLを調べてた時、SNOOPYってライセンスGPLじゃん！って思ってアタフタしましたが、どーもhtmlSQLに同梱されてる”snoopy.class.php”ってのはLGPLみたいですね。

それなら外部ライブラリとして使用するには問題なく使えますから、htmlSQLがBSDライセンスってのも合点がつきました。

いやー、ライセンスってムズカシイ。

関連する投稿

]]> http://smkn.xsrv.jp/blog/2010/02/php_simple_html_dom_parser/feed/ 0 http://smkn.xsrv.jp/blog/2010/02/php_simple_html_dom_parser/ Happy birthday 「ITキヲスク」!! http://feedproxy.google.com/~r/itkiosk/~3/cu9WQ76QCxk/ http://smkn.xsrv.jp/blog/2010/02/happy-birthday-to-my-blog/#comments Tue, 16 Feb 2010 18:25:24 +0000 smkn http://smkn.xsrv.jp/blog/?p=1557 ITキヲスクは産声を上げました。 もともと大好きなブログがあって、モノを書くという作業も好きで、そんな「憧れのブロガーのようになれたらいいな」という安直な気持ちと「あわよくば副収入でもｗｗｗ」という邪念の２大原動力に加え、「自分が書いた記事に反応が返ってくる」という面白さと「頑張るほどに増えていくアクセス数」という快感を覚え、まーなんやかんやと１年間続けることが出来ました。 この場を借りて、見に来てくれた方、いつもご覧頂いている方、ITキヲスクをご愛顧くださる皆々様、ホントにありがとうございます！ 最近は当初に比べるまでもなく沢山の方にお越しいただけるようにもなり、楽しい反面「発信する情報に対する責任」というトコも痛感したりしてる次第でもあります。 とにかく、これからもITキヲスクでは有用な情報を提供すべく邁進していく所存ですので、今後ともご指導ご鞭撻の程、なにとぞ宜しくお願いいたしますっ！]]> 昨年の2月10日、別件で借りたサーバの予備ドメインの有効活用というカタチで、このITキヲスクは産声を上げました。

もともと大好きなブログがあって、モノを書くという作業も好きで、そんな「憧れのブロガーのようになれたらいいな」という安直な気持ちと「あわよくば副収入でもｗｗｗ」という邪念の２大原動力に加え、「自分が書いた記事に反応が返ってくる」という面白さと「頑張るほどに増えていくアクセス数」という快感を覚え、まーなんやかんやと１年間続けることが出来ました。

この場を借りて、見に来てくれた方、いつもご覧頂いている方、ITキヲスクをご愛顧くださる皆々様、ホントにありがとうございます！

最近は当初に比べるまでもなく沢山の方にお越しいただけるようにもなり、楽しい反面「発信する情報に対する責任」というトコも痛感したりしてる次第でもあります。

とにかく、これからもITキヲスクでは有用な情報を提供すべく邁進していく所存ですので、今後ともご指導ご鞭撻の程、なにとぞ宜しくお願いいたしますっ！

ITキヲスク、１年の軌跡：

総セッション数
129,851 セッション
総ページビュー
252,799 ページビュー
エントリー総数
110 記事
コメント総数
86 コメント

実は先週くらいから「１周年記念日は2月17日」という驚愕の勘違いをしてましたｗ

今日、確認してみて自分でもビックリ。

そんな調子でまた１年、頑張っていきますよー！

関連する投稿

]]> http://smkn.xsrv.jp/blog/2010/02/happy-birthday-to-my-blog/feed/ 0 http://smkn.xsrv.jp/blog/2010/02/happy-birthday-to-my-blog/