タグ

ブックマーク / www.moongift.jp (20)

  • JavaScript製の高度なアニメーションライブラリ·tween.js MOONGIFT

    tween.jsはActionScriptのTweenクラスを真似たJavaScriptアニメーションライブラリです。 かつてオンラインでアニメーションを表現しようと思ったならばFlashかGIFアニメーションを使うのが一般的でした。しかし今後JavaScriptの採用が増えていく中では別な作法を学ばなければなりません。そこで今回はJavaScript製のアニメーションライブラリtween.jsを紹介します。 デモ1。四角のエレメントが左右に動き回ります。 1,000のバーが左右に動きます。 4096個のセルが徐々に色を変化させます。 グラフです。様々な描き方に対応しています。 動画の再生に合わせて右に動いていくデモです。同期されているのがポイントです。 デモ動画です。当はもっと速く動きます。 tween.jsはActionScriptのTweenクラスを模して作られているとの事です。

  • マルチプラットフォームで動作するLESS専用エディター·Crunch! MOONGIFT

    Crunch!はLESSコンパイルツール兼エディターです。 CSSの煩わしさから解放してくれる記法が幾つかありますが、今回取り上げるのはLESSです。そしてCrunch!はLESSファイルを編集するためのエディタで、CSSへのコンパイル機能を備えています。 インストールです。Adobe AIRが必要です。 インストール自体はウィザードで進められます。 起動しました。左がファイルブラウザ、右がエディターになります。 ファイルを開いたところです。ハイライト表示に対応しています。 CSSを生成して保存できます。 フォルダを開きました。その内容が左にツリー表示されています。 ファイルツリーはリアルタイムに更新されます。編集したら画面中央のCRUNCH ITを押すとCSSが生成されます。 LESSからCSSを生成するソフトウェアは幾つかありますが、エディタ機能を備えているのはあまり多くありません。A

  • GoogleドキュメントやFlickr、Picasaなどのデータをローカルと自動同期·Social Folders MOONGIFT

    Social Foldersは多数のWebサービスのデータとローカルを同期するソフトウェア+サービスです。 GoogleドキュメントやFacebook、Flickrなど様々なWebサービスにデータをアップロードしている人に朗報です。Social Foldersを使えばそれらのデータをローカルと同期してくれます。Dropbox風に使えて便利です。 インストーラーです。Windows版とMac OSX版があります。今回はMac OSX版です。 インストール実行中。 完了しました。メニューバーに常駐します。 最初にアカウントを作成します。 アカウント作成が完了しました。 次はWeb側で設定を行います。 対応サービスはこれだけあります。GoogleドキュメントやFlickr、Picasaなどと連携できます。 Facebookアカウントと紐づけます。 接続確認中です。 FacebookとInstag

  • jQueryで作られた本格的表計算ソフトウェア「jQuery.sheet」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

    jQuery.sheetはjQueryで作られたWebベースの表計算ソフトウェアです。 業務システムなどではWeb上にテーブルを表示するというケースがよくあります。さらに一歩進んで表計算のように集計したり並び替えたりしたいという無茶な要望が出るかも知れません。そんな時に使ってみたいのがjQuery.sheetです。jQuery製の表計算ソフトウェアです。 カラムはもちろん、グラフの表示までできてしまう格的な表計算ソフトウェアです。 最大化表示。セルの値を参照することもできます。 テキストだけではなくラジオボタン等も使えます。 関数も多彩に用意されています。 編集しているところ。 文字装飾を変更します。メニューから選択できます。 HYPERLINKはその名の通りリンクを埋め込みます。 データにはHTML/XML/JSONが使えます。エクスポートも各フォーマット向けに可能です。 JavaSc

  • スマートフォンに特化することでjQuery API互換ながら5KB以下なJavaScriptライブラリ·Zepto.js MOONGIFT

    Zepto.jsはjQuery API互換のスマートフォンブラウザ向けJavaScriptライブラリ。 Zepto.jsはJavaScript製のオープンソース・ソフトウェア。最近のWebシステム開発ではjQueryを使わないことがなくなったとさえ言えるかもしれない。それくらい頼り切ってしまっている。普通にJavaScriptを書くのが苦しくなるくらいだ。 サンプル。大抵の機能はデスクトップブラウザにも対応。 そのためスマートフォン向けのサイトでもjQueryを使ってしまう。だがデスクトップのように高速な回線でない場合もあるため、jQueryの90KBくらいのサイズは非常に重たいのだ。そこで使ってみたいのがjQuery API互換の軽量ライブラリであるZepto.jsだ。 Zepto.jsは何と5KB以下で提供されている。eachやmap、$を使ったDOMアクセス、Ajax、findなど基

  • 解析データの、グラフ化に。JavaScript製統計解析ライブラリ·jStat MOONGIFT

    jStatはJavaScriptで作られた統計解析ライブラリ。Canvasタグにデータをプロットする。 jStatはJavaScript/jQuery製のオープンソース・ソフトウェア。単純に一覧化された数値では分からない情報も、データをビジュアル化すると見えているものがある。トレンドや偏差が見えると、次の手や分析する上でのきっかけが掴めるようになる。 二つのデータを描画 統計のビジュアル化をする解析言語としてはMATLABやRが有名だ。しかしそうした言語を覚えないとデータのビジュアル化ができないのは面倒だ。Webブラウザ上でもっと手軽にグラフを描くソフトウェアとしてjStatを紹介しよう。 jStatでは多様な統計解析を行うライブラリだ。描画にCanvasを使っているのでHTML5をサポートしたモダンなWebブラウザがサポート対象になっている。またjQueryを使っている。線で描画すること

  • HTML、CSSのリファレンス集·CodeBurner MOONGIFT

    CodeBurnerはFirefox/Adobe AIR/Mac OSX用のフリーウェア。Webデザイナー、プログラマーであれば開発中にリファレンスが見たくなることが多いはずだ。都度Webサイトを検索しても良いが、手軽に使えるリファレンスが手元にあると便利だ。 HTMLタグの検索 特にブラウザ間の誤差があるプロパティなのか否かといった情報は重要だ。そうした情報をつかんでおけばデザインが開発がスムーズになる。多様なプラットフォームに対応しているのがCodeBurnerだ。 CodeBurnerはHTML/CSSのリファレンスを多数のプラットフォームを使って提供している。FirefoxとFirebug向けをはじめ、Adobe AIR、OSX Dashboard、Operaが現在提供されており、今後Dreamweaver版が提供予定になっている。 ソースをクリックすると説明が出る 2ペインの画面

  • H.264にもWebMにも対応したHTML5ベースの動画プレーヤ·VideoJS MOONGIFT

    VideoJSはHTML5製の動画プレーヤ。WordPressやDrupal向けプラグインも提供されている。 VideoJSはHTML5/JavaScript製のオープンソース・ソフトウェア。H.264のライセンス問題が絡んでHTML5のvideoタグにおける動画フォーマットは定まっていない。最近ではGoogleChromeにおけるH.264サポートを止めてしまうという発表まで行っている。 再生画面 Googleはオープンな動画フォーマットとしてWebMを推しているが、Appleは不支持であったりと混沌としている状況だ。だが既にHTML5を巡る動きははじまっている。そんな中開発されたのがVideoJS、HTML5用の動画プレーヤだ。 いくらWebブラウザが対応していると言ってもプレーヤがなければ話にならない。VideoJSはH.264/WebM/Oggに対応した動画プレーヤだ。HTML5

  • 軽量、シンプルなMac OSX用BitTorrentクライアント·Transmission MOONGIFT

    ではいまいち乗り切らない感のあるBitTorrent。多数の人が持っているファイルは素早くダウンロードできるので、日向けのファイルはあまり速くない。だが、海外のものなどはノードも多く、高速にダウンロードが可能だ。 帯域の問題が取りざたされる昨今、そろそろ日でも利用が進められると良いのだが。 今回紹介するオープンソース・ソフトウェアはTransmission、Mac OSX向けのBitTorrentクライアントだ。 BitTorrentの問題として、クライアントソフトウェアが分かりづらいという問題があったように思う。ただでさえtorrentファイルをダウンロードして専用クライアントで読み込ませる必要があると言った手間があるのに、クライアントソフトウェアが高度で分かりづらいとなると致命的だ。 その点、Transmissionは違う。ごくシンプルな画面で簡単にダウンロードが開始できる。t

    軽量、シンプルなMac OSX用BitTorrentクライアント·Transmission MOONGIFT
  • 色々なWebアプリケーションで使えそうなアイコン集·gcons MOONGIFT

    gconsは画像のフリーウェア(オープンソース・ソフトウェアとなっているがライセンスは不明)。WebサイトやWebアプリケーションを開発する時にデザインが成功するか否かを握る割合はとても大きい。文字で一つ一つ説明するのではなく、アイコンをうまく配置することで誤解が避けられたり、ユーザビリティが高くなる効果がある。 こんな2色のアイコンが多数 とは言え、色々なサイトから個々のアイコンを集めてきて使うのはあまりスマートではない。統一感がなく、かえってごちゃごちゃなイメージになってしまう。一つの統一されたテーマの元に提供されているアイコン群、それがgconsだ。 gconsは多彩な画像フォーマット(PNG/JPG/GIF/PSDなど)、かつ12色のアイコンが100個も提供されている。サイズは32×32となっている。バッヂやブックマーク、コンピュータ、ハート、フラグなど多彩な種類が揃っている。これ

    色々なWebアプリケーションで使えそうなアイコン集·gcons MOONGIFT
  • Mac OSX用Cronエディター·Cronnix MOONGIFT

    CronnixはMac OSX用のオープンソース・ソフトウェア。Linuxでよく使われるプログラムの自動起動ツールがCronだ。テキストで一行単位の設定なのでわかりやすいのはいいが、その書き方に慣れるまでは使いこなすのが難しいかもしれない。 メイン画面 単純に日や曜日、時間とプログラムを指定して実行程度であれば、いいがもっと深くCronを知って使いこなしていくならばCronnixを使ってみると良さそうだ。Cronnixを使えばGUIを使って分かりやすくCronの設定が行える。 Cronnixを起動すると設定されているCronが一覧になって表示される。ユーザレベルまたはシステムレベルでの設定が可能だ。そして追加、編集も分かりやすくできる。曜日もチェックボックスを付けていくだけでいい。後は実行するプログラムを選択する。 設定画面 保存すれば自動的に反映される。Cron情報をエクスポートして、別

    Mac OSX用Cronエディター·Cronnix MOONGIFT
  • iPhone向け最適化Webサイトを構築するjQueryライブラリ·jQuery iPhone UI MOONGIFT

    jQuery iPhone UIHTML/JavaScript製のオープンソース・ソフトウェア。iPhone用のWebサイトを構築するニーズが増えてきている。既に幾つかテンプレートもリリースされており、それらを使えば最適化されたインタフェースのサイトが作りやすくなる。 アイコンリスト そうしたライブラリを使う時に重要なのが、どれくらいの機能に対応しているかだ。単純なリストはもちろん、プロフィールページ、画像付きリスト、フォームなど多数のニーズがある。その一つ、JavaScriptを使ったパターンに適合できそうなのがjQuery iPhone UIだ。 jQuery iPhone UIの特徴は名前の通りjQueryを使っていることだろう。同種のライブラリとしてjQTouchがあるが、あちらはがちがちに固まっている雰囲気があるがjQuery iPhone UIは切り離して使えそうだ。HTML

    iPhone向け最適化Webサイトを構築するjQueryライブラリ·jQuery iPhone UI MOONGIFT
  • iPhone向けWebサイトを作るのに最適なテンプレート&JavaScript·moobile MOONGIFT

    moobileはHTML/JavaScript製のフリーウェア(ソースコードは公開されている)。iPhone/Androidを中心とするスマートフォンのシェア拡大は留まることを知らない。モバイルネットワークが発展している限り、この流れは止まることはないだろう。Webサイトを提供する上でもスマートフォンは欠かせない存在になる。 ボタンバー ネイティブアプリを提供する手もあるが、もっと容易なのが最適化されたWebサイトを提供することだ。そもそもネイティブアプリを提供するほどのニーズがないサービスもあるはずだ。そこで使えるのがmoobileになる。 moobileはiPhoneAndroidといったWebKitベースに対応したWebサイトフレームワークだ。HTML5で作成されているのが特徴だ。フォームやボタン、ボタンバーなどのUIをテンプレート化している。これを使えば最適化されたWebサイトが

    iPhone向けWebサイトを作るのに最適なテンプレート&JavaScript·moobile MOONGIFT
  • HTML5の凄さを理解できるHTML5製のプレゼンテーション·HTML5 Slides MOONGIFT

    HTML5 SlidesはHTML製のオープンソース・ソフトウェア。2010年秋に仕様の確定が予定されているHTML5。ビデオタグなどの一部混乱はあるものの、大筋で仕様は固まってきており、SafariやGoogle Chromeなどは率先してHTML5に取り組んでいる。 HTML5に関するプレゼン HTML5で目玉機能になっているのがローカルストレージやオフラインアクセス、データベース、位置情報、SVG/Canvasなどだろう。そんなHTML5の魅力を知ることが出来るプレゼンテーションとしてHTML5 Slidesを紹介しよう。 HTML5 SlidesはHTMLで作られたプレゼンテーションだ。左右の矢印キーを使って読み進めることが出来、Ctrlキーと+/-キーで拡大、縮小表示ができる。内容はずばり、HTML5に関する説明で、プレゼンの途中でHTML5を試せるようになっている。 プレゼン上

    HTML5の凄さを理解できるHTML5製のプレゼンテーション·HTML5 Slides MOONGIFT
  • CSSを使って流れるような3Dイフェクトを実現する·css-vfx MOONGIFT

    css-vfxCSS/JavaScriptによるオープンソース・ソフトウェア。Coolirisというソフトウェアはご存じだろうか。写真をタイル状に並べて、左右に流れるような操作で一覧できる。様々なブラウザ、モバイルで使えるソフトウェアだ。 タイル状に並んだ写真を一気に見渡せる そんなCoolirisの見せ方はとても上品で、操作性も良く使い勝手が良い。あんなインタフェースを自分のサイトでも実現してみたいと言う希望を叶えてくれるのがcss-vfxだ。css-vfxは特別なソフトウェアはいらず、WebKitさえあれば良い。 ターゲットはモバイルだ。PC版のWebKit(SafariやGoogle Chrome)ではうまく動かないかも知れない。iPhoneAndroidからアクセスすれば、そのすごさが分かるはずだ。指で弾くと写真が左右に流れていく。奥行きを感じさせる作りはスピード感もあってとて

    CSSを使って流れるような3Dイフェクトを実現する·css-vfx MOONGIFT
  • 縦書き表記をサポートするテキストレイアウトエンジン·Nehan MOONGIFT

    NehanはJavaScript製のオープンソース・ソフトウェア。コンピュータはアメリカ発とあって、左から右に表記されるのが基だ。アラビア語のように右から左に表記される場合もあるが、それでも横に流れるのは変わらない。日語のように縦に書かれることは考慮されていない。 だが日人である以上、慣れはあるとは言え縦書きの方が分かりやすい。それは今後電子書籍が流行っていく中で必ずネックになるはずだ。とは言え出力自体縦書きにするのは難しい。そこで表示だけを切り替えるのがNehanだ。 NehanはHTMLでは通常通り横向きに書かれている文章をJavaScriptを使って縦書きに変換する。カギ括弧など単純に縦に並べると問題のある文字は画像を使って置き換えてくれる。これによってぐんと見やすい状態になる。 実際の使い方としてはclassの中に幅、高さ、フォントサイズを指定する程度で良い。特に何も考えずに

    縦書き表記をサポートするテキストレイアウトエンジン·Nehan MOONGIFT
  • 使っていないパソコンをメディアサーバ化する·VortexBox MOONGIFT

    古いパソコンの上手な使い道は何だろうか。ファイルサーバにしたり、子供用にしたりするアイディアもあるが、ここではメディアサーバにする案を紹介したい。HDD容量をうマルチメディアファイルをメインマシンに入れるのではなく、古いパソコンの中に入れてしまうのだ。 ブラウザを使ったメディアサーバ もちろんそのメディアを簡単に利用できるようでなければ意味がない。そこでOSとしてメディアサーバに特化したVortexBoxを使おう。 今回紹介するオープンソース・ソフトウェアはVortexBox、Fedora 10をベースにしたメディアサーバディストリビューションだ。 VortexBoxはインストールだけであれば殆ど自動で行える。起動すると自動的にWebサーバが立ち上がり、9000番のポートでメディアサーバとしての機能が利用できる。実際の利用は外部のマシンからブラウザ経由になる。 設定画面 筆者環境ではプレ

    使っていないパソコンをメディアサーバ化する·VortexBox MOONGIFT
  • 恐れ入った…。まさにビジュアルプログラミング·SIKULI MOONGIFT

    SIKULIはWindows/Mac OSX/Linux向けのオープンソース・ソフトウェア。プログラムを自動操作するソフトウェア多い。そうしたソフトウェアは大抵プログラムをパス指定で呼び出し、ウィンドウの名前や入力欄のオブジェクト名で操作を行う。 だがそれではあまりに分かりづらい。ちょっとしたウィンドウの位置で動作が変わったりする。ウィンドウが開くまで数秒待ったりしても、必ずうまくいくとは限らない。だがSIKULIを使えばうまくいきそうな気がする。SIKULIはまさにビジュアルでプログラミングするからだ。 SIKULIはアップルスクリプトのように簡単なアプリケーションの自動操作を行う。clickやswitchApp(アプリケーション呼び出し)、type(キー入力)などの命令が利用できる。ここまでは普通だ。だが普通ではないのはクリックする対象や画面上の探す対象をスクリーンショットで指定できる

    恐れ入った…。まさにビジュアルプログラミング·SIKULI MOONGIFT
  • ついに!iPhoneでもFlashが表示できるライブラリ·Gordon MOONGIFT

    GordonはJavaScript製のオープンソース・ソフトウェア。iPhoneの最大の欠点とされるのがFlashの表示が未対応という点だ。それによって利用できないサイトがいかに多いことか。今しばらくはAppleの対応は見込めないとあって、我慢の日々が続くだろう。 アニメーションにも対応している だがただ指をくわえて待っていても意味がない。技術者たるもの無理といわれているからこそ挑戦する価値があるのだ。そして一部において問題を乗り越え、見事iPhoneでもFlashを使えるようにしたのがGordonだ。決めてはFlashのSVG化だ。 単なるドローの表示はもちろん、アニメーションについても一部対応している。描画は元のFlashファイルとほぼ変わらず、とても良好な結果だ。もちろん動画や音楽を再生するようなプレーヤレベルはできないが、将来的にはFlashバナー程度ならいけそうだ。 iPhone

    ついに!iPhoneでもFlashが表示できるライブラリ·Gordon MOONGIFT
  • 本を買わずに図書館で借りる手助けに·Libron MOONGIFT

    LibronはFirefoxまたはSafari用のフリーウェア(ソースコードは公開されている)。技術書のようなものは別として、書籍は一度全部読むと二回、三回と読むことはあまり多くない。むしろ一回目を読まずに積まれているの方が多いかも知れない。 東京都内の図書館が利用できる そう考えるとわざわざ書棚のスペースを狭めるよりも、図書館で借りるという選択肢の方が節約にもつながりそうだ。とは言え、欲しい図書館にあるとは限らない。その調べる手間を軽減してくれるのがLibronだ。FirefoxのGreasemonkey、SafariのGreaseKitを使って操作するソフトウェアだ。 Libronをインストールすると、Amazonで書籍を閲覧した時に図書館をリストアップしてくれる。東京都内の図書館に限られるが、図書館に蔵書があれば書籍の下に○○図書館で予約するという文字が出て緑色のボタンが表示さ

    本を買わずに図書館で借りる手助けに·Libron MOONGIFT
  • 1