in-view.js - DOMの表示/非表示になったタイミングでイベント実行 MOONGIFT
Webページの表示を遅くする要素としてJavaScriptがあります。Webページは縦長になりがちで、表示されていない部分も含めて処理を行ってしまうと使えるようになるまで時間がかかってしまいます。 そこで使ってみたいのがin-view.jsです。指定したDOMが表示されている、または非表示になったタイミングでイベントが実行できます。 in-view.jsの使い方 例えば表示されたタイミングでは次のように指定します。 inView('.someSelector').on('enter', doSomething); 逆に消えた時には次のようにします。 inView('.someSelector').on('exit', doSomething); ソーシャルボタンなど、一度だけ実行されればいいものはonceを使います。 inView('.someSelector').once('enter'
Clippy - Web上で画像の表示する形を自在に設定
画像をWebサイトに表示する際には、四角くか画像自体を起動する形に切り抜かないといけないとお思いでしょうか。実際にはCSS3を駆使することで元の画像は変えずに表示する形状を変えることができます。 とはいえそのような表示指定を手作業で行うのはとても面倒です。そこで使ってみたいのがClippyです。 Clippyの使い方 画像はあらかじめ用意されているものから選んでもいいですし、自分で画像を指定することもできます。結果はCSS3の設定で表示されますのでコピーして自分のプロジェクトで使えるでしょう。 ClippyはHTML5/JavaScript/CSS3製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 bennettfeely/Clippy
Gitonomy – PHP製のGit管理サーバ
おお、これは企業で使えそうですよ！ 企業によっては外部にソースコードを預けられないため、自社でGitサーバを構えているところも多いでしょう。しかしそうなると管理画面が欲しくなります。GitHubの管理画面は優秀で、ああいったWebブラウザ上でリポジトリの情報を見たいと思うはずです。 そこで使ってみて欲しいのがGitonomyです。デザインの格好いい、Gitリポジトリマネージャです。 Gitonomyの使い方 GitonomyはPHP + Symfonyの組み合わせで作られていて、Webブラウザ上でGitリポジトリの操作が一通りできるようになっています。ユーザはプロジェクト単位にグループに入り、そこで権限管理される仕組みです。 ソーシャル機能はありませんが、企業ユースであれば十分ではないでしょうか。社内でGitサーバを立てている場合はぜひ導入を検討してみてください。 GitonomyはPHP
レスポンシブなグリッドだけを提供する軽量スタイルシート·fitgrid MOONGIFT
fitgridは本番環境下でも耐えられる軽量なレスポンシブグリッドなスタイルシートです。 レスポンシブなWebデザインを実現するのは大変ですが、Bootstrapを使うとそれっぽさが残ってしまう…。そんなジレンマを感じている方はfitgridを試しましょう。fitgridは軽量なグリッドレイアウトを提供します。 デスクトップサイズでの表示。 1〜4列で細かく制御できます。 タブレットサイズ。幅が狭くなっても奇麗に表示されます。 画像もグリッドに沿っています。 幅を狭くすると画像の並びも変わります。 一番狭くした場合。整然と並んで表示されます。 fitgridは横幅を12に分割してグリッド化します。.fg3といったクラスを使えば4つ並べられる計算です。12を一つ、4を3つといった具合に組み合わせて利用できます。fitgridは軽量であり、本番環境下でも使えるように余計なことはしないように設計
これはいい！ドロップダウンに画像と説明文を追加·ddSlick MOONGIFT
ddSlickはドロップダウンメニューにアイコン、説明文を追加できるjQueryライブラリです。 常々HTMLのコンポーネントは貧弱だと思っていた。特にドロップダウンの使い勝手の悪さったらない。テキストしか表示できず、情報選択のUIとしてあまりに粗雑ではなかろうか。そしてみんなが望んでいたライブラリが登場した。それがddSlickだ！ 見よ、この格好いいドロップダウン！テキストに加えて画像が表示できるようになっています！ ダイナミックに変更も可能です。まず普通のドロップダウン。実にいけてない。 じゃじゃーん！ もちろん普通のドロップダウンライクに値が取得できます。選択した項目のデータも取れます。 外部から値を与えて表示項目を変更することもできます。 コールバック対応！ デフォルトの選択もできます。 画像を右に寄せられます。 さらに説明をつけて行ごとに高さを可変にもできます。 画像がない場合
PHPの関数をJavaScript上に実装·PHP.JS MOONGIFT
PHPの便利な点は色々あるだろうが、その一つに豊富な関数群があるだろう。様々な関数が予め用意されていることで、やりたいことが大抵関数一つでできてしまう。それが他の言語に比べて便利だと感じる人も多いはずだ。 そんな便利な関数群を他の言語で実装しようと言うプロジェクトがこれだ。その対象言語は…JavaScript。 今回紹介するオープンソース・ソフトウェアはPHP.JS、PHPの関数をJavaScriptで実現するソフトウェアだ。 現在、90を越える関数が実現されている。absからはじまって、wordwrapまで、in_arrayやmd5まで用意されている。これだけあれば、PHPとJavaScriptの垣根を越えて活用できるかも知れない。 各関数ごとにページが用意され、変数の種類や返り値の説明ページもある。まるでPHP.netのドキュメントのようだ。これを見れば、各関数ごとに実装方法が分かり、
MOONGIFT: » 必見！JavaScriptのalert処理にさよならを「Blackbird」:オープンソースを毎日紹介
※ 画面は公式サイトデモより JavaScriptのデバッグによく利用されるものと言えば、alertだろう。簡単に使えて便利な関数だが、ブラウザの処理が止まってしまったり、長文の表示が難しいなどデメリットも数多い。 alertとお別れするためのJavaScriptデバッグツール そこで使ってみたいのがBlackbirdだ。Google Code上で公開されているオープンソースのJavaScriptアラートだ。 Blackbirdは見た目の格好いいフローティングダイアログにログを表示できる。デバッグ、インフォ、ウォーニング、エラー、プロファイルの5つのメッセージパターンが設定できる。Blackbirdのウィンドウでは各メッセージタイプの表示、非表示が切り替えられるようになっている。 表示位置の変更、表示するメッセージの種類が変更できる さらにF2キーを押して表示/非表示を切り替えたり、Shi
MOONGIFT: » 複雑な段組みを可能にするCSSフレームワーク「Emastic」:オープンソースを毎日紹介
雑誌や新聞などでは複雑な段組みを行って、情報を見やすくしている。ネット媒体の場合、あまりそうした点は考慮されず、二段または三段のカラムで構成されることが多い。しかも幾つかのカラムはメニューなどに使うので、文章自体は殆ど組版が施されていない。 CSSだけとは思えないほど細かく制御されている Webはそういった媒体ではない、と言い切ってしまえばそれまでだろう。だが今後情報の電子化は進み、紙媒体は現状維持ないし衰退していくのは間違いない。そうした時に、Webもやはり読ませる形式を求められるようになるのではないだろうか。それを実現するのがこれだ。 今回紹介するオープンソース・ソフトウェアはEmastic、複雑なカラム構成を実現するCSSフレームワークだ。 Emasticはまるで雑誌のような段組みをCSSで実現している。二段、三段、四段の表示を行い、固定幅または表示サイズに合わせて変化とを組み合わせ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
