Famo.us·WebGL/Canvasを使って高度な表現を可能にするJavaScriptフレームワーク MOONGIFT
スマートフォンにおいてWebかネイティブかと言った議論は常にされています。ネイティブアプリは高度なUI/UXを提供する一方、インストールの手間が否めません。Webは速度やUXにおいて見劣りがします。 しかしWeb（HTML5）の進化は止まりません。ついにここまで！というフレームワークがFamo.usです。3Dを備えたレンダーを行うJavaScriptフレームワークになります。 Famo.usの使い方 たくさんのデモが登録されていますので見ていきましょう。 写真と画像の組み合わせ。左右から表示されるアニメーションもあります。 スクロールパララックスエフェクトのデモ。 アニメーションのデモ。 カレンダーの日付を選択するとスケジュールが開きます。アニメーションがスムーズです。 スライドして表示される写真のデモです。 ページ送りのデモ。 天気アプリデモ。ベクター調の表示がいいですね。 タスク管理。
Haroopad - 開発者にぴったりなMarkdownエディタ
マルチプラットフォームで使えますよ！ エンジニア界隈ではMarkdownの認知度が高くなっていますが、その記法が若干特殊なこともあって書きづらいと感じている人は多いはず。そこで使われるのがMarkdownエディタです。 Haroopadもその一つになります。多分に漏れず2ペイン構成で片側がプレビューになっていますが、それ以外にも便利な機能がたくさん揃っているMarkdownエディタになります。 Haroopadの使い方 プレビューはつい縦長になりがちなので、2〜3段で書くと短くていいかもしれませんね。 Haroopadは使ってみた感じ、かなり開発者寄りなMarkdownエディタになっているという印象です。Markdownを使いこなしてがんがんドキュメントを作っていきたいと考える方にはぴったりではないでしょうか。 HaroopadはWindows/Mac OSX/Linux用のオープンソース
Bootflat - フラットUIで格好いいBootstrapテーマ！ MOONGIFT
創造意欲がかき立てられますよ！ Boostrap臭を嫌って導入に踏み切れないという方は多いですが、それもあって多彩なテーマが開発されています。それらと入れ替えると、イメージががらっと変わって見えるはずです。 今回は最近流行のフラットUIを取り入れたBootflatを紹介します。フラット＝角張っているというイメージも壊してくれる素敵なテーマです。 Bootflatのスクリーンショット 今回はスクリーンショット多めで紹介します。 基本カラー。パステル系ではっきりとしていますね。 まずはボタンとボタングループ。 ボタン＋ドロップダウン、ラベル、バッジ、ツールチップなど。 ドロップダウンはもちろん階層対応です。 フォーム。 フォームの横にドロップダウンを付けることもできます。何かと応用できそうですね。 アラート。 タブ。4辺全てに対応しています。 ナビゲーションバー。 パン屑、通知、プログレスバー
Iconion - 素敵なアイコン画像が簡単に作れちゃう！ MOONGIFT
これは素敵すぎる！ アイコン画像の作成は大変です。小さな画像ながら、それを見て内容が理解できないとアイコンとしての意味がありません。最近ではIconfinderのようなサイトもできていますが、色味やサイズがほんの少し合わないと言ったことも多いはずです。 そこで使ってみて欲しいのがIconionです。アイコンのピックアップと設定変更だけで簡単に素敵なアイコン集ができてしまいますよ！ Iconionの使い方 Windows版とMac OSX版がありますのでお好きな方をダウンロードし、起動しましょう。 メイン画面です。これだけでほぼ使い方が分かってしまいますよね。左側にアイコンが並んでいますので好きなものを選択しましょう。 アイコンを選択すると中央のプレビューが変わります。さらにその下にアイコンが登録されます。 色や角丸のサイズなどを自由に変更できます。 さらにスタイルを変更するとまとめて設定が
Bootstrap Admin Theme - Bootstrap3に対応した管理画面テンプレート
これは知っておいて損はないでしょう！ Bootstrapの便利な使いどころとして管理画面があります。管理画面は限られた関係者しか使いませんのでBootstrap臭がしても気にすることはありません。それなりの表示がすぐに実現できるのは使い勝手を向上します。 しかしそんな適当な範囲を超えて実用性のある管理画面を実現できるBootstrapテンプレートがBootstrap Admin Themeです。Bootstarp 3系に対応していますので最新のウィジェットもばりばり使えるでしょう。 Bootstrap Admin Themeの主なページとしては、 ログイン ダッシュボード カレンダー グラフ ボタン/アイコン WYSIWYGエディタ フォーム/ウィザード テーブル その他ウィジェット が用意されています。これだけあれば後は組み合わせるだけで（Bootstrap本来の機能も使いつつ）リッチな
Vagrant – 仮想化を使って開発フローを効率化しよう
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 数年前から仮想化が盛り上がっています。本番環境でハードウェアリソースを有効活用するための仮想化もありますが、今回は開発環境を仮想化し、効率化するVagrantを紹介します。 セットアップ 使い方はとても簡単です。ダウンロードとインストールが終わったら順番にコマンドを叩いていきます。 最初にボックスの作成。 $ vagrant box add base http://files.vagrantup.com/precise32.box Downloading box from URL: http://files.vagrantup.com/precise32.box Extracting box...te: 52818/s, Estimated time remaining: 0:00
タップして表示される華麗なメニューモックアップ·QuadCurveMenu MOONGIFT
QuadCurveMenuはPath 2.0というiOSアプリのメニュー表示機能を模したモックアップアプリです。 デザインやコンポーネントの工夫で人気に雲泥の差が出るのがiOSアプリです。そして人気のあるアプリはそのコンポーネントが真似されます。QuadCurveMenuもその一つです。 起動した直後の画面です。 赤いマークをタップするとメニューがスムーズに表示されます。 もう一度赤いマークをタップするとメニューが回転しながら収納されます。メニュー項目をタップすると選択されたマークが回転します。 デモ動画です。 QuadCurveMenuはPath 2.0というiOSアプリに搭載されているメニュー表示機能を模したアプリになっています。QuadCurveMenu単体で意味をなす訳ではありませんが、機能的にはとても面白いです。 QuadCurveMenuはiOS向けのソフトウェア（ソースコード
無茶しやがる…JavaScriptだけでZipファイルを生成、ダウンロード·JSZip MOONGIFT
JSZipはWebブラウザ上、クライアントサイドだけでJavaScriptを使ってZipファイルを生成するソフトウェアです。 JavaScriptでできることがどんどん増えています。そんな中、注目したいのがJSZipです。なんとJavaScriptだけでZipファイルを作ってしまうというとんでもないソフトウェアです。 デモページです。コードを見て分かる通り、テキストファイルと画像をZip圧縮しています。 実際ダウンロードされたZipファイルを解凍すると確かにフォルダやファイルが入っています。テキストの内容を変えればダウンロードされたファイルの中身も変わっていました。 JSZipが面白いのは動的にZipファイルを作成できることではないでしょうか。ユーザにコンテンツをダウンロードさせたいという時にその場の内容をそのまま圧縮して送れるようになります。アイディア次第で色々な使い方ができそうなソフト
カジュアルに更新できそうなCodeIgniterを使ったブログエンジン·Embr MOONGIFT
EmbrはCodeIgniterを使って開発されているシンプルなブログエンジンです。 EmbrはTumblrに似たシンプルで格好いいブログエンジンです。PHPのWebフレームワークであるCodeIgniterを使って開発されています。 ブログの画面です。すっきりしつつも格好いいデザインです。 ログインはadminというリンクをクリックするとフォームが表示されます。Ajaxが多用されていて操作はスムーズです。 投稿画面です。テキストまたは画像のポストに対応しています。画像はアップロードではなく、URLを指定して投稿する形式です。その他、カテゴリやタグが追加できます。 こちらはイメージポストです。オプションのタイトルと画像のURLだけというシンプルな作りです。 投稿が完了した画面です。一件表示はとてもシンプルです。 独自のコメント管理はなく、DISQUSを使ってコメントする仕組みになっています
業務システムに組み込みたい。PHPからExcelファイルを読み書きする·PHPExcel MOONGIFT
PHPExcelはExcelファイルの読み書きを行うPHPライブラリ。PDF/HTML出力にも対応。 PHPExcelはPHP製のオープンソース・ソフトウェア。業務システムを開発していて必ず発生するのがExcelのような表形式ファイルの取り込みだ。大抵はCSVに変換してもらって取り込むだろう。だがユーザが変換を忘れてExcelを読み込ませてしまうことも度々だ。 PHPで出力できる さらにシステムから資料を出力する際にもCSVをダウンロードして手作業で修正して…という手間をユーザにとらせることになってしまう。そんな時代はもう古い、PHPExcelを使ってリッチなExcelファイルをそのままやり取りしよう。 PHPExcelはExcel 2007をベースとし、5.0/95/97以降のファイル形式の読み込みにも対応している。Excel 2003のXMLフォーマットも扱える。さらにOpenOffi
デスクトップ用Webブラウザでマルチタッチを擬似的に実現·addTouch MOONGIFT
addTouchはデスクトップ向けWebブラウザでマルチタッチを擬似的に再現できるJavaScriptライブラリ。 addTouchはJavaScript製のフリーウェア（ソースコードは公開されている）。スマートフォン向けWebサイトを開発するのは大抵デスクトップ上で行うはずだ。スマートフォンの上で開発する訳ではない。そのため実際に作って、その後スマートフォンでテストを行う必要がある。 回転したり動かしたり 厄介なのはiOSに代表されるマルチタッチ操作だ。これをデスクトップ上でうまく再現するのは厄介でデバッグに時間を費やしそうだ。そこで使ってみたいライブラリがaddTouchだ。 addTouchはデスクトップのWebブラウザでマルチタッチを実現できるライブラリだ。まずクリックして指の位置を決める。これは数カ所配置が可能だ。一カ所ポイントしてそれをドラッグすればターゲットを動かすことができ
異なるSNSを結びつけるnode.jsを使ったWebチャット·cavad MOONGIFT
cavadは異なるSNS（現状はFacebookのみ）を結びつけるWebチャットシステム。 cavadはJavaScript/node.js製のフリーウェア（ソースコードは公開されている）。今のWebはソーシャル真っ盛りだ。ソーシャル○○と銘打ったサービスが乱立し、みんなそろそろ飽きてきている。今からソーシャル○○を作るのは無謀だろう。 チャット画面 だが新たに作らずとも、既存のソーシャル系サービスではOAuthを通じて様々なデータを公開している。そんなWeb APIを使ってSNS同士をつなげてしまうのがcavadだ。 cavadはWebチャットサービスだが、異なるSNS間をつないで利用できることを目標としている。現状ではFacebookのみとなっている。cavadにアクセスすると、Facebook Connectが求められる。そこで許可をするとcavadに戻り、チャットルームにログインで
ドラッグアンドドロップ、プログレスバー表示に対応したアップロードライブラリ·File Uploader MOONGIFT
File UploaderはD&Dをサポートし、複数ファイルのアップロードとプログレスバー表示に対応したライブラリ。 File UploaderはHTML5/JavaScript製のオープンソース・ソフトウェア。Webブラウザの操作で最も面倒なのがファイルのアップロードではないだろうか。一つのファイルしか指定できないインタフェースや、巨大なファイルを送信中の固まった状態はとてもユーザビリティが低い。 ドラッグアンドドロップ そうした問題点を解決するのに使われてきたのがFlashだが、HTML5になって複数ファイルのアップロードもできるようになった。さらにユーザビリティを高めるために使ってみたいのがFile Uploaderになる。 File Uploaderはドラッグアンドドロップでファイルのアップロードが出来るライブラリだ。まるでGmailのようなインタフェースになっている。フォルダは無
JavaScript製のOAuthライブラリ·jsOAuth MOONGIFT
jsOAuthはJavaScript製のOAuthライブラリ。 [/s2If] jsOAuthはJavaScript製のオープンソース・ソフトウェア。今ではWeb APIを公開しているサービスは珍しくない。そして従来は配信系ばかりだったが、今ではWeb APIを通じたデータ登録や更新も可能になっている。そんな時の認証の仕組みに使われているのがOAuthだ。 テスト用コード（ここままでは動かないが…） OAuthはTwitterで最も知られるようになったが、元々はFlickrやGoogle、Facebookなどでも使われている機能ベースの認証技術だ。そしてそれをJavaScriptベースで実現したのがjsOAuthになる。 jsOAuthはJavaScriptによる実装なので、ソースコードが見えてしまう。OAuthではシークレットキーを使うので、それが丸見えというのは考えものだ。だがWebブ
JavaScriptの3Dエンジン·Three.js MOONGIFT
Three.jsはJavaScriptのオープンソース・ソフトウェア。Webブラウザが高機能化していく中で競われているのがJavaScriptエンジンの性能だ。実行速度が向上することによって、Webアプリケーションなどの利用が促進される。HTMLレンダリング性能と合わせて重要な指針だ。 マウスの動きを追従する エンジンが高機能化すれば実現できる幅が広がる。その一つが3Dレンダリングだ。JavaScriptで3Dオブジェクトが表現できるようになれば、ゲームはもちろん様々な分野で活用できるだろう。そのレンダリングエンジンとしてThree.jsを紹介しよう。 Three.jsは3Dオブジェクトをレンダリングするライブラリで、先日話題になったGoogleマップを使ったマッシュアップ「The Wilderness Downtown」もこのThree.jsを使って作られた一つだ。さらにマウスで反応する
携帯電話からのアクセスを真似する·Moxy MOONGIFT
MoxyはPerl製のオープンソース・ソフトウェア。日本において携帯電話サイトの需要は大きい。スマートフォンの活況もあって、PC向けと同時に携帯電話向けをリリースすることも多くなっている。また将来的にはPCよりもモバイルのシェアが大きくなると言われている。 携帯電話からのアクセスを模倣できる そんな携帯電話向けサイトの開発を行う場合、PCからアクセスを偽装してテストを行う必要がある。専用のソフトウェアの他、FirefoxのMobileSimulatorも使えるが、ここではWebブラウザベースのMoxyを紹介しよう。 MoxyはPerl製のソフトウェアで、専用のWebサーバとしてサービスが立ち上がる。ブラウザからアクセスすると、URLを指定して外部のWebサービスにアクセスできる。その際にはUserID、ユーザエージェント、HTTPヘッダーを任意に入れ替えてアクセスも可能だ。 Googleへ
Googleらしく数値にこだわるWebサイト最適化Firefoxアドオン·Page Speed MOONGIFT
CGM系のサービスでは、Webページの表示速度には徹底的にこだわる必要がある。ちょっととした遅延がユーザのストレスを生み、徐々に心がはなれていく可能性を生んでしまう。最もそれを知っているのがGoogleだろう。 数値による改善点の指摘を行ってくれる 彼らの徹底的な表示速度へのこだわりは初期の頃から今もなお続いている（GoogleドキュメントなどのWebアプリケーションはどうかと思うが）。そんな彼らの表示速度へのこだわりが作り上げたのがPage Speedだ。 今回紹介するオープンソース・ソフトウェアはPage Speed、Google製のFirebugプラグインだ。 Page Speedは表示しているWebサイトの表示に関する問題点、改善点を洗い出してくれるFirefoxアドオンだ。類似のソフトウェアとしてYSlowが知られている。YSlowがA〜Fの判定だったのに対して、Page Spe
Google ChromeにTwitterを追加する·Chromed Bird MOONGIFT
Chromed BirdはGoogle Chrome向けのオープンソース・ソフトウェア。Twitterとブラウザの相性はとても良い。Webをブラウジングしていて、気になったり面白かったサイトがあればそのURLをつぶやきたくなるものだ。そのためのツールも多数存在しており、ブラウザの機能拡張として提供されるものも多い。 Google Chromeと連携する Chromed Birdもその一つだ。名前の通りGoogle Chromeと連携する。Google Chrome extensionとして提供されるので開発版のGoogle Chromeで--enable-extensionsを付けて起動し、ダウンロードすればインストールできるようになる。 アドレスバーの横にTwitterのアイコンが表示される。クリックするとフォロワーの最近のつぶやきが一覧で表示される。Chromed Birdでリプライし
Twitterをブラウザからもっと使いやすく！·pbtweet MOONGIFT
TwitterというとWebブラウザからの利用よりも携帯電話やスマートフォンの専用アプリ、メール、ネイティブアプリケーションなどWeb APIを介したアクセスの方がしやすいイメージがある。とは言え、時々はWebブラウザからアクセスするのだが、そうするといつも使っているツールに比べるとあまりに貧弱で更新するのが面倒に感じてしまう。 発言のスレッド化 Webブラウザからはメッセージを送るくらいしかできない、ダイレクトメッセージも送りづらい…そんな面倒さから抜け出せるのがpbtweetだ。 今回紹介するオープンソース・ソフトウェアはpbtweet、WebブラウザからのTwitterライフをパワーアップするソフトウェアだ。 pbtweetはFirefoxのGreasemonkeyやSafariのGreaseKitで動作するユーザスクリプトだ。ブックマークレットのpbtweetは、ChromeやOm
便利！jQueryのアクションをビジュアル的に作成する·IxEdit MOONGIFT
jQueryを使って画面のアクションを作ろうと思うと、そのコーディングの仕方を含めて習得する必要がある。イベントにもマウスやフォーカス、クリックなどの様々な種類が存在し、その結果として起こすアクションも無数に存在する。それらを適切に判断しながら構築するというのは意外と難しい。 jQueryを使った開発にぜひ！ 単純なJavaScriptであれば、オーサリングツールで対応しているものもある。だがjQueryのような高度なJavaScriptフレームワークには対応していない。そこで使うのがIxEditだ。 今回紹介するオープンソース・ソフトウェアはIxEdit、jQueryのビジュアルアクションビルダーだ。 IxEditは既に組み上がっているWebサイトに対して使うライブラリだ。指定されたJavaScriptファイルとCSSを読み込むと、Webサイトにフローティングウィンドウが表示される。そし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
