tag:egg.tommmmy.com,2009://1 2008-05-28T10:55:24Z Web業界に入りたて、未経験の入門者を応援するサイト。XHTMLやCSSの基礎からFirefox、RSSの使いかたなど。セミナーなども随時受付中。 Movable Type 3.34 tag:egg.tommmmy.com,2008://1.9 2008-05-28T10:50:25Z 2008-05-28T10:55:24Z

RSSリーダーとして使えるとともに、いろいろなウィジェットも追加できるNetvi...

<p>RSSリーダーとして使えるとともに、いろいろなウィジェットも追加できるNetvibes。開発国はフランス。</p> <p><img alt="netvibes" src="http://egg.tommmmy.com/file/rss-netvibes.jpg" width="463" height="405" /> </p> <p>最近では、<a href="http://www.netvibes.com/tommmmy#WEB/ネタ系">my public page</a>というのが加わり、自分のフィードをpublicに公開できるようになりました。おすすめのRSSなどを入れておいて、共有することもできます。</p> <h4>コンテンツを追加する</h4> <p><img alt="netvibes：コンテンツを追加する" src="http://egg.tommmmy.com/file/rss-netvibes-add3.jpg" width="463" height="600" /> </p> <h5>カテゴリで検索する</h5> <p>各カテゴリに振り分けられた中から、検索できます。</p> <p>人気のウィジェット/人気ブログ(英語)/ニュース/ビジネス/スポーツ/音楽/アート、エンターテイメント/テクノロジー/ゲーム　など</p> <h5>おすすめウィジェット</h5> <p>ウィジェットの中で人気の高いものが出ています。天気予報やタスクリストなど、どの環境からでもチェックできるので便利です。<br /> FlickrやTwitterなどのウィジェットや、Gmail、Yahooメール、hotmailなどのメールチェックウィジェット、検索ウィジェット等、用途にあわせてたくさん使えます。</p> <h5>フィードを追加する</h5> <p>各ブログやニュースのRSSフィードを追加します。URLを入力してフィードを追加するだけです。</p> <h4>Ajaxによる自由自在な情報の整理</h4> <p>Ajaxの技術を使っているので、Web上であってもデスクトップのwindowの移動ように、ドラッグ＆ドロップにてコンテンツを好きなところへ持っていくことができます。</p> <p><img alt="netvibes：コンテンツを移動.jpg" src="http://egg.tommmmy.com/file/rss-netvibes-move.jpg" width="463" height="324" /> </p> <p>また、各列の幅を変えたりすることもできます。</p> <p><img alt="netvibes：幅を変える" src="http://egg.tommmmy.com/file/rss-netvibes-width.jpg" width="463" height="256" /> </p> <h5>タブによる情報の整理</h5> <p>タブを自由に作ることができるので、どのような記事をまとめたものか、分類していくことができます。</p> <p>たとえば、Web（ネタ）/Web（友だち）/Private（友だち）など</p> <h5>自分にあった見やすい配置で使い方が無限大</h5> <p>今までにはなかった「ユーザーが自分で」</p> <h4>Web2.0の集大成？</h4> <p>利用者が柔軟なカスタマイズをできる、という点から、NetvibesはWeb2.0の集大成といっても過言ではないほど。デスクトップアプリケーションならまだわかるものの、ネットサービス上でここまで可能になったのは、まさにAjaxという技術のおかげ。どこからでもチェックでき、その状態が保存できるのは本当に便利です。</p> <h3>リンク</h3> <ul> <li><a href="http://www.netvibes.com/">Netvibes</a></li> </ul> <img src="http://feeds.feedburner.com/~r/web-egg/~4/uNSyul76luk" height="1" width="1"/> http://egg.tommmmy.com/2008/05/netvibes.php tag:egg.tommmmy.com,2008://1.8 2008-05-26T09:08:03Z 2008-05-26T10:01:35Z

最近、どのサイトにもだいたいこのようなマークを見かけると思いますが、いったいなん...

<p>最近、どのサイトにもだいたいこのようなマークを見かけると思いますが、いったいなんでしょうか。</p> <p><img alt="rssアイコン" src="http://egg.tommmmy.com/file/rss-feed.jpg" width="96" height="96" /></p> <h4>RSSとは？</h4> <p>RSSフィードなどと呼ばれたりするこのアイコン。詳しくしくみまで書くと難しいのでここでは使い方をメインに紹介します。</p> <ul> <li>RDF Site Summary（RSS 0.9とRSS 1.0）</li> <li>Rich Site Summary（RSS 0.91）</li> <li>Really Simple Syndication（RSS 2.0）</li> </ul> <blockquote> 上記の様に"RSS"という語には、名称の異なる複数の規格が存在しており、それぞれ記述方法や用途が異なるために、多少の混乱が見られる。<br /> 日本語サイトでは、普及しているRSSのほとんどがRSS 1.0を用いているため、一般には、RSSはRDF Site Summaryとして認識されている。RDFとはResource Description Framework の略である。 <cite>（<a href="http://ja.wikipedia.org/wiki/RSS">Wikipedia</a>）</cite> </blockquote> <p>ブログやニュースサイトによく設置してありますが、かんたんに言うと新しい記事のタイトル、本文、日付などをピックアップした情報集です。</p> <p>しかし、サイトのRSSなどを見たところで、下のような情報が出るだけで、いまいち使い方がわからない方も多いと思います。（ブラウザによって見え方は異なります）</p> <p><img alt="rss-browser.jpg" src="http://egg.tommmmy.com/file/rss-browser.jpg" width="463" height="500" /> </p> <h4>RSSを使って便利なネットサーフィン</h4> <p>このRSSですが、単体では上記のようにあまり役に立ちません。これを、「RSSリーダー」と呼ばれるアプリケーションやネットサービスに登録することで、便利に使うことができます。</p> <h5>RSSリーダー（アプリケーション）</h5> <p>個々のパソコンにインストールして使う、アプリケーションソフト。</p> <ul> <li>emsemble/emsemble petit（mac用） </li> </ul> <h5>RSSの使えるネットサービス</h5> <p>パソコンにインストールして使うものではなく、ネット上で各サービスにログインして使うもの。個人ページ（パーソナライズド）として利用できるサイトもあります。出先やネットカフェなどでもかんたんにチェック可能。</p> <ul> <li><a href="#">iGoogle</a></li> <li><a href="#">Netvibes</a></li> <li><a href="#">Yahoo!リーダー</a></li> <li><a href="#">gooリーダー</a></li> <li><a href="#">はてなRSSリーダー</a></li> </ul> <p>各サービス、ソフトについてはリンク先にて詳しく解説しています。</p> <p>たくさんのサービスやアプリケーションがありますが、これらの中から自分にあうものを探していくことが必要になります。ちなみに、すべて無料になります。</p> <p>ちなみに、tommmmyのおすすめは<a href="#">Netvibes</a>です。</p> <h4>リンク</h4> <ul> <li><a href="http://ja.wikipedia.org/wiki/RSS">RSS（Wikipedia）</a></li> </ul> <img src="http://feeds.feedburner.com/~r/web-egg/~4/yGS-D_5OeXk" height="1" width="1"/> http://egg.tommmmy.com/2008/05/rss.php tag:egg.tommmmy.com,2008://1.7 2008-05-26T08:07:54Z 2008-05-26T08:09:19Z

Twitterのレスは、「レス」などという項目はないのですが、かんたんです。 ...

<p>Twitterのレスは、「レス」などという項目はないのですが、かんたんです。</p> <p>相手の発言の最後に「返信」を表すアイコンがあります。こちらをクリックすると、自分の発言の先頭に「@tommmmy」というのが自動で入力されますが、このあとに自分のメッセージを入力するだけでOKです。</p> <p><img alt="tw-res.jpg" src="http://egg.tommmmy.com/file/tw-res.jpg" width="463" height="137" /> </p> <p>もしくは、自分で発言の先頭に「@tommmmy」と入力してもかまいません。これで、tommmmy宛のレスとなります。</p> <h3>リンク</h3> <ul> <li><a href="http://twitter.com/home">Twitter</a></li> </ul> <img src="http://feeds.feedburner.com/~r/web-egg/~4/uVtAMtu2Pnw" height="1" width="1"/> http://egg.tommmmy.com/2008/05/post_1.php tag:egg.tommmmy.com,2008://1.6 2008-05-26T07:50:31Z 2008-05-26T07:58:26Z

フォローとは？ mixiでいう「マイミク」が、このTwitterでは「follo...

<h4>フォローとは？</h4> <p><a href="http://mixi.jp/">mixi</a>でいう「マイミク」が、このTwitterでは「follor（フォロー）」という形で表されます。</p> <p>そして、このfollowはマイミクのように双方向性ではなく、一方通行でも成り立ちます。ですので、こちらがfollowをしていても相手がfollowしてくるとは限りませんし、逆もそうです。</p> <p><img alt="mixi-twitter" src="http://egg.tommmmy.com/file/mixi-twitter.jpg" width="463" height="137" /> </p> <p>顔を合わせたことのない人であっても、ブログやコメントなどでやりとりをしたことある人であれば、わりと気軽にfollowしてみると、相手もきちんとfollowしてきてくれます。</p> <h4>知らない人とつながるのをプラスにとるか、マイナスにとるか</h4> <p>普通、知らない人とつながったり話をしたりするのは抵抗があったり、こわいと思うかもしれませんが、Webの業界では「匿名性のネットワーク」というのがいちばんの特徴。逆にいうと、知ってる人ばかりの間で集まっているばかりでは、情報にかたよりが出てきてしまうこともあります。なので、この匿名性のネットワークという特徴を生かして情報源にするのもよし、新たなネットワークの輪を広げることもよし。</p> <p>実際の話、Twitterなどでつながっていれば、セミナーなどで顔を合わせたときに、「あ、tommmmyさんだ」ということで話がしやすかったり、みんなの輪に入りやすかったりします。</p> <h4>フォローしてみよう</h4> <p>これを読んでやってみたいな、と思った方は、さっそく筆者の<a href="http://twitter.com/tommmmy">tommmmy</a>をフォローしてみてください。また、そこからつながっている方もフォローしてみてください。</p> <p>つながるきっかけは、気軽に発言して自分をアピールすること、そして相手の発言にレスをつけること。レスをつけてもらって悪い気がする人はいませんので、ぜひつけてみてほしいです。</p> <h3>リンク</h3> <ul> <li><a href="http://mixi.jp/">mixi</a></li> <li><a href="http://twitter.com/home">Twitter</a></li> </ul> <img src="http://feeds.feedburner.com/~r/web-egg/~4/RS2T2EcJztQ" height="1" width="1"/> http://egg.tommmmy.com/2008/05/post.php tag:egg.tommmmy.com,2008://1.5 2008-05-24T18:09:54Z 2008-05-26T07:48:09Z

Twitter（トゥイッター、ツイッター）は個々のユーザーが「つぶやき」を投稿し...

<blockquote>Twitter（トゥイッター、ツイッター）は個々のユーザーが「つぶやき」を投稿し合うことでつながるコミュニケーション・サービス。米Obvious社（現在のTwitter社）が開発し、2006年7月にサービスを始めた。<cite>（Wikipedia）</cite></blockquote> <p>コミュニケーションサービスのひとつです。ブログやチャットのようなものです。</p> <h5>Twitterの特徴</h5> <p>各ユーザーが「つぶやき」を投稿します。つぶやきなので、ブログほど文章化する必要もありません。思っていることをそのままひとこと、投稿するだけです。</p> <p>また、チャットがリアルタイムにレスが返ってくるのに対して、Twitterの場合は相手がサイトを見ていないとレスが返ってきません。逆に「気が向いたら」レスをすればいいというのが暗黙の了解になっているので、必ずしもレスをつけなくてもいいのです。</p> <p>これにより、各ユーザーはゆる〜くつながっていることができます。レスはしなくてもよい、でも相手がどのようなことを考えて発言しているかはわかる、という、拘束感を感じないサービスで、Web制作者をはじめ、ずっとパソコンに向かっている時間が長い人はライフハックとして使っている場合が多いのです。</p> <h3>リンク</h3> <ul> <li><a href="http://www.google.co.jp/url?sa=t&amp;ct=res&amp;cd=1&amp;url=http%3A//ja.wikipedia.org/wiki/Twitter&amp;ei=8Go6SJ71Hp24sQKttPDICg&amp;usg=AFQjCNG-3ge9LzlGq_z7EzRJEevbkRSUFA&amp;sig2=AVbYq8z8WNvfB1JVDqQdBg">Wikipedia（Twitter）</a></li> <li><a href="http://twitter.com/home">Twitter</a></li> </ul> <img src="http://feeds.feedburner.com/~r/web-egg/~4/iy1Ab3PCAGw" height="1" width="1"/> http://egg.tommmmy.com/2008/05/twitter.php tag:egg.tommmmy.com,2008://1.4 2008-05-17T15:58:58Z 2008-05-17T16:19:55Z

以前は、Infoaxiaさんが管理をされていましたが、ミナトラボさんへ管理が委譲...

<p>以前は、<a href="http://www.infoaxia.com/tools/webdeveloper/">Infoaxiaさん</a>が管理をされていましたが、<a href="http://lab.tubonotubo.jp/">ミナトラボさん</a>へ管理が委譲したようです。</p> <p>開発者は、米国の<a href="http://chrispederick.com/work/web-developer/">Chris Pederick氏</a>。</p> <p>詳しい機能などは、上記ミナトラボさんのサイト<br /> <a href="http://lab.tubonotubo.jp/tools/webdeveloper/">『Web Developer 1.1.4 日本語版 』の機能一覧</a><br /> にて紹介されているので割愛させていただきますが、使っていて個人的に「これはスゲー！」と思ったことを書いていきますね。</p> <h4>WebDeveloperのすばらしいところ</h4> <h5>CSS</h5> <ul> <li>CSSをショートカットで外したりつけたりできる。（Shift＋Ctrl＋s）</li> <li>CSSをその場で一時的に編集でき、どこがどのように変わったかをリアルタイムに確認できる。（サイトそのもののCSSは変わりません）</li> </ul> <h5>画像</h5> <ul> <li>altを表示</li> <li>titleを表示</li> <li>画像を非表示にしたときにどう見えるのか</li> </ul> <h5>枠表示</h5> <ul> <li>ブロックレベル要素を枠で囲えるので、どのようなボックス構造になっているのかがよくわかる。（marginがどこまでかかっているか、など）</li> <li>同じくh（見出し）要素も枠で囲えるので、どこをどのような見出しを使っているのかがすぐにわかる。</li> </ul> <h5>サイズ変更</h5> <ul> <li>ズームイン、アウトができる。</li> <li>ウィンドウサイズ関係</li> </ul> <h5>各ツール</h5> <ul> <li>HTML-lintやW3Cのサービスを使って、ボタンひとつで各ソースの構文をチェックできる。</li> </ul> <h5>情報</h5> <ul> <li>マウスがある場所のボックスの入れ子構造が表示される。</li> </ul> <p>これらのことって当たり前なんですが、それをやるまでにけっこうめんどくさかったりすることばかり。（たとえばファイルとCSSをそれぞれダウンロードしてDreamweaverで開いて解析したりとか・・・）<br /> それを全部ボタンひとつで可能にしてくれるのが、このWeb Developer。<br /> これを使わずしてサイトの解析なんか、できません。</p> <p>わたしも出来上がったサイトをチェックするときは、必ずFirefox＋Web Developerを使っています。<br /> 制作者には、必須なアドオンのひとつです。</p> <h4>ダウンロード</h4> <p><a href="http://lab.tubonotubo.jp/tools/webdeveloper/">アドオン：Web Developer</a></p> <img src="http://feeds.feedburner.com/~r/web-egg/~4/VT3SwcieMCo" height="1" width="1"/> http://egg.tommmmy.com/2008/05/web_developer.php tag:egg.tommmmy.com,2008://1.3 2008-05-17T15:37:20Z 2008-05-17T16:17:16Z

Web業界の人は必ず使っている、Firefox。 具体的にどんなところがすぐ...

<p>Web業界の人は必ず使っている、Firefox。<br /> 具体的にどんなところがすぐれているのでしょうか？</p> <h4>さまざまな拡張機能をつけ、自分好みにカスタマイズすることができる（アドオン）</h4> <p>いちばん特徴的なのはコレ！Web業界人が癖になる理由です。<br /> 具体的には・・・</p> <h4>ソースコードの解析</h4> <p>制作者にとって、他サイトのソースコードをみて解析することほど勉強になることはありません。</p> <p>今まで、ブラウザメニューからソースを開き、そこからいちいちCSSファイルを探し当て、新たに開いてダウンロードして・・・などというめんどくさいことをしていませんでしたか？<br /> Firefoxさえあれば、一度にHTML、CSSを解析することができます。</p> <h5>関連するアドオン</h5> <ul> <li><a href="#">HTML Validator</a></li> <li><a href="#">Fire Bug</a></li> <li><a href="http://egg.tommmmy.com/2008/05/web_developer.php">Web Developper</a></li> <li><a href="#">Aardvark</a></li> <li><a href="#">CSSMate</a></li> </ul> <h4>デザインの解析</h4> <h5>関連するアドオン</h5> <ul> <li><a href="#">Measure It</a></li> <li><a href="#">Pearl Crescent Page Saver </a></li> </ul> <h4>ブラウザ確認用</h4> <p>制作・コーディングしたサイトは、各ブラウザで表示のチェックをしなければなりません。たとえば、Firefoxではきちんと見れていても、IEで見れなければ、プロとして失格です。<br /> （IEには固有の「バグ」というものが存在し、なかなか一筋縄ではいきません。→<a href="#">IEのバグ</a>について）</p> <p>基本的にはFirefoxで表示確認をし、きちんと表示されていることを確認してからIEで確認をします。</p> <p>しかし、この作業が意外とめんどくさい。<br /> 両方のブラウザを立ち上げて・・・意外と重いものです。</p> <p>そこで便利なツール。Firefoxを立ち上げているのに、その中で他のブラウザによる表示を確認できます。</p> <h5>関連するアドオン</h5> <ul> <li><a href="#">IE Tab</a></li> <li><a href="#">OperaView</a></li> </ul> <h4>その他便利機能</h4> <ul> <li><a href="#">Gmail Notifier</a><br /> すみっこにGmailのアイコンを表示させ、ログインしたアカウントにメールが来るとお知らせしてくれます。</li> <li><a href="#">Copy URL</a><br /> 右クリックから、かんたんにページのURLやタイトルなどをコピーできるようになります。</li> <li>スタイルシートに全対応（InternetExploreの場合、記述はあっていてもおかしな動きをする「バグ」が存在する）</li> <li>さまざまな拡張機能をつけ、自分好みにカスタマイズすることができる（アドオン）</li> <li>オープンソースである（開発者にとってもやさしい）</li> </ul> <h4>さっそく使ってみよう！</h4> <p>これは、単なる概要にすぎません。<br /> もっと詳しく見たい方は、上記URLをクリックしてそれぞれの機能をチェックしてみてください。</p> <p>実際にインストールしてみよう！という方は、こちらをご参考にどうぞ。<br /> <a href="http://firefox.geckodev.org/">Mozilla Firefoxまとめサイト</a></p> <img src="http://feeds.feedburner.com/~r/web-egg/~4/GVVkbW3bXIo" height="1" width="1"/> http://egg.tommmmy.com/2008/05/firefox.php