JSで通知ポップアップを出すライブラリ「PNotify」をご紹介。 サイト内でアラートや通知を表示する際に、画面の隅に表示する今時のライブラリです。 ↑デザインは色や画像の追加など簡単に出来るようになっているので、サイトに合わせて設定しやすくなっています。 スタイルはBootstrap / jQuery UIを組み合わせて簡単に組み込めるようになっています。 興味のある方は下のリンクからデモをご確認ください^^
みなさんはコーディング規約を利用していますか。 個人で開発している時はオレオレルールで良かったのですが、 複数人で開発するようになると共通のルールがあった方がストレス無く開発が出来るようになります。 WEB系の言語のコーディング規約について、調べ物が必要だったので、 まとめたものをブログでもシェアします。 HTML・CSS Google HTML/CSS Style Guide の推奨ガイドラインまとめ HTML5 コーディングガイドライン(HTML5)ver1.0 JavaScript JavaScriptのいろいろなコーディングルールをまとめてみた PHP PHPのコーディング規約 PSR-0、PSR-1、PSR-2、PSR-3とは WordPress コーディング基準 Pear Manual :: 標準コーディング規約 Zend Framework PHP 標準コーディング規約 Ca
Web上で見て触れる、HTML5とCSS3のオンラインサンプルがすごく良かったのでご紹介。 HTML5 & CSS3 Tools and Tutorials パラメータを自由に触りながら、実際に動作している様子をリアルタイムにプレビューする事が可能です。 以下に使っている様子を載せてみます。 ↑設定した項目を選択します。 まずはBox Propertiesを試してみます。 ↑設定可能な項目が表示されます。 パラメータをグリグリいじれちゃいます。 ↑設定した内容はリアルタイムにプレビュー表示されました。 使用するコードと対応するブラウザも教えてくれます。 違うものも試してみましょう。 ↑Videoを設定している所です。 動画ファイルはURLを直接入力して設定します。 ↑プレビューです。 細かいブラウザのバージョンも教えてくれました。 他にも設定可能な項目はたくさんありました。 興味のある方は
これを使うと、漫画風の吹き出しを自由に表示する事が出来るようになります。 吹出しには背景画像が指定されているので、 CSSを変更してオリジナルの吹出しにする事も簡単そうでした。 使い方 以下のようなスクリプトを追加する事で表示する事ができました。 $('h1').grumble({ text: 'ここにメッセージを入れます!', angle: 85, distance: 100, showAfter: 500 }); オプションの説明 text:表示する文章 angle:角度 distance:距離 showAfter:指定した秒数後に表示(ミリ秒) オプショには他にもコールバック処理なんかもありました。 詳細&ダウンロードは下のリンクからどうぞ!
ajaxを使用してデータベースの情報を表示する仕組みは一般的になってきたと言ってもいいと思いますが、 そこまで手をかけたくない小規模の案件も多いですよね。 そんな時に使えそうなのが、CSVをJSONに変換してくれるJavaScriptライブラリ「csonv.js」です。 CSVデータさえアップロードしてもらえば、常に最新の情報を表示する事ができるようになりますよ。 CSVの形式 CSVの作り方には制約があり、最初の行はキー名にする必要があるようです。 データは2行目以降でなければいけないようですね。 文字列の中に,(カンマ)を使いたい場合には、;(セミコロン)区切りでもOKなようです。 使い方 使い方はいたって簡単でCSVのパスを指定するだけです。 var members = Csonv.fetch("path/to/csv/family.csv"); var result = JSON.
ブラウザの互換性を気にせずDOM操作やアニメーション、クッキーを操作したい際に使えるJavaScript「flow.js」をご紹介。 最近ではjQueryオンリーのような気もしますが、いろいろと機能を追加しようとして複数のプラグインを導入すると、だんだん動作が重くなってきます。 なるべく軽量のものが使いたい際の選択肢の一つとして覚えておくために自分用メモです。 まだ試してはいないのですがIE6やSafari2などのモダンブラウザでも動くようなので、なかなか良さそうです。 以下のような機能があるとの事。 DOM Level 3の API操作 アニメーション処理 クッキー管理 フォーム管理の簡素化 XMLHttpRequestのクロスブラウザ対応 ブラウザにはそれぞれ癖があるので、こういったライブラリを使用して間違いや非サポートの処理をしないようにしたいですね。 サンプル class属性にch
ソースコードはオープンソースで公開されていますので、自分でクラウドサーバーを作ってみたい方や興味が有る方におすすめです。 ただ単にファイルを同期するだけでなく、 データ保存にGoogle StorageやAmazon S3、Picasaなどを使用してクラウドに保存しようとするのが特徴です。 もちろん、自分のサーバで構築してFTPやSSHでアップする事もできますよ。 その他にもファイルマネージャとの統合やバージョン管理、クライアント側の暗号化などのセキリティ対策にも力が入れられているようですね。 ↑Growl風の通知も可能。 自分でストレージサービスを作りたい方や、 Dorpboxやsynergyなどの外部サービスにデータを預けるのが心配な場合に使ってみてはいかがですかね。 詳細&ダウンロードは下のリンクからどうぞ。
Gmail風にドラッグ&ドロップでファイルアップロードが出来るjQueryプラグイン「jQuery HTML5 Uploader」が良さそうだったのでご紹介。 HTML5対応ブラウザであれば、ローカルにあるファイルをドラッグするだけでアップロード出来るようになります。 ドラッグ時には複数ファイルを指定できるので、よく添付ファイルを送信するフォームにはおすすめの機能です。 ↑デモの様子。破れた穴の画像にドラッグするとアップされます。 ファイルアップロード中には個々のファイルごとにプログレスバーによる進捗表示も可能です。 使い方 使用するにはライブラリを読み込んで、ファイル送信先のURLを指定すれば良いようです。 ■ JSの読み込み <script type="text/javascript" src="jquery.min.js"></script> <script type="text/j
いつか使いそうなのでエントリー。jQueryを使ってタグを入力するためのプラグインです。 オートコンプリート機能もあるし、カンマで次のタグをどんどん入力できるようになっていてかなり便利そうでした。 使ってみた様子 ↑オートコンプリートの様子 ↑ダブルクリックで編集モードになり、保存とキャンセルボタンが表示されます。 使い方 使い方もシンプルで、オートコンプリートのデータを取得するURLを指定するだけでOKです。 $( "#tagform-full" ).find('input.tag').tagedit({ autocompleteURL: 'server/autocomplete.php', }); 使い勝手が良さそうですね。 詳細&ダウンロードは以下からどうぞ。
料金表や一覧を表示する際に欠かせないテーブルコーディングで、検索や並び替え、ページング、グラフ表示など色々なものがあったので、探しやすいようにjQueryプラグインをまとめてみました! jQuery Visualize HTML5とjQueryを使ってテーブルの値をグラフで表示する事が出来ます。 jquery.csv2table.js エクセルなどで作ったCSVファイルを読み込み、クロスブラウザなテーブル表示を行うjQueryプラグイン。 行の絞り込みや文字列検索などかなり高機能になっています。 jExpand 表、画像、リスト、図やその他の要素を折りたたみ表示する事ができます。 Fixed Header Tables ヘッダーを固定して表示します。Excelでは良く使いますね。 縦に長い表を使う場合に非常に便利です。 treeTable テーブルの中にツリー構造を実装できます。 Flex
円を書く ↑drawArcメソッドで円を書く事ができます。 オプション引数で座標位置とサイズ、色などを指定します。 $("canvas.test").drawArc({ fillStyle: "black", x: 100, y: 100 }); 短形を書いて回転させる ↑rotateCanvasで回転軸の座業と角度を指定します。 $("canvas.test").rotateCanvas({ angle: 45, x: 100, y: 100 }) .drawRect({ fillStyle: "#000", x: 100, y: 100, width: 100, height: 50 }) .restoreCanvas(); グラデーションを作成する ↑gradientメソッドでグラーデーションオブジェクトを作成し、 描画する際に指定するとグラデーションが適用されます。 var lin
Googleの検索結果のキャッシュを削除申請する必要があったので、調べた情報をシェアします。 通常はクロールを待っていればいずれ消えるのですが、緊急性の高い場合には削除申請をする事ですぐに処理されるようです。 1.削除リクエストページへ ↑削除リクエストページから新しい削除リクエストを作成します。 ※削除にはGoogleアカウントが必要になります。 また、事前にウェブマスターツールにてサイト管理者として登録しておいた方が良いようです。 2.削除したいサイトURLを入力 ↑削除申請したいURLを入力します。 大文字と小文字は区別されるようですので、正確に入力します。 3.リクエストを送信 ↑削除したい理由を選択して、リクエスト送信します。 完全に削除するためには404/410 リクエストを返すか、robots.txt や noindex メタタグでページをブロックする必要があるそうです。 ↑
そのまんまなのですが、プログレスバーがCSS3で実装されています。 これをJSで読み込み処理中に使ってあげると、プログレスバーが実装できるようになりますね。 ダウンロードは下のリンクからどうぞ。
「Sammy.js」はURLによって処理を振り分ける事ができるJavaScriptの軽量フレームワークです。 #以降のアドレスを利用してURLルーティングを実装されており、 簡潔に記述することを目指したフレームワークとなっています。 RubyのSinatraというフレームワークにインスパイアされたみたいですね。 わずか16KBしかないのですが、外部ファイルの読み込みやリダイレクト処理などがサポートされており、手軽に使う事ができます。 使い方 jQueryを読み込んだ後に、sammy.jsを読み込みます。 <script src="jquery.js" type="text/javascript"></script> <script src="sammy.js" type="text/javascript"></script> URLに対して実行するアクションを設定します。 JavaScri
JavaScriptでログを表示するのに使えるライブラリ「Blackbird」のご紹介。 出力したいメッセージを指定するだけできれいに整形して表示してくれます。 例えば、以下のようなJavaScriptを実行してみます。 log.debug( 'this is a debug message' ); log.info( 'this is an info message' ); log.warn( 'this is a warning message' ); log.error( 'this is an error message' ); ↑すると、こんな感じで素敵に表示してくれちゃいます。 アイコンと色で視覚的にメッセージを区別することができるので、後から見分けるのも簡単です。 使い方 使い方は簡単で、ファイルをダウンロードした後、headタグ内でJSとCSSを読み込むだけでOKです。 <
フォームのセレクトボックスに画像が使いたい。 そんな時にはjQueryプラグインの作り方を紹介している「Converting jQuery Code to a Plugin」が使えます。 このプラグインを使用すると、セレクトボックスに画像のURLを指定するだけで素敵なプルダウンに変更されます。 指定の方法ですが、data-iconというパラメータを指定するだけで良いようですね。 IEだと若干見た目が違うようですが、使いどころはありそうです。 ちなみにこのtutorialzineというサイトですが、Google App Engineの使い方やPHPの使い方などを詳しく紹介しています。 覚えたい言語のカテゴリがある方は要チェックかもしれません。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く