Google Feed APIで3分マッシュアップ (1/2)
特定のテーマに関する情報を集めた、ポータル的なWebサイトを作りたい――。そんなとき、JavaScriptを使って、他のWebサイトのフィードから情報を得て、そのサイトの最新情報を表示できると便利です。 しかし、普通の方法ではできません。というのも、JavaScriptでフィードを読み込むのに使う「XMLHttpRequest」オブジェクトでは、セキュリティ上、異なるドメイン（クロスドメイン）とのやり取りが制限されているためです。そこで、「Google AJAX Feed API」を使いましょう。 Google AJAX Feed APIは、指定したフィードをGoogleのサーバー側で取得し、JSON（JavaScript Object Notation）と呼ばれるJavaScript専用のデータ形式に変換します。変換されたデータは、JSONP（JavaScript Object Nota
MOONGIFT: » 複雑な段組みを可能にするCSSフレームワーク「Emastic」:オープンソースを毎日紹介
雑誌や新聞などでは複雑な段組みを行って、情報を見やすくしている。ネット媒体の場合、あまりそうした点は考慮されず、二段または三段のカラムで構成されることが多い。しかも幾つかのカラムはメニューなどに使うので、文章自体は殆ど組版が施されていない。 CSSだけとは思えないほど細かく制御されている Webはそういった媒体ではない、と言い切ってしまえばそれまでだろう。だが今後情報の電子化は進み、紙媒体は現状維持ないし衰退していくのは間違いない。そうした時に、Webもやはり読ませる形式を求められるようになるのではないだろうか。それを実現するのがこれだ。 今回紹介するオープンソース・ソフトウェアはEmastic、複雑なカラム構成を実現するCSSフレームワークだ。 Emasticはまるで雑誌のような段組みをCSSで実現している。二段、三段、四段の表示を行い、固定幅または表示サイズに合わせて変化とを組み合わせ
Googleドキュメントのデザインを自由に変更できるようになったので試す｜WEBマーケティングブログ
「CSSがいじれるようになった」とは言ってもあまり目新しさも感じないようにも。。。しかしサンプルを見せられた瞬間に「これは！」と感じざるを得ませ
3キャリア対応ケータイXHTMLのTIPS 8つ : アシアルブログ
最近ケータイサイトの開発を行っているのですが、キャリアや機種によって動作にいろいろと違いがあり、なかなか面倒ですね。 キャリアごとにテンプレートを分けて記述するのは手間なので、基本的に共通テンプレートで記述したいところですが、どうしても振り分けをしないと駄目なこともあるため、今回やってみて気がついた違いなどについてまとめてみました。 なお、いわゆる第三世代携帯電話(DoCoMo FOMA, au WIN, SoftBank/Vodafone 3G)でXHTML対応機種のみを対象としています。 ■文字コード UTF-8で統一して大丈夫そうなのですが、DoCoMoのみ特定の文字(三点リーダーや丸数字など)をフォームから入力した場合に消えてしまったりするようですので、DoCoMoは入出力をShift_JISにする必要があります。 ※上記で特定の文字のひとつとしてあげました三点リーダーですが、UT
アドビの新サイトがすごいことになってる - てっく煮ブログ
まあまあ、何はともあれ、次のキャプチャを見てくれ。これはアドビの「会社情報 > アドビについて」のページの一画面だ。Adobe が先週末にサイトデザインを一新して、何気なく色んなページを見て回っていたときに発見したんだけど、この画像、どう見ても日本語だ。「ディッ」と読める。ん？これ？消費者金融の「ディック」。「ィ」の折れ曲がり具合といい、これとしか思えない。もしや、「消費者金融で借金してでもアドビの製品を買いましょう」というメッセージなのか？何はともあれ、会社情報を表示するページで関連のない別会社の看板を表示して、しかもそれが消費者金融というのは、ちょっといかがなものかと思ってしまう…。いや、消費者金融を悪く言うつもりはないんだけど…。よくあることなのかもね深読みはいいとして、実は英語版の会社情報のページでも同じ画像が使われている。ということで、おそらく日本語が読めない人間が「この写真はク
Photoshop | Web 2.0 スタイルのデザインをするなら - WEBデザイン BLOG
最近はやりのWeb 2.0 スタイルデザインのTipsを紹介しているサイト。Photoshopユーザーには一応、おススメしておく。 プレゼン用のWEBサイトモックページの作成の仕方なんかも紹介しています。 photoshoplab http://www.photoshoplab.com/ PhotoshopのTipsいろいろ Photoshopのさまざなテクニックを紹介しているサイトたちです。時々見に行きます。 以下のサイトたちの方が内容が濃いです。 Good-tutorials http://www.good-tutorials.com/ Photoshop Tips & Tricks http://www.graphic-design.com/Photoshop/ SweDesignz - Adobe Photoshop: http://www.swedesignz.com/phot
ミクシィデザイン変更で大混乱 ビスタもマックも使えない！
大手SNS「mixi」（ミクシィ）が2007年10月1日にデザインをリニューアルしたが、会員から「使えなくなった」「目が痛い」「旧バージョンに戻してほしい」などという要望が殺到し「ミクシィ」内が大混乱している。新バージョンをなんとかしてほしい、と訴えるコミュは20近くも誕生し数千人が参加。「元に戻してほしい」という起案に対し、約13,500の会員が賛同している。 「トップページはレイアウトがガタガタ」 今回のリニューアルは、「ホーム」検索窓の項目を増設し、「日記」などの各コンテンツをダイレクトに検索できたり、動画掲載サイズやコミュニティ名の表示を拡大、「最新レビュー」などをサムネイル画像で表示など、これまでより分かりやすく楽しんでもらおうというのが狙いだった。しかし、フタを開けてみると数々の不具合が会員から指摘された。それを列挙すると、 「トップページはレイアウトがガタガタ。また日記を書こ
mixiに現れたサイドバーの不快感の本質とは : akiyan.com
mixiに現れたサイドバーの不快感の本質とは 2006-02-16 3回に渡ってmixiに絡めてウェサイトデザインにおける横幅について書かせていただいた。相当量のバックリンクを頂き、じつに多くの意見を効率的に集めることができた。その意見の中で多くみられたのが横幅云々ではなく「mixiニュースうざい」「サイドバーうざい」といった感情表現だった。この不快感はどこからくるのだろう？単に邪魔だとかウザいとかいうのは結果でしかない。 答えはシンプルだ。増えたサイドバーの内容がユーザー個人とは無関係だからだ。 サイドバーの内容は上から「広告バナー」「ニュース」「天気」「ミクリィ情報」が並んでいる。どれもユーザーとは無関係な情報だ。ニュースのカテゴリをを興味のあるものに設定したとしても、ユーザー個人との関連性は皆無だ。天気も同様に、便利だけど個人との関連性は無い。さらにユーザーと無関係なだけでなく、もと
Flashは検索エンジンに引っかからないという思い込み
「Flashで作られたコンテンツは、Flash内のテキストを読み取れないから、検索エンジンに引っかからない」 と、思い込んでいましたが違っていたようです。 そして、Googleの検索方法にswfファイルを直接検索するオプションがあるなんてことも知りませんでした。 教えてもらったのは、「Flex2,ActionScript3.0が優れている9の理由とAjaxとの差のコメント」の「始」さんから。 「Googleがswfのファイル読んでるんじゃね？」という記事を教えてもらい、いろいろ調べてみました。 Googleのファイルタイプ指定検索 わかったことは、Googleにはファイルタイプを指定して検索するオプションがあるということ。 以下の「filetype:」コマンドを使うことによって検索できます。 検索ワード filetype:検索ファイル 指定できるのは、FlashのSWFファイルを含む以下の
lockエラー | 月額200円からのレンタルサーバー JSN
まずは最近知って便利だと思ったCSSの小技をひとつ。 文章の最後に、「※（米印）」などで注釈を入れたいときに、CSSのみで行の開始位置を揃えるのにすごくシンプルなやり方がこれ。 .note { padding-left:1em; text-indent:-1em; } <p class=”note”>※米印を使う場合はこいつが便利。<br /> 改行してもこの通り。ちゃんと開始位置が揃ってる。</p> 「padding-left : 1em;」でまず１文字分右に動かして、「text-indent : -1em;」で最初の行だけ１文字分左に出す、ということらしいです。これ考えた人はえらいっすねぇ。 他には開始位置を揃えるいわゆる「ぶら下げ」をCSSでやる場合、<div>タグの入れ子を使ってもいいが、<dl><dt><dd>の定義型リストを使うのがおすすめ。Definition Listの略で
bodyに設定しておくと便利な3つのポイントとおまけ｜CSS HappyLife
CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記を読んで、ボクなりな最初に指定して置くと良いポイントを上げたくなったので書いちゃいます。 むしろこのサイトの方向性的に有った方が便利だよなーと。 書くきっかけを頂き、感謝いたします。 ちなみに、最初に指定しておくポイントってそれぞれだと思うので、一つの参考として読んでいただければ幸いです。 最初にbodyに指定しておくと便利だと思う3つを。 body { background:#FFF url(../img/share/bg.gif) no-repeat left top; font-family:Verdana, "ＭＳ Ｐゴシック", sans-serif; font-size:80%; } じゃあ、詳細について色々書
PCサイトを携帯に対応させるまとめ
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
フォームの入力エラーを吹き出しで教えてくれる JavaScript
■ フォームの入力エラーを吹き出しで教えてくれる JavaScript フォームの validation 関連のライブラリはいくつかありますが、私は以下に紹介するやつをずっと使ってまして、これがかなり気に入ってます。ただ、オレナイズされたコードが随所に含まれていたから紹介する事が出来ないでいたのですが、今回やっと書き直したのでお目見えです。 AJAX を使ってサーバサイドと連携、とかそういう事も全くやってなくて、普通に JavaScript のみで入力のチェックをしてるだけなんで、真新しい事はないんですが。 実際の動作サンプル とりあえず submit ボタンを押せば、全て理解出来るかと思います。 今回は CSS のファイルと画像のファイルといっぱい出来てきてしまっていて、いつもの「読み込ませるだけ」とはちょっと毛色も違い、使うのには事前の準備が必要で面倒です。 いつもの JavaScri
ドラッグ＆ドロップでブログをデザインできる「Canvas for Wordpress」
ブログのテーマやテンプレートを最初から用意されているもの以外のデザインにしようと思うと、様々な知識が必要になり、結局あきらめてしまう人が多いはず。 しかしこの「Canvas for Wordpress」を使えば、自分の好きな機能の部品をドラッグ＆ドロップで配置するだけでお好みデザインのオリジナリティあふれるブログが完成。デザインについてのCSSやPHPの知識は不要。 ダウンロードは以下から。もちろん無料。 Welcome to Canvas http://www.freshpursuits.com/canvas/download ドラッグ＆ドロップで配置した後、それぞれのプラグインの設定もクリックすることで可能になる それぞれのブロックやプラグインについて複製したり削除したりするのも簡単 また、CSSの知識をあまり必要とせずにカラーやフォントを決めることもできます これが完成図 ベースとな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryでweb制作をする時にキープしておきたい30リストまとめ*ホームページを作る人のネタ帳
TechCrunch Japanese アーカイブ » やっとまともなウェブベースのPDFビューア（Issuu）を発見
http://www.designwalker.com/seed/graphicdesign/logo-inspiration/
Kagami - Web2.0風 映りこみ（反射）画像API - Bambino Labs
CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記
WordPressの超クールなテンプレート集:phpspot開発日誌