20 Free One-Page PSD Website Templates 1ページのフリーでモダンなWEBデザインPSD20個まとめ。 1ページデザインの参考にもなりますし素材としても使えそうです。 アプリ用のページなどもあるので、アプリ紹介ページなどにも活用できるかも 関連エントリ HTML5&CSS3で作成されたレスポンシブかつフリーなテンプレートが入手できる「HTML5 Up」 フリーでHTML5ベースのリッチな管理画面テンプレート
過負荷に耐えるWEBサービス作成のための使えるPHPキャッシュテクニックまとめ。 サービス展開というとOSのチューニングや各種インフラソフトウェアのチューニング、更にはWEBアプリプログラム自体の効率化と、幅広い知識が必要になってきますが、PHPでWEBアプリを作る際によく効くキャッシュテクニックを用途・使いどころ別に説明します。 キャッシュをうまく効かせることで大幅に計算量を減らしてより多くのリクエストを少ないマシンで捌くことが出来、コストを下げたり、過負荷の悩みを減らせます。 個人レベルでのWEBサービス開発の場合、サーバ代がお財布を大きく圧迫しますが、最低のコストでサービスを賄うことに繋げられます、ということでPHPでサービス作ってやろうと思っている人は参考にしてみて下さい。 static変数でキャッシュ 特に何も入れなくてもそのまま使えるstatic変数。例えば、関数等で一定の計算
HTML5ビデオの内容に併せて他コンテンツを連動させて切り替えられるフレームワーク「Popcorn.js」 2011年03月10日- Popcorn.js | The HTML5 Video Framework HTML5ビデオの内容に併せて他コンテンツを連動させて切り替えられるフレームワーク「Popcorn.js」 例えば、ビデオ映像の位置を別のブロック要素でGoogle地図で表せたり、ビデオの内容にあわせてTwitterのタイムラインを流したりと、将来的に色々なところでこういった見せ方が見られるのでは?というもので一見の価値はあります。 独自のブラウザベースのオーサリングツールによって、映像と連動要素の組み立ても簡単。 TwitterやFlickr、Google地図に既に対応していますが、プラグインベースなので今後も拡張していくみたい。 映像の位置を地図で別ブロックに表示する例 ビデオ
スマフォサイト作成時に超便利な画像タッチでタッチ位置をズームできる「Cloud Zoom touch」 2011年06月01日- Welcome AlbanX.com スマフォサイト作成時に超便利な画像タッチでタッチ位置をズームできる「Cloud Zoom touch」。 「Cloud Zoom」というjQueryプラグインがあって、こちらへのパッチとして動作するみたい マウスオーバーでも動くみたいですが、iPhone、Androidでタッチした際にも動きます。 指でそのままスライドさせればマウスオーバーのように商品を拡大表示できます。一度iPhoneなどでみてみましょう。 スマートフォン向けのショッピングサイトにおいて、商品のディテールを説明するにはこうしたUIってかなり有用だと思われます。 いかに小さな画面においても詳細を見せるか?という場合において1つの選択肢として覚えておいて損はな
Munee: Standalone PHP 5.3 Asset Optimisation & Manipulation 画像やCSS/JSを動的に圧縮したり結合したりできるコンテンツ配信最適化ツール「Munee」 LESS, SCSS, CoffeeScriptのコンパイル、画像の圧縮・操作、CSS/JSを圧縮して1つのファイルにする、コンテンツのgzip化等、コンテンツ配信に便利なサーバインストール型のツールが公開されています。 サービスを作っているとよく使うコンテンツの最適化機能が入っていてなかなか便利そうです。 例えば、画像の縮小は以下のように指定して動的にリサイズをかけることが可能です。 <img src="/img/my-image.jpg?resize=w[200]h[300]e[true]s[true]"> JavaScriptもカンマ区切りで次のようにしてやればコンバインし
TopCoat FlatなUIが美しいJSレスなUIライブラリ「TopCoat」。 デスクトップ、モバイル対応でレスポンシブ、CSSで作られたUIライブラリです。 Bootstrapよりフラットなデザインが特徴でしょうか。Bootstrapのライバルとなるような物が出てきて、それぞれよい面を取り入れていってほしいですね 関連エントリ フラットで綺麗なUIライブラリFlatUIのモバイルテーマ「FlatUI」 30以上のリッチコンポーネントが詰まったHTML5のUIライブラリ「Zebra」 Bootstrapに追加で使えるjQueryベースのUIライブラリ「w2ui」 jQuery UI をタッチイベントに対応させるライブラリ「jQuery UI Touch Punch」 BootstrapをベースとしたフリーのUIKit「Flat UI」
Youtube動画埋込みを独自デザインにしたい場合に使えるjQueryプラグイン「Custom Youtube Player」 2011年04月05日- Custom YouTube Player Reload ? Scripts and Code Youtube動画埋込みを独自デザインにしたい場合に使えるjQueryプラグイン「Custom Youtube Player」 Youtubeの通常のembedタグを埋めこむと、再生ボタンやらなにやらが付いていたりしますが、次のように、再生ボタンなしに出来ます。 これだけでも、デザインされたサイトには馴染みそうですね。バーがあるとデザイン全体が台なしというケースもありそう。 更に、カーソルを合わせると次のようにカスタマイズされたコントロールバーが現れます。 このコントロールバーは、JavaScript + CSS + 画像でデザインされており、
Writing your own URL shortener in 25 lines of PHP :: Jaisen Mathai PHP25行で書くURL短縮プログラムが公開されています。 案外簡単なので、自分用に使いやすくカスタマイズして公開してみるのもよいかもしれません。 SQLスキーマ、mod_rewriteの設定についても書かれています。 関連エントリ URLを短くできるTinyURLのAPIをPHPから簡単に使える「PEAR::Services_TinyURL」 TinyURLよりも短いURLが作れるURL短縮サービス「u.nu」 分かりやすいURL短縮化サービス『Shorty』
PHPからTwitterを簡単に操作できるPEARパッケージ「Services_Twitter」がアップデート 2010年01月10日- Services_Twitter :: 0.5.0 PHPからTwitterを簡単に操作できるPEARパッケージ「Services_Twitter」がアップデートしたみたいです。 ChangeLogによると次のようなAPIに追加で対応したみたいです。 + added statuses/home_timeline + added statuses/retweeted_by_me + added statuses/retweeted_to_me + added statuses/retweets_of_me + added statuses/retweet + added statuses/retweets + added report_spam metho
コンポーネント満載のスマフォ向けWEBサイト作成フレームワーク「ChocolateChip-UI」 2011年04月06日- ChocolateChip-UI コンポーネント満載のスマフォ向けWEBサイト作成フレームワーク「ChocolateChip-UI」 ダウンロードしたサンプルにはかなりの量のiOSアプリ風のUIが含まれていて、これスマフォサイト用のインタフェース作成には困らないんじゃないかという感じです。 リストのUI 読み込み画面 アイコン付きテーブル ちょっとUIを変えてみる例 サムネイル付きリスト ちょっとデザインを変える 普通のリストも。 デザインを変えたリストも ラベルつきのリスト ボタンや、ON/OFFも スライダーも 背景の模様も自由に変えられます ボタンも豊富 ツールバーデザイン。アイコンを入れたり色々 更にカラフルなボタンやアイコンのみのボタンも。 タブも作れます
Design an Professional Admin/Control Panel Template in Photoshop - Bloom Design Blog | Bloom Design Blog カッコイイWEB管理画面を作成するPhotoshopチュートリアル。 次のようなカッコイイ管理画面をデザインしていく流れが見れます。 単にテンプレートを真似て作るのもいいですが、つくり方も大体わかるというのはいいですね あまりリソースをさけないところではあるかもしれませんが、管理画面も美しくしたい場合に参考にできそうです 関連エントリ 広告デザインのためのPhotoshopチュートリアル15 新しめのPhotoshopテキストエフェクトチュートリアル25 パノラマ写真から小さな惑星を作るPhotoshopチュートリアル 写真のようなリアルなオブジェクトを作るPhotoshopチュート
Notifier.js ? Elegant Javascript notifications | Srirangan 簡単なコードでアイコン付きの分かりやすい通知を実装できる「Notifier.js」。 次のようなオシャレなアイコン付きの通知を表示できます。一定期間が終われば1個のアイテムはそれぞれ消えていく流行りのインタフェースです。 Notifier.success('User registration successful') のように関数を呼び出すだけで簡単に使うことができるので、使いやすそうです。 アイコンを変えるには、success の代わりに info や warning, error, notify といったメソッドを使えばOKです。 後から出てきただけあって、ポップアップなんかよりも邪魔にならないというところがいいですね 関連エントリ ピュアCSSでページ上に通知を出すチ
Free HTML5 Admin Template | MediaLoot フリーでHTML5ベースのリッチな管理画面テンプレート。 次のようなカッコいいHTML5ベースのテンプレートが公開されています。 管理画面ということでIEユーザとかは抜きにして考えてよい場合が増えそうでHTML5にしちゃっても問題無さそうです。 フリーなのにパーツ豊富ですね。ここまで使えていいんでしょうかと思ってしまうほど。 関連エントリ CodeIgniter開発での管理画面作成を楽にする「grocery CRUD」 カッコイイWEB管理画面を作成するPhotoshopチュートリアル TwitterBootstrapベースのテーマやテンプレートが入手できる「WrapBootstrap」
iconmonstr 600以上のシンプルなベクターアイコンが入手できる「iconmonstr」。 次のようなシンプルなベクターアイコンが600種類以上公開されています。 Twitterだと公式アイコンもありますし、若干アレンジしたデザインのものもあります。 とにかく種類が豊富でベクターなのでリサイズ可能というところでのアイコンをお探しの方には調度良いかも。 全体的にクオリティは統一されていて使いやすそうです 関連エントリ RetinaディスプレイOKなアプリ用PSDアイコン350 綺麗にデザインされたピクトグラムアイコン100個セット iOSのAppアイコン作成用PSDテンプレート フリーのアイコンフォント10まとめ
Responsive Aeon Framework - 12Columns - Grid レスポンシブなレイアウト実装に使える軽量フレームワーク「Responsive Aeon」 1行で12のカラムを基本として、<div>でレイアウトを組んでいくものです。 簡単に覚えられて、簡単に使えそうです HTMLも次のように、他のフレームワーク同様、分かりやすくなってます。 配布ファイルに含まれるものとしては、CSSとJSのの他、faviconや、iphone用アイコンのテンプレート、Photoshop, イラレのグリッド素材も含まれています 複雑なレイアウトでレスポンシブにしたいという場合の1つ選択肢として覚えておいてもよさそう。 関連エントリ 秀逸なレスポンシブWEBデザイン50のサンプル レスポンシブなjQueryスライダー実装プラグイン8個 フリーでレスポンシブなWordPressテーマ28
Swatch Book with CSS3 and jQuery | Codrops 超リアルな単語帳っぽいものを作るCSS3+jQueryチュートリアル。 次のような綺麗なデザインの単語帳っぽいものを実装するチュートリアルです。クリックすればインタラクティブに回転等を加えながら動くのが特徴です。 CSS3によって秀逸にデザインされているため、質感はかなり美しく、更にアニメーション等の動きが加わることでよりリアルになってます。 若干動きがもっさりしているようですが、一度見ておいて損はないデモです 一昔前は、ちょっとWEBのデザインが上手であればプロに間違われるなんてこともありましたが、こういうのが当たり前になってくると、プロとアマの差がどんどん広がってくるのかもしれませんね。 関連エントリ CSS3でシャレオツなリストを作るチュートリアル コンテンツをアニメーションさせつつ切り替えるタブを
jQuery UI をタッチイベントに対応させるライブラリ「jQuery UI Touch Punch」 2012年07月11日- jQuery UI Touch Punch - Touch Event Support for jQuery UI jQuery UI をタッチイベントに対応させるライブラリ「jQuery UI Touch Punch」 jquery と jquery ui の後に読み込んで、<script>$('#widget').draggable();</script> のようにコードを書くと、ドラッグ&ドロップやリサイズ、ソート、オートコンプリート等の機能がiPhone, Android, iPadでも問題なく使えるようになるそう。 jQuery UI ベースのサイトでスマートデバイスに簡単に対応できるということでなかなか素晴らしい。 タッチイベントでドラッグ&ドロッ
10 Pinterest-Like WordPress Themes Pinterest風のWordPressテーマ集。 超人気のPinterestのUIはなかなか凄いと思っていますが、WordPressであのUIをテーマにしちゃおうというテーマ集です。 WordPressテーマになっても良い感じです。 どれも有償ですが50ドル前後と安価なので自分で作るより時間を節約できそう 関連エントリ フリーでレスポンシブなWordPressテーマ28 新しめのWordPressテーマ40 TwitterBootstrapを使ったWordPressテーマ「BootstrapWP」 フリーのハイクオリティでレスポンシブなWordPressテーマ30
gmaps.js ? the easiest way to use Google Maps ストレス無しでGoogleマップを使ったサイトが作れる「gmaps.js」 Googleマップのサイトへの実装が本当に簡単で、かつ多機能なライブラリのご紹介です 簡単なマップを出すのに必要なコードは以下。 表示させるdivと緯度経度を指定するだけです 出来ることリストは以下 マップのクリック、ドラッグ時のイベントハンドラ実装 マーカー付与 ジオロケーション・ジオコーディング マップオーバーレイ マップ上のコンテキストメニュー実装 地図上の区画指定 目的地までのルート描画 静的な画像をマップ表示 などなど超多機能。 Googleマップ使うかもしれない場合は覚えておいて損はありません 関連エントリ Googleマップ関連のjQueryプラグインとチュートリアル集 スマホやタブレットでGoogleマップ風
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く