abcjs JSで楽譜を描画して再生までできる「abcjs」 あまり音楽の知識はありませんが、なんかすごい感じがします 関連エントリ 超カッコいいスクロールエフェクト実装「lax.js」 リッチでカッコいいカラーピッカー「iro.js」 ホバー時にボーダーをアニメーションさせる「Nicebord.js」
abcjs JSで楽譜を描画して再生までできる「abcjs」 あまり音楽の知識はありませんが、なんかすごい感じがします 関連エントリ 超カッコいいスクロールエフェクト実装「lax.js」 リッチでカッコいいカラーピッカー「iro.js」 ホバー時にボーダーをアニメーションさせる「Nicebord.js」
Flat Apple Devices MockUp | GraphicBurger フラットデザインのiOS端末モックアップ。 次のようなフラットなApple端末のモックアップがダウンロード可能。 アプリもフラットですが、アプリ紹介サイトなんかもフラットにする場合はこれまでのリアルなモックからこれに変えるとより馴染みそうですね。 端末種類も豊富で様々な角度から写したモックは便利に使えそう 関連エントリ プログレスバーにもなるフラットなボタン実装デモ フラットな大量のコンポーネントが詰まったフラットなモバイルUIキット「Flatastic Mobile UI Kit」 フリーで使えるフラットでハンサムなBootstrapテンプレ集「Black Tie」 フラットデザインでCSSベースの読込アニメーションいろいろ「SpinKit」
Responsive & Touch-Friendly Audio Player | Codrops レスポンシブ&タッチフレンドリなWEBベースの音楽プレイヤー実装デモ。 次のような美しいインタフェースを持ち、レスポンシブでタッチ端末にも対応したオーディオプレイヤーのコードが公開されています。 これは知っておけば、使えそうですね。 既存のオーディオプレイヤーは沢山あれど、レスポンシブでタッチフレンドリっていうとカスタマイズ等が発生しそうですが、これを覚えていればサンプルをそのまま使えそうです。 関連エントリ シンプルデザインがいい感じのHTML5オーディオプレイヤー「audio.js」 オーディオ機器のボリュームを上げる風インタフェースを作るCSS3&jQueryサンプル
25 Free Vector Icons Pack For Web and Graphic Designers | Icons | Graphic Design Junction WEBサイト制作に使えるベクターアイコンセットx25。 綺麗なアプリケーションアイコンを中心に手書き風のアイコン等がまとまっています。 これだけあればアイコンに困らないってぐらいありますが、作りたい物の印象に合うアイコンを選ぶ際に使えそう 関連エントリ 600以上のシンプルなベクターアイコンが入手できる「iconmonstr」 iOSのAppアイコン作成用PSDテンプレート 超気合の入ったiOSアプリケーションアイコン40 RetinaディスプレイOKなアプリ用PSDアイコン350
jQuery HighchartsTable plugin, from PMSIpilot テーブルをグラフに変換してくれるjQueryプラグイン。 CSVをダウンロードしてExcelでグラフ化、といった事は仕事でよく行う人も多いかと思いますが、jQueryを使ってテーブルをグラフにしちゃおうというプラグインです グラフはSVGで表現されるので非対応ブラウザでは表示ができない点に注意したほうがよさそうですが、管理画面やツールなんかで利用すると便利そうです。 棒グラフ。1つのチャートを比較 線グラフ ミックスバージョン 関連エントリ 様々なグラフを描画できるJavaScriptライブラリ「NVD3.js」 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」 CSS3とjQueryでインタラクティブなグラフを作成するチュートリアル jQuery+HTML5でカッコいいアニメーションす
Pictonic - free メジャーなアプリケーションのアイコンフォント「Pictonic」 DropBoxやAdobeアプリ等のアプリケーションアイコンがフォントになって配布されています。 フォントというよりもベクター形式のアイコンという考えで利用すると便利に使えそう。 白黒のアイコンだったらフォント形式で配布してもらえると拡大縮小しやすくて、Photoshop等開いた時にそのまんま使えるので便利ですね。 関連エントリ 600以上のシンプルなベクターアイコンが入手できる「iconmonstr」 汎用で使えそうな1325個のミニアイコンセット 超気合の入ったiOSアプリケーションアイコン40 iOSのAppアイコン作成用PSDテンプレート フリーのアイコンフォント10まとめ
New Icon Designs Inspired by iOS App Style | Awwwards 芸術的な一度は見ておきたいiOSアプリ風のアイコン。 ちょっとやり過ぎじゃないかと思うぐらいに素晴らしいiOS風アイコンがまとまっていました。 そのままアプリのアイコンにしてみても参考にできるアイデアが豊富です。 こんなアイコンでアプリを配布されたらついダウンロードしてしまうことは間違いありませんね。 関連エントリ 一度見ておいたほうがよい美しすぎるiOSアイコンのデザイン46 iOSのAppアイコン作成用PSDテンプレート 超気合の入ったiOSアプリケーションアイコン40 秀逸なiOSアイコンデザイン45
20 Best Responsive Web Design Examples of 2012 | Social Driver ? | Get with the future. 上手くデザインされたレスポンシブWebサイト20。 大手のサイト等のレスポンシブなデザイン事例は結構参考になりそうです。 デザインする際の参考にできそうです 関連エントリ 秀逸なレスポンシブWEBデザイン50のサンプル フリーでレスポンシブなWordPressテーマ28 レスポンシブなjQueryスライダー実装プラグイン8個 レスポンシブなカルーセル実装jQueryプラグイン「Slastislide」 レスポンシブなフォームを作成するフレームワーク「jq-idealforms」
Chrome ウェブストア - BuiltWith Technology Profiler サイトに使われている技術が丸裸になるChrome拡張「BuiltWith」。 サーバに何を使っているとか、PHPを使っているかとか、jQueryとかのライブラリや、Analyticsが入っているかといった情報を一括で表示してくれるChrome拡張。 サイト上でボタンを押すだけで解析することが出来ます。なんだか恥ずかしいですがこういうツールで調べられちゃうので気をつけましょう ヘッダやソースを見れば当然ながら調べられる情報なんですがボタン一発で調べられるっていうのは便利ですね 関連エントリ Vimの分かりやすいチートシートを見れるChrome拡張「Vim Help」 PHPのエラーなんかをブラウザで確認できるChrome拡張「php-console」 ChromeをiPhoneシミュレーターにできる拡
Android icons 15000ものAndroidアプリ用アイコンセット「Android icons Set」 Android's UI guideline に沿ったアイコンセットが15000も公開されています アイコンセットというのは1つのテイストで揃えたいため、数があるほど使いやすいわけなんですが、15000は驚きですね。 逆に探すのに苦労しそうですが・・(^^;) Photoshopのvector形式で入手できるっぽいです 関連エントリ 商用利用可能なバレンタインデーのアイコンセット10 500以上のモノクロ記号アイコンセット「PICOL」 綺麗なデザインのクレジットカードアイコン15個セット
iPhone・Androidアプリ等に使えるアイコンセット総まとめ:2010 年末に暇な時間にアプリを作ろうなんて思っている方の参考になれば幸いです。 iconSweets 2 Even more free icons by Yummygum iPhone・Android・WEBに使える400以上のアイコンセット「iconSweets 2」 app-bits.com | Slick user interface and icon design 次のようなアイコン64個セット DEFAULT iCON ::: Free Elegant Icons 173のシンプルなアイコンセット 108 Mono Icons: Huge Set of Minimal Icons | Tutorial9 108個のシンプルデザインアイコン Free iphone toolbar icons | Blog |
Icons8 | Order Icons for Windows 8 for Free Windows8風のシンプルさがナイスなアイコンセット「Icons8」。 現在149種類あり、どんどん増えています。ここ最近、こういうシンプルなアイコンはGoogle+といい、色々な場所で増えてきてますね。 毎日見るものは派手じゃないほうがいい場合もありますし、好き嫌いがわかれないという利点もシンプルな物にはありそうです 沢山の人に使ってもらわれるようなサービスを作る場合はこういうシンプルなものがいいかもしれませんね。 関連エントリ デザインが超良い感じのFacebook、Twitter等のソーシャルアイコン用PSDセット ピクトグラムが700種類以上集まったアイコンセット「Pictodeck Icon Set」 アイコンをフォントで実現すると便利だと分かるサンプル
Icon Fonts are Awesome アイコンをフォントで実現すると便利だと分かるサンプル フォントで表現することで色の変更やドロップシャドウやサイズ変更はあとから自由にできますね。 画像編集ツールを使う必要もなく、あとから自由にカスタマイズできるというのはWEBデベロッパにとっては嬉しいです。 ドロップシャドウ。 カラー変更、リサイズも自由。 他にも、CSS3を使った回転やアニメーションなど何でもできそうなところです フォントはfont-faceで指定することでどんなフォントでも使えます。サンプルのフォントはこちら 関連エントリ ユニークなフリーフォント10 WEBページに使えそうなアイコンっぽい図形フォント 指定エレメントのフォントサイズを自由に大小させられるシンプルなjQueryプラグイン「FontSize」 とりあえず入れておくと使えそうな20フォント
streeme - Project Hosting on Google Code PCやスマフォでどこでも持ってる音楽を聴けるHTML5ベースの音楽サーバ「streeme」。 HTML5ベースということでiPhoneやAndroidでも使えるそうです。 サーバ側ではPHPとMySQLサーバが必要。iTunes の XML から読み出しを行えたりもするみたいです。 iPhoneでのアクセスのスクリーンキャストはこちら iPodっぽいUIで音楽を再生できるのが分かります。iPhone上のSafariで動きます デスクトップからのアクセスのスクリーンキャストはこちら ほんとにブラウザベース?というリッチなUIで音楽の再生ができる どこでもブラウザベースで音楽を聴きたい方は試してみるとよいかもしれません。 関連エントリ CSSでクールにデザインされたHTML5動画・音楽プレイヤー実装JS「Medi
飛ぶ前にbit.lyやTinyURL等の短縮URLの飛び先を調べられるjQueryプラグイン「longshore」 2010年08月04日- longSHORE - The missing URL service 飛ぶ前にbit.lyやTinyURL等の短縮URLの飛び先を調べられるjQueryプラグイン「longshore」。 bit.ly なんかで短縮されたURLの上にカーソルを合わせると次のようにポップアップが表示され、リンク先に関する情報が分かります。 なんと、驚くことに545のURL短縮サービスに対応しています。 →対応サービスはこちら 実装は、単にプラグインを読み込むだけで超簡単ですね。 英語部分は直接日本語化しちゃえばすぐ使えそうです。 関連エントリ PHP25行で書くURL短縮プログラム PHPからbit.lyやtr.im等のURL短縮サービスをまとめて扱える「PEAR::
iPhoneやAndroid等クロスプラットフォーム上で動くスマートフォンアプリを作る仕組み色々 2010年10月21日- HTML5/CSS3やJavaScript、Flashを使ってiPhoneやAndroid等クロスプラットフォーム上で動くスマートフォンアプリを作る仕組みを色々と調査してみました。 スマートフォンアプリを作るのであれば効率的にクロスプラットフォーム上で動く物で作りたい、というのは開発者の誰もが思うことではないでしょうか? そんな技術の現時点でのまとめ、更にHTML5によるモバイルアプリ作成のフレームワークについても軽くまとめてみました。 Titanium Mobile HTML5/CSS3やJavaScriptベース→Native並の速度のiPhoneアプリ変換。javascriptをベースとしてアプリ開発を行うスタイルを実現する仕組み naoyaさんの「Titani
HTML5 Showcase: 48 Potential Flash-Killing Demos | Design HTML5のポテンシャルを感じられる48のサンプルサイト。 元エントリでは Flash Killing などという少々ショッキングなタイトルで表されていますが、まさに文字通りの凄いサンプルが多く紹介されています。 HTML5対応ブラウザでどうぞ 現在では、iPhoneやiPadでは既にHTML5は普通に動くので、HTML5はもう次世代というわけではなく、1つのスマートフォン向けのリッチなインターネットコンテンツ実装用の要素として覚えておくべき位置づけになっていますね。 関連エントリ 見ておくべきHTML5サイト集 HTML5のCanvasで動く超クールなデモページ HTML5なページでもIEで印刷した時に崩れないようにする「IE Print Protector」 CSS3とH
The 10 most useful Excel keyboard shortcuts | Microsoft Office | TechRepublic.com 使えるExcelのキーボードショートカット集。 この業界にいると、なんだかんだで仕事でExcelを使うということは避けられない気がしますが、便利そうなExcelのショートカットキーがまとまっていました。 F2で編集するとか、Shift+F2でコメントをいれるとかはかなり使いますね。 バージョンによって使えないものもありそうですが、基本はおさえておくと便利に使えそう。 まあ、このエントリに限らず、「Excel ショートカット」とかで探せば山のように出てきますね。 エクセル(Excel)技道場−エクセルショートカット 3分LifeHacking:入力の手間を省く、10のExcelショートカット - ITmedia Biz.ID EX
20 FireFox Extensions That Every Web Designer Should Know About - CyberKnowledge Blog WebデザイナーのためのFirefoxエクステンション20個。 どれも便利なエクステンションばかりでまさに、Webデザイナー必須のエクステンションですね。 Web Developer Toolbar - 定番のエクステンション。CSSオフ、ブロック要素を枠で囲むなどデザインには必須のツール。 AspellFox - スペルチェッカー RankQuest SEO Toolbar - googleでのサイト順位を得る OperaView - Firefox上でOperaプレビュー IEView - Firefox上でIEプレビュー Total Validator - HTML Validator SEO for
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く