１つのテキストに複数のハイパーリンクを付与できるjQueryプラグイン「μllinx」:phpspot開発日誌
μllinx - Multi Directional Links jQuery plugin １つのテキストに複数のハイパーリンクを付与できるjQueryプラグイン「μllinx」 通常ハイパーリンクは１テキストをクリックで単一URLに移動しますが、こちらを利用すればポップアップでリンクの選択肢が選べるようになる、というものです。 マークアップ的には以下のようにシンプル。 シンプルですが、ありそうであまりなかったかもしれないプラグインですね 関連エントリ タイル上にエレメントを並べられるjQueryプラグイン「jMosaic」 高解像度のディスプレイ用に2-4倍迄の画像に置き換えられる「jQuery.imgx」 リアルなページめくり効果をもったギャラリーが作れるjQueryプラグイン「Onebook3d」 高機能＆高速なテーブル実装jQueryプラグイン「WATable」 selectの複
PHP,Ruby,JS,HTML,CSSをブラウザ上で開発できるオープンソースIDEエディタ「ICEcoder」:phpspot開発日誌
PHP,Ruby,JS,HTML,CSSをブラウザ上で開発できるオープンソースIDEエディタ「ICEcoder」 2013年05月24日- Browser code editor awesomeness : ICEcoder PHP,Ruby,JS,HTML,CSSをブラウザ上で開発できるオープンソースIDEエディタ「ICEcoder」 ブラウザ上だけどツリービューでファイルを開けたり、タブでファイルを複数開けたりIDE顔負けのインタフェースを持つエディタ。 OSSなので自分のサーバに設置して使うことができます。リモート開発の方法は色々ありますが、Chromeだけでサクサク開発するっていう手法もなかなか便利なのかも。 こういうのを１０年ぐらい前の人に見せてあげたいですね。 そういう意味では１０年後が恐ろしかったりします。 関連エントリ フルスクリーン編集可能なWYSIWYGエディタ実装jQ
新しいamazonのドロップダウンメニューっぽいものが作れるjQueryプラグイン「jQuery-menu-aim」:phpspot開発日誌
新しいamazonのドロップダウンメニューっぽいものが作れるjQueryプラグイン「jQuery-menu-aim」 2013年04月11日- kamens/jQuery-menu-aim GitHub 新しいamazonのドロップダウンメニューっぽいものが作れるjQueryプラグイン「jQuery-menu-aim」 次のような新しいamazonのメニュー。amazonといえば品揃えや安さだけでなく、秀逸なUIによって売上を伸ばしてきたといってもよいと思いますが、新しく実装されたドロップダウンメニューLikeなものを実装できるプラグインです。 デザインは違いますが、動作は同じです。 なかなか汎用的に使えそうなデザインですね。 関連エントリ HTML5＆CSS3なフリーのドロップダウンメニュー２５ レスポンシブなCSSベースのドロップダウンメニュー「Top Drawer」 シンプルだけどデ
レスポンシブでクールなCMS「Bolt」:phpspot開発日誌
Bolt - content management (1.0.2) - The Bolt website. レスポンシブでクールなCMS「Bolt」。 CMSは昔からありますが、レスポンシブでBootstrapベースのクールなCMSがオープンソースソフトウェアとして入手できます。 PHPとRDBによって書かれており、PHPな方にとってはカスタマイズなんかも簡単に出来そうです。設置やカスタマイズも簡単らしいです。 Bootstrapベースのクールなデザインとレスポンシブ対応が最初からなされているという所がポイントですね。 １つの選択肢の１つとして検証してみるのもよさそう 関連エントリ ZendFrameworkベースのCMS兼フレームワーク「Centurion」 ポートフォリオサイト構築専用のPHP＆MySQLなCMS「The Secretary」 ZendFrameworkとExtJSを使
Google,Facebook,Twitter,Tumblr等のAPIを簡単に扱える機能豊富なPHPライブラリセット「Eden」:phpspot開発日誌
Google,Facebook,Twitter,Tumblr等のAPIを簡単に扱える機能豊富なPHPライブラリセット「Eden」 2013年01月08日- Eden PHP Library Google,Facebook,Twitter,Tumblr等のAPIを簡単に扱える機能豊富なPHPライブラリセット「Eden」。 Youtubeやカレンダー、Google+等のGoogleサービス他、ソーシャルサイトのAPIを使った機能を簡単かつ綺麗なコードで実装できる他、PHPのSessionやCookie、String等のコードをオブジェクト指向で扱えるようにする機能などが提供されます。不要な物はダウンロード時にチェックボックスを外して排除することも可能 例えば、ライブラリを使えば、次のようなコードによってGメール経由でメール送信することが可能。 メール送信にかぎらず、Facebookのフレンドを
クールな円形メニューをピュアCSS3で実装するチュートリアル:phpspot開発日誌
The Creation of a CSS3 Clickable, Rotating Menu | InsertHTML クールな円形メニューをピュアCSS3で実装するチュートリアル。 クリックすると回転したり良い感じに立体感が出ていたりアニメーションしたりCSS3の機能をフルに使った円形メニュー。 奇抜なメニューであっと驚かせたいという場合に使えそうです デモページ メニューアイコンもしっかり回転されています。 関連エントリ アニメーションするクールな円形メニューが実装できるjQueryプラグイン「MobilyBlocks」 ピュアCSS3で作られた「path.com」っぽい円形メニュー実装デモ jQueryとCSS3を使ったPath風の円形メニューサンプル ゲームに出てきそうな円形メニュー実装jQueryプラグイン「Pretty Pie Menu」
Facebookのデザインにも負けない超カッコいいタイムラインを作るJSライブラリ「Timeline」:phpspot開発日誌
Facebookのデザインにも負けない超カッコいいタイムラインを作るJSライブラリ「Timeline」 2012年04月02日- Timeline Facebookのデザインにも負けない超カッコいいタイムラインを作るJSライブラリ「Timeline」。 一見スライドショーのようでもありますが、タイムライン付きのスライドショーになっています。何かの歴史を語る時には是非使いたいと思ってしまう程のクオリティです。 スライドショー内にはHTMLならなんでも埋め込めるということでYoutubeやGoogleマップがいい感じにレイアウトされて表示されています。 スライドショーと連動してタイムラインもアニメーションします。タイムライン側をクリックしてスライドショーの位置を選択することも可能。 スライドショー部分はドラッグ＆ドロップで移動することができます タイムライン部分の拡大。う〜ん素晴らしい！ この
Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps」:phpspot開発日誌
jGmaps | jQuery Plugins Googleマップを使った経路案内も一瞬で実装できるjQueryプラグイン「jGmaps」 必要なライブラリを読み込んで、次のようにjgmapsメソッドを呼び出すとGoogleマップによる経路案内の地図と文字による案内情報が出ます。 $('#mapa').jgmaps( { width: 300, height: 300, directions:{ address: ['東京都新宿区', '東京都港区'], usePanel: true, panelId: 'panelDirections' } } ); 次のように、経路が地図に表示されます。 文字による案内情報も表示できます。 会社案内や会場案内なんかもこれで速攻実装できそうですね。 ダウンロードできるサンプルをいじくってみましょう。 地名に日本の場所を漢字で使う場合、文字コードはUTF-
jQueryでページ送りのインタフェースが簡単に作れる「jqPagination」:phpspot開発日誌
jqPagination, a jQuery pagination plugin (obviously) jQueryでページ送りのインタフェースが簡単に作れる「jqPagination」。 次のようなインタフェースのページ送りのインタフェースを簡単に実現できます。 クリック時にコールバックを指定して何ページ目がリクエストされたかを知ることが出来るので、指定ページにJSで飛ばすだけという流れです 実装は次のように決められたマークアップをコードして、コールバックを指定しつつ初期化するだけです。 デザイン等はCSSで調整できそうです。 標準のデザイン的にはスマホなどで使えそうなものになってますね 関連エントリ 面倒なページ分けを簡単実装できる10のスクリプト集
○○の歴史を分かりやすくタイムラインにできるjQueryプラグイン「Timelinr」:phpspot開発日誌
jQuery Timelinr ○○の歴史を分かりやすくタイムラインにできるjQueryプラグイン「Timelinr」。 次のような年をインデックスとしたスライダーを作ることができるjQueryプラグイン。 会社の歴史とか、PHPの歴史とかなんでもいいのでタイムラインをちょっと雰囲気を持たせながら表示させたい場合に使えそうです 年部分をクリックするとかっこよくアニメーションしながらスライドしてくれます。 すべての内容は１個のHTMLに入れられて作るのも楽そうです。 関連エントリ Twitter OAuth認証をポップアップで行うjQueryプラグイン 綺麗なツリービューが実装できるｊQueryプラグイン「jsTree」 RSSやATOMフィードを読み込んで表示できるjQueryプラグイン「FeedEk」
全画面のプレゼンを実装できるjQueryプラグイン「Jquery.ascensor.js」:phpspot開発日誌
Jquery.ascensor.js 全画面のプレゼンを実装できるjQueryプラグイン「Jquery.ascensor.js」 全画面でスライドが切り替わりつつ２次元のスライド移動が可能な機能を実装できるjQueryプラグインです。 各スライドはDIVで記述するので簡単です。 スライド画面右下にスライドのマップのようなものが表示され、これをクリックすることでも移動することが可能です。 単なる横方向のプレゼンではなくて、なかなかオシャレで目を引くプレゼンが作れそうです スライド切り替えはアニメーションされます。 個人的にも、いつものPowerPointをやめてこういうのでやりたいですね 関連エントリ JavaScriptでプレゼンテーションを作る際に使えそうなjQueryプラグイン「Fathom.js」 WEB上で動くプレゼンテーションを作る際に便利なjQueryプラグイン「Awkward
ページの背景全体を広告にするjQueryプラグイン「background banner」:phpspot開発日誌
background banner | jQuery Plugins ページの背景全体を広告にするjQueryプラグイン「background banner」 最近ちょくちょく見かける広告商品の背景広告。コンテンツそのままに背景を広告にしてしまうことでインパクトが大きいプロモーションが出来たりします。 これをjQueryで簡単に実装できてしまうプラグインが公開されています。コンテンツ内はクリックしてもどうにもなりませんが、背景をクリックすると広告ページに移動という機能が作れます。 お客さんの要望なんかでちょっと作ってよ、なんて言われた場合にも覚えておけば難なく実装できそうですね。 実装コードは次のように初期化して使うそうです。 $("#bannerbackground").backgroundbanner($("#content")) 若干改良の余地を残したプラグインかもしれませんが、いざ
JavaScriptコーディング等を書く上でのパフォーマンス確認事項３０:phpspot開発日誌
30 best practices to boost your web application performance - Web User Interface Architect JavaScriptコーディング等を書く上でのパフォーマンス確認事項３０。 自分へのインプット＆メモがてらにちょっとまとめてみます。 JavaScript DOMの操作は可能な限りやめる eval, new Function() は遅いので可能な限り使わない withステートメントを使わない（使った事ないですが） for-in 文ではなく for 文を使う。 ループの中で try-catch ではなく、try-catchの中にループを置く グローバル変数をなるべく使わない aaa+='AAA';aaa+='BBB'; の方が aaa+='AAA'+'BBB';より速い 複数の文字列連結には、Array で文字列
綺麗なデザインで多言語対応、テーマやプラグイン対応のCMS「Fork」:phpspot開発日誌
Fork the Open Source CMS 綺麗なデザインで多言語対応、テーマやプラグイン対応のCMS「Fork」。 管理画面も綺麗で、肝心のページ用のテーマもクールなものが揃っており、WordPressのようにプラグインを追加できたり、アクセス解析画面を統合できたりします。 個人的にいいなと思ったのが、言語ごとにページを管理できる点で、日本語と英語のページを同じCMS内で切り替えて作成できる点。 例えば、スマホアプリなんかの紹介ページで国際展開したい場合なんかにも、言語を切り替えてそれぞれページを作れるので、便利だなと思いました。 管理画面の選択ボックスから言語を選べば編集対象の言語を選べ、それぞれの記事は区別されます。ので国際対応のサイトを作るにも便利 http://demo.fork-cms.com/en や http://demo.fork-cms.com/nl といった感じ
ページ内で文書をコピーした際に勝手に文字を追加できちゃうjQueryプラグイン「Copy ＆ Paste Hijacker」:phpspot開発日誌
ページ内で文書をコピーした際に勝手に文字を追加できちゃうjQueryプラグイン「Copy ＆ Paste Hijacker」 2011年09月08日- Copy & Paste Hijacker | jQuery Plugins ページ内で文書をコピーした際に勝手に文字を追加できちゃうjQueryプラグイン「Copy ＆ Paste Hijacker」。 例えば、ページ内で気になった文書があってCtrl＋Cとか、右クリックして「コピー」した場合、その文書になんらかの文字列を追加することができます。 引用元を追加でコピーしてもらったり、ツイッターアカウントやFacebookアカウントもコピーに追加することができちゃいます。やり過ぎは禁物ですし、嫌がられる場合もありそうなので、あくまで利用者の利便性を高めるために使いたいですが、技術的にも非常に面白かったのでご紹介です。 使い方は次のように初期
横に長くなりがちなテキストも自動でサイズ調整してレイアウトを崩させないjQueryプラグイン「Shorten」:phpspot開発日誌
横に長くなりがちなテキストも自動でサイズ調整してレイアウトを崩させないjQueryプラグイン「Shorten」 2010年12月14日- Shorten - A jQuery Plugin for Truncating Styled Text 横に長くなりがちなテキストも自動でサイズ調整してレイアウトを崩させないjQueryプラグイン「Shorten」。 ブロック要素に長いテキストがあって、折り返されないような場合、レイアウトが崩れてしまいますが、このプラグインを使えば、次のように、長いテキストも最後を ... more のように短くすることが出来ます。 $(element).shorten() メソッドを呼ぶだけですが、width で、収めたいサイズを、tail で、続きへのリンクを設定できたりします。 .shorten({width: 400, tail: '<a href="">..
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
指定要素にボカシ効果を付けられるjQueryプラグイン「blurme」:phpspot開発日誌
SVGグラフィックを手書き風アニメーションさせられる「Lazy Line Painter」:phpspot開発日誌
オンラインで100種類以上の画像加工ができて便利なツール「写真加工.com」:phpspot開発日誌
フリーのWEBサイトテンプレートをダウンロードできる１５サイト:phpspot開発日誌