jQuery Timelinr - 年表と画像を組み合わせたスライドショー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上では多彩な表現が可能になっていますが、それ故に自分のこだわった表現をどう実現したら良いか悩んでしまうことがあります。そこでぴったりの表現ができるオープンソース・ソフトウェアがないか探すこともあるでしょう。 今回紹介するjQuery Timelinrもそんなソフトウェアの一つです。まさに自分が探していたものだ、と言う方はいらっしゃるのではないでしょうか。 jQuery Timelinrの使い方 jQuery Timelinrは年表と画像、そして説明を組み合わせたコンテンツを表現できます。こちらは横向き。 矢印やキーボードで次の年に移動できます。 実際に動かすとこんな感じです。画像が大きくなっていくのが良い感じです。 横ではなく縦向きもできます。 jQuery Timelinr
Chartist – レスポンシブ対応のSVGグラフライブラリ
Webは表現力が弱いと言われていますが、特にグラフ周りで苦労することが多いのではないでしょうか。データを単純に一覧表示するのではなく、グラフを用いることでトレンドを知ったり、よりビジュアル的に把握できるようになります。 そこで今回は最新のグラフライブラリ、Chartistを紹介します。SVGで描かれたレスポンシブなグラフライブラリです。 Chartistの使い方 シリーズをJavaScriptの配列で与えるだけ。とても簡単ですね。 ChartistはSVGでグラフを描き、スタイルシートでビジュアルを調整できます。さらにレスポンシブに対応することで幅によってラベルの表示を変更するようになっています。対応ブラウザはIE9以降となっています。 ChartistはJavaScript製のソフトウェア（ライセンスはWTFPL）です。 Chartist - Simple responsive char
Agile Css3 Engine – JavaScriptを使って高度なCSS3アニメーションを実現
CSS3を使えば簡易的なアニメーションや回転もサポートするなど、より高度な表現が自由にできるようになります。とは言え、タイミングをずらしたりするのをすべてスタイルシートで行うのは大変です。 そこでJavaScriptを使ってCSS3を出力しようと言うライブラリがAgile Css3 Engineになります。アニメーション系に強いJavaScriptライブラリです。 Agile Css3 Engineの使い方 Agile Css3 Engineはクロスプラットフォームに対応し、デスクトップからスマートフォンまで幅広く動作します。またキーフレームベースのアニメーションもサポートしています。Agile Css3 Engineを使えばCSS3を使った（CanvasやSVG、WebGLは使っていません！）アニメーション処理が手軽に実装できそうです。 Agile Css3 EngineはJavaScr
Deb.js·JavaScriptのデバッグを効率化する小さなライブラリ MOONGIFT
最近のWebブラウザの進化によってJavaScript開発はとても便利になっています。ブレイクポイントを差し込んだり、コンソールを使うことでどんどん開発が進められるようになっているでしょう。 そんなJavaScript開発をさらに便利にしてくれそうなソフトウェアがDeb.jsです。ごくごく小さなデバッガーです。 Deb.jsの使い方 Chrome ウェブストアで公開されていますので、インストールします。 こちらがインストール画面です。 インストールされるとDebアイコンが追加されます。 こんな感じでURLに?debjsを追加すると自動で読み込まれるようになります。 任意の関数に.deb()を追加するとスタックとレースされるようになります。 引数や返り値、実行時間などもとれて便利です。 色分けもされるので分かりやすいですね。 開発効率向上を考えると、デバッグ方法は色々知っておいて損はないでし
Herlock.js for HTML5 - JavaScriptで高パフォーマンスなゲームを開発できるHerlockのブラウザ版 MOONGIFT
iOS/Androidアプリをワンソースで…というのは誰しもが夢見ることではないでしょうか。しかし現実はそうそう甘くなく、打ちのめされた人も多いでしょう。なんでもワンソースは無理がありますが、一部の分野であればこなせるようにはなっています。 3Dや高機能なゲームであればUnityがあります。もっとカジュアルなゲームであればJavaScriptで開発できるHerlockがあります。そしてさらにHerlockをHTML5として動作させようと言うプロジェクトがHerlock.js for HTML5です。 Herlock.js for HTML5の使い方 例としてこういった図形を描く場合です。 var stg,bmp; new Image( "./img/check.png").onload = function(){ stg = addLayer( new Stage()).content;
Sassmatic - CSS3を使ってダイナミックに画像へフィルタ適用
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 画像の加工処理をやろうとすると、サーバサイドでもJavaScriptでも面倒といった印象がありますよね。特にユーザに選ばせたり、その場でダイナミックにフィルタを適用するなんてのは相当大変です。 そこで使ってみたいのがSassmaticです。SCSSを使ってCSS3だけでフィルタリングを実現するライブラリです。 Sassmaticの使い方 使い方は簡単で、例えば以下のようにHTMLがあったとします。 <div> <img src="img/example.jpg"/> </div> そしてSCSSは以下のように定義します。 @import "compass"; @import "sassmatic.scss"; div { @extend %filter-sanfran; } img
インパクト大！スクロールによるパララックスを実現·Stellar.js MOONGIFT
Stellar.jsは縦横両方のスクロールに対応したパララックスを実現するライブラリです。 最近見かけるようになったパララックス（視差効果）を使ったWebサイト。スクロールによって要素ごとに速度が異なることで面白いイフェクトを生み出します。今回はそんなパララックス効果を演出するライブラリであるStellar.jsを紹介します。 こちらは公式サイトより。 横にスライドします。星の流れはそれぞればらつきがある所が面白いです。 こちらは縦に変化するパターン。 春夏秋冬が表現されています。 画像の切り替わりが格好いいです。 Stellar.jsは縦スクロールはもちろん、横スクロールによるパララックス効果にも対応しています。単純にスライドしていくだけでは分からないスピード感あるイフェクトが提供できるはずです。 Stellar.jsはJavaScript製、MIT Licenseのオープンソース・ソフ
Googleリーダーからこっちへ。シンプルで使い勝手の良さそうなフィードリーダー·CommaFeed MOONGIFT
CommaFeedはJava製、Webベースのフィードリーダーです。 2013年7月でサービス終了になるGoogleリーダー。既に移転先は決まっているでしょうか。まだ、という方はCommaFeedをチェックしてみて下さい。 トップページです。 Googleリーダーへのアクセス権限を求められます（オプションです）。 Googleリーダーに似たUIです。シンプルでいい感じ。 Jキーで読み進めます。この辺りもGoogleリーダーに似ています。 ?キーでヘルプ表示。まだスター機能はなさそう。 設定画面です。カスタムCSSを使えばよりGoogleリーダーに似せられるはず。 インタフェースはGoogleリーダー風で使い勝手が良さそうです。自分で立てる分には広告もなく使えるでしょう。個人的に足りないのはスター機能くらいですが、カスタマイズして追加すれば十分と言えそうです。 CommaFeedはJava製
おすすめ！Photoshopのフォントをもっと選択しやすくする·ConceptualCase MOONGIFT
ConceptualCaseはPhotoshopのフォント表示を階層化し、Font Bookで管理できるようにするソフトウェアです。 Mac OSX版のPhotoshopで作業している時に、フォントを選ぶのがとても面倒に感じていました。あれだけ長く並んでいると、多数のフォントをインストールしている場合に大変です。そこで使ってみたいのがConceptualCaseです。 インストールしていない場合。CS6用ですがCS5でも使えました。 インストールするとこんな感じに。かなり見やすいです。 整頓する時にはFont Bookを使います。 ConceptualCaseはSIMBLプラグインとして提供されるソフトウェアです。インストールした後、Photoshopを起動するとフォント選択が階層化されます。これでFont Bookを使ってリストを管理しておけばすぐに必要なフォントが探し出せるようになるは
Google製。Google Chromeを使ったスクリーンキャプチャツール·Screen Capture (by Google) MOONGIFT
Screen Capture (by Google)はGoogle Chrome上でWebサイトのスクリーンショットを取得、加工できるソフトウェアです。 Webサービスを作っているとスクリーンショットを必要とする機会は多いのではないかと思います。Windowsデフォルトのスクリーンショット機能を使う人はいないと思いますが、今回はScreen Capture (by Google)を紹介します。Chrome上でスクリーンショットの取得、加工が行える便利な機能拡張です。 インストールはChromeウェブストアでできます。 右上のメニューが機能になります。 まず一部だけのキャプチャ。 キャプチャした後、簡易的な編集ができます。 簡単にぼかしが加えられるのは良いかも。 囲んだり線を引いたり文字を追加したりできます。 続いて長いページの場合、上から下までスクロールしてキャプチャできます。 後は見えて
ウィンドウサイズに合わせて自在にJavaScriptを実行する·Response MOONGIFT
ResponseはレスポンシブWebデザインを実現するのに必要な情報を取得できるJavaScriptライブラリです。 レスポンシブデザインを実現する際にスタイルシートだけで全てをこなすのは難しいかも知れません。ウィンドウの幅に応じて最適な見せ方を実現するためにJavaScriptの力が必要ならばResponseを使ってみましょう。 テストの画面です。ウィンドウや画面のサイズが出ています。 ウィンドウサイズを縮めると値がリアルタイムに変化します。 縦のスクロール値も出ます。 各種判定値が用意されています。 ウィンドウサイズによる簡易的な判定も可能です。 もちろんこのページ自体がレスポンシブです。 Responseを使えば現状のウィンドウサイズやスクロール位置などレスポンシブWebデザインを実現するのに必要な情報が一気に取得できます。さらにリサイズなどのコールバックにも対応しているので、表示し
小規模なWebサイトにぴったり。PHP製のメールフォーム·TransmitMail MOONGIFT
TransmitMailは日本製の汎用型メールフォールソフトウェアです。 Webサイトにメールフォームの設置というのはよくあることです。そんな時に使える日本語対応のメールフォームソフトウェアがTransmitMailです。 デモです。多数の入力項目、入力チェックに対応しています。 必須チェックのエラーです。画面上と項目の横と二つ表示されます。 メールアドレスフォーマットのチェックもできます。 半角英数などの文字種チェックもあります。 入力の後、確認画面が表示されます。 完了ページです。 確認メールも送信されて、入力内容の確認ができます。 TransmitMailはPHP5.2以上で動作します。また、マークアップエンジニアが開発したとのことで、Dreamweaverやマークアップエンジニアにとって優しい作りになっています。セッションによって重複送信を防ぐ仕組みがあります。静的サイトにメールフ
長文を分割＆横スクロールで見やすくする·bookreader.js MOONGIFT
Webの発達で日本語であっても横に読まれることが当たり前になりつつある。コンピュータ上では縦に際限なく伸びていくので、縦書きは読みづらいのだろう。だが横向きに書かれていても長文であると見がたくなるのは変わらない。 長文をブラウザ上で読むならこれ 特に小説やコラムなど長文を載せているサイトの場合はそうだ。コンピュータは元々書籍に比べると長文を読むのに適していない上に、レイアウトも読みづらいのでは大変だ。そこで試したいのがbookreader.jsだ。 今回紹介するオープンソース・ソフトウェアはbookreader.js、長文を読みやすくするJavaScriptライブラリだ。 bookreader.jsは専用のJavaScriptとCSSファイルによって縦に続く長文を一定の長さで区切り、続きを右側に表示してくれるスクリプトが。スクロールは矢印キーか画面に表示される矢印のボタンで行う。 次期バー
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
