テキストを要素内にうまく収めてはみ出させないjQueryプラグイン「trunk8」:phpspot開発日誌
trunk8 | Rick Viscomi テキストを要素内にうまく収めてはみ出させないjQueryプラグイン「trunk8」 WEB開発に携わる人なら必ず経験する、要素からのテキストのはみ出しやレイアウト崩れ。 指定したサイズの要素ないのテキストは、どんなものが入ってきても綺麗にまるめたい、という場合に使えます。 元のテキストが以下のようにあったとします。 スクリプトを読み込んだ後、$(elem).trunk8(); とJSで記述すると次のように一瞬で1行に収めることができます。 （オプションで行数指定も可能） 綺麗に要素内に収める「もっと読む」も次のように実現できます。 省略バージョンはきっちり枠内にはまっていますね。これをJSとライブラリレスで実現するのはなかなか難しい所がありますね。 これは便利。 関連エントリ テキストをブロックの中にフィットするように自動リサイズできる「jQue
Bootstrapで矢印を描くのなら「Bootstrap Arrows」:phpspot開発日誌
Bootstrap Arrows Bootstrapで矢印を描くのなら「Bootstrap Arrows」 全国の矢印好きの諸君。こんにちは。もうPhotoshopで矢印を描いて画像を作ってアップロードなんていうことは必要ない。 <span> に簡単なclassをつけるだけで、向きも、長さも、色だって、自由自在。 しかも、次のような美しい矢印が描画できる。センス云々の話ではなく、class="arrow" として rel で角度を指定するだけで美しい矢印が描けるのだ。 色んなUIライブラリはあれど、矢印まで描けるとなるともう選択肢は限られる。 これでBootstrapを使わない理由は一切なくなったのだ。 関連エントリ TwitterBootstrapベースのWYSIWYGエディタ「bootstrap-wysihtml5」 Twitter BootStrap に追加できる５つのコンポーネント
CSS3アニメーションをWebブラウザ上で作成&実行·Stylie MOONGIFT
StylieはCSS3のキーフレームベースのアニメーションをグラフィカルに設定できるソフトウェアです。 CSSでアニメーションを実行できるのは知られていますが、その実装となるとかなり面倒な雰囲気があります。しかしStylieを使えばグラフィカルに簡単に設定が可能です。 デフォルトの表示です。左から右へボールが流れていきます。 単純に流れる以外の動きも指定できます。 こんな感じで曲線にすることも。始点と終点はドラッグで移動できます。 対応ブラウザを選択することでCSSの内容が変化します。 StylieはRekapiというアニメーションライブラリをベースにしています。そのための設定をグラフィカルに指定できるツールと言えそうです。ボールの画像も自由に指定できるので、色々試してみてください。 StylieはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されて
奇麗なデザインのタグによるフィルタリングライブラリ·Filtrify MOONGIFT
Filtrifyはタグ情報をつけたアイテムをフィルタリングして表示するJavaScriptライブラリです。 データをタグで管理するケースはよくありますが、その見せ方は様々です。一例としてFiltrifyを紹介します。とてもエレガントにタグ付けされた情報を一覧化、フィルタリングできます。 全て表示されている場合です。 メニューを出してタグを指定します。カテゴリごとのアイテム数も出ています。 タグの指定は複数できます。 指定すればより絞り込まれていきます。 タグは複数のカテゴリで作成できます。 二つ目を指定すればより少なくなります。 消してしまうほか、ハイライトにすることもできます。 選択肢を表示しているデモです。 data-*を選択肢に利用するデモです。 ページネートも可能です。 一つのアイテムには複数のカテゴリ以下に複数のタグをつけられます。アパレルで言えば取り扱いサイズ、色、季節、対象性
iPhoneのホーム画面風アプリはいかが·SESpringBoard MOONGIFT
SESpringBoardはSpringBoard風UIのランチャーアプリです。 多数の機能を持ち合わせたiOSアプリを提供する場合、ホーム画面風にアイコンを並べて表示すると都合がいいかも知れません。そのUIの参考にSESpringBoardを紹介します。 起動しました。多数のアイコンがSpringBoardのように並んでいます。 左右のフリックで画面を切り替えられます。 長押しで編集モードに入ります。×をタップして削除できますが、並び替えはできません。 アイコンをタップするとビューになります。右上のアイコンをタップするとSpringBoard風画面に戻ります。 SESpringBoardはアイコンごとに削除できるかどうかのプロパティを持っています。そのため常に表示しておきたいものをそのままに、後はユーザが自由に必要に応じて変更できるようになります。今後バッチやアイコンの移動と言った機能が
Apacheのファイル一覧を一変させるテーマ·Apaxy MOONGIFT
ApaxyはApacheのmod_autoindex用のデザインテーマです。 Apacheでmod_autoindexを使うと自動でディレクトリ内のファイル一覧が作成されます。それをカスタマイズし、格好いい表示にしてくれるのがApaxyです。 かつてここまで格好いいファイル一覧を見たことがあっただろうか…。 もちろんディレクトリをたどれます。 Apaxyは各ファイルの拡張子によってアイコンを表示しています。実に80種類近くのアイコンが登録されています。またヘッダーやフッターを追加できるので独自のメッセージを流すことも可能です。 ApaxyはJavaScript/CSS製のオープンソース・ソフトウェア（Public Domain）です。 MOONGIFTはこう見る 最近はクラウドストレージの動きが活発です。Dropbox、Windows Azure Storage、Google Drive、
入力チェックやカラムの絞り込みもできるデータベースメンテナンススクリプト·Lazy Mofo MOONGIFT
Lazy Mofoはマスタメンテナンス画面を生成するPHPスクリプトです。 Web開発時においてデータベースを直接見ようと思った時によく使われるのがphpMyAdminかと思います。しかしphpMyAdminを開発者以外の方が使うのは難しいかも知れません。そこで試してみたいのがLazy Mofoです。 トップページです。データがテーブルで一覧表示されています。 新規追加ページ。 検索もできます。 編集ページ。 Lazy Mofoはプログラム中でテーブルを指定してメンテナンス画面を出力します。プライマリキーの指定もできます。表示フィールドの形式も指定できるのでメンテナンスしやすいでしょう。運営担当者向けにあると便利なソフトウェアです。 汎用性が高いだけにcsrfについても配慮（？）されています（Lazy Mofo自体では検証しないようですが、値は持ち合わせています）。入力チェックもできるなど
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
世界地図でデータをビジュアライズする際に使えるJSライブラリ「DataMaps」:phpspot開発日誌