Clusterize.js·大量のデータを描画&高速スクロール MOONGIFT
Web上で巨大なデータを描画するとWebブラウザの動作が重たくなったり、最悪の場合落ちます。それを防ぐためにはデータをすべてDOMに描画するのではなく、表示している範囲だけに絞って表示し、非表示になったタイミングで破棄すると言った工夫が必要です。 しかしそういったDOM操作はコツがいります。そこで使ってみたいのがClusterize.jsです。巨大なデータセットを高速に表示するためのライブラリです。 Clusterize.jsの使い方 Clusterize.jsを使って5,000行のデータをスクロールする例です。スムーズに描けます。 Clusterize.jsのサイトではさらに10万、50万行のデータを描画することもできます。Clusterize.jsではリストの高さを予め計算し、それに合わせてスクロールバーが正しい長さで出るように設定されています。そのため行の高さは一定である必要がありま
Vorlon.JS·多数のブラウザをまとめてデバッグできるリモートデバッガー MOONGIFT
今はWebブラウザの種類も増え、かつスマートフォンまであるなどWebサイトの作成も大変になっています。しかも開発ツールの使いやすいブラウザ、使いづらいブラウザもあり、開発に時間がかかります。 そんな現状を打破できるかも知れないのがVorlon.JSです。Vorlon.JSを使うと多くのWebブラウザのデバッグを一元管理できるようになります。 Vorlon.JSの使い方 Vorlon.JSはnpmでインストールできます。 $ npm install vorlon そしてvorlonコマンドでサーバが立ち上がります。 $ vorlon 後はこのVorlon.JSが出しているJavaScriptをデバッグしたいWebページ内に組み込みます。 <script src="http://localhost:1337/vorlon.js"></script> これで準備は完了です。例えば以下のようになり
2015年04月の人気ソフトウェアまとめ MOONGIFT
今回は4月の人気ソフトウェアまとめです。過去分はこちら。 1月 2月 3月 なかなか取り上げづらい、ハードウェア系のライブラリが入ってきています。IoTについてはまだまだ情報収集段階という方が多いので、開発者としては先鞭をつける価値はあるのではないでしょうか。 flexible.gs - レスポンシブ対応のグリッドレイアウトフレームワーク レスポンシブなWebサイトを作る際にBootstrapやZurb Foundationといったフレームワークを使うことはままあります。それはなぜかと言えば便利な機能と整ったデザインが提供されるからなのですが、逆にデザイン上の縛りが出てしまうのが難点です。そこで使ってみたいのがflexible.gsです。レスポンシブWebデザインの中でも肝になるであろう、メディアクエリーとグリッドについてのみ提供するスタイルシートフレームワークです。xl（デスクトップ）、
IEDiagnosticsAdapter - IEのデバッグにGoogle ChromeのDevToolsを使おう
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近のWebブラウザではデバッグツールが標準搭載されています。一番使いやすいと思うのはGoogle ChromeのDevToolsでしょうか。その他FirefoxもFirebugの流れがあって使いやすいです。正直デバッガーが使い勝手悪いと開発効率が大幅にダウンします。 IEでWebサイトの検証、デバッグをしないといけないのにデバッガーの使い勝手が悪くて進まない…そんな方はIEDiagnosticsAdapterをインストールしてみましょう。 IEDiagnosticsAdapterの使い方 IEDiagnosticsAdapterはプロキシとして動きます（とはいえ設定は不要です）。まずIEDiagnosticsAdapterを立ち上げておきます。 そしてGoogle Chromeで
Locat·Mac OSXのファイルのオープン/保存を便利に！ MOONGIFT
これはMac OSXユーザであれば必携のツールになるのではないでしょうか。Mac OSXでファイルの保存先、開く先を変更する際にFinder側にあるファイルをドロップするという方法があります。これをよく使う人は多いでしょう。 しかしドロップすると保存ファイル名まで書き換わってしまって逆に面倒なこともあります。そこで使ってみたいのがLocatです。 Locatの使い方 LocatはSIMBLプラグインになっています。EasySIMBLなどを使ってインストールできます。 後はFinder側でOption + Returnを押すと選択している項目をOpen/Saveダイアログに反映します。Shift + Returnはファイル名は反映せず、場所だけ移動します。ファイルをドロップせず、キーボードショートカットだけでできるのが便利です。 実際のデモ動画はこちら。 日々よく行う操作を手軽にしてくれると
Textures.js - SVGをパターンで塗りつぶし MOONGIFT
SVGはWeb上でベクターグラフィックを表現するのに適した手法です。Flashのように外部プラグインはいらないですし、拡大/縮小しても綺麗なのでどんなデバイスの画面サイズにも対応できます。 そんなSVGの表現力をあげるのに適したライブラリがTextures.jsです。多数のパターンを使って塗りつぶし処理を行います。 Textures.jsの使い方 デモです。線は素のSVG（d3.js）で描いて、その内容をTextures.jsで描いています。 ライン系。 色の変更もできます。 線を細くしたり、間隔を調整するのも簡単にできます。 サークル、ドット系。 こういう特定のパスを描くことも、自分でカスタマイズすることもできます。 SVGで描いているとついベタ塗りになってしまいがちですが、さらにその描画内容をパターンで描けるようになるとカラーだけでなく、グレースケールで表現した際にも分かりやすくなりそ
Twine – ストーリーを整理するノートアプリ
プレゼンテーションは単純にスライドを並べてたんたんと説明していけば良いわけではありません。全体を通して一つのストーリーが必要です。ストーリーが一貫して提供されてこそ、聞き手は納得し、理解を深めることができます。 そんな納得感あるストーリーを作るのに適したソフトウェアがTwineです。Wikiっぽさのある面白いソフトウェアです。 Twineの使い方 Twineは元々Windows、Mac OSX用のソフトウェアでしたが、2.0からWebベースになったようです。プレゼンテーションのスライドや小説、マインドマップの代わりに使うのも良さそうです。 TwineはHTML5/JavaScript製のオープンソース・ソフトウェア（GPL v3）です。 Twine / An open-source tool for telling interactive, nonlinear stories tweeco
NativeScript - 夢再び。JavaScriptでiOS/Androidアプリを開発 MOONGIFT
ワンソース、マルチプラットフォームは甘美な響きであり、誰もが夢見る存在です。ずっと昔から言われており、アプリ開発において最も望まれている存在かも知れません。 かつてはTitaniumが有力候補が出てきたのですが、最近ではあまり聞かれません。そこで登場したのがNativeScriptです。 NativeScriptの使い方 NativeScriptはCLIで操作します。node/Homebrew/mono/JDK/ant/Android SDKなどが必要です。準備が終わったら、 $ npm i -g nativescript にてインストールができます。 コマンドは次のようになります。 // 対応プラットフォームを追加 tns platform add android tns platform add ios // デバイスで実行 tns run android tns run ios //
Navstack.js - ハイブリッドアプリやスマートフォン向けWebサイトの画面遷移はこれにお任せ MOONGIFT
スマートフォンのWebビューは従来に比べると遙かに進化していて、レンダリング速度やJavaScriptの実行速度も高速化しています。そんな中、ネイティブアプリとWebアプリの違いと言えば、画面遷移のアニメーションにあるのではないでしょうか。 上下左右から画面がスライドして表示されるのはやはりアプリならではといった感があります。そんな表示をサポートしてくれるWebアプリ用ライブラリがNavstack.jsです。 Navstack.jsの使い方 使い方としてはまず、ステージを作ります。 stage = new Navstack({ el: $('#stage') }); 後はページ遷移をする度にpushしていくだけです。 // Navigate to new pages using push. stage.push('/home', function() { return $("<div cl
pgcli·入力補完/ハイライトが便利なPostgreSQLクライアント MOONGIFT
PosgreSQLを操作するCLIツールと言えば標準のpgsqlが当たり前でしょう。もしもっと高度なツールが使いたければGUIインタフェースを備えたものや、Web版もあります。 しかしそこに果敢に挑戦するのがPython製のpgcliです。標準よりも高度な機能を備えたPostgreSQLクライアントです。 pgcliの使い方 インストールはpipで行えます（easy_installも可）。 $ pip install pgcli 後はPosgreSQLに接続します。 nakatsugawa> nakatsugawa> \d +----------+--------+--------+-------------+ | Schema | Name | Type | Owner | |----------+--------+--------+-------------| | public | t
ECharts - 多種多様な表現に対応したグラフ/チャートライブラリ MOONGIFT
Webは表現力がそれほど高くないのが常に問題視されています。特に業務系システムではグラフ/チャートを使ってデータを可視化する必要があります。最近ではビッグデータが話題にあがっており、大量のデータを効率的に描画しなければならなくなっています。 そこでEChartsを紹介します。ビッグデータモードまで用意された多種多様なパターンの用意されたチャートライブラリです。 EChartsの使い方 今回はその多様なグラフ、チャートを紹介します。 曲線のグラフ。 積み上げグラフ。 棒グラフ。 エリアグラフ。 曲線。かなり複雑です。 こちらもユニークです。途中で途切れています。 棒グラフですが、範囲が指定できています。 左右の比較グラフ。 複数グループの棒グラフ。 散布図。 こちらも散布図。 画像も合わせた表示。 散布図と色の組み合わせ。 ローソクチャート。 円グラフ。 より描画にこだわった円グラフ。 レー
HTML5 Push Notifications - HTML5×Pusherで通知を表示 MOONGIFT
チャットやコミュニティサイトをはじめ、Webサイトを訪れているユーザに通知を投げたいと思うケースは多々あります。HTML5のデスクトップ通知を使う手もありますが、サポートしていないブラウザもあります。 そこで試してみたいのがHTML5 Push Notificationsです。サイトの訪問中にしか使えませんが、サーバサイドでも簡単に使えるデスクトップ通知ツールです。 HTML5 Push Notificationsの使い方 送信例。左側の画面で書いた文字が両方の画面に通知として表示されています。 文字を変えれば通知も変更できます。 HTML5 Push Notificationsはサーバサイドからも通知を送信できます。例えばPHPの場合、次のようなコードでできます。 $app_key = 'YOUR_APP_KEY'; $app_secret = 'YOUR_APP_SECRET'; $a
fake2db - 各種データベースに対応したダミーデータジェネレータ MOONGIFT
システム開発を行っているときにダミーのデータが欲しくなることは多々あります。そんな時に本番データをコピーして使うのは大きな問題につながる可能性があるので決してしてはいけません。電話番号やメールアドレスなどを置き換える作業が逆に手間になる場合もあります。 そこで使ってみたいのがダミーデータのジェネレータです。今回はPython製のfake2dbを紹介します。 fake2dbの使い方 fake2dbはSQLite、PostgreSQL、MySQLそしてMongoDBに対応しています。インストールはpipでできます。 pip install fake2db インストールしたらfake2dbコマンドでデータベースに直接データを流し込めます。 fake2db --rows 200 --db sqlite # SQLiteの場合 fake2db --rows 1500 --db postgresql
UI Tiles·Webサイト全体の画面遷移設計に使えるデザイン集 MOONGIFT
Webサイトを開発する際に使われるのが画面遷移を表現するフローチャートです。例えばコマースであればトップページから商品一覧、カテゴリ一覧や商品のピックアップなどの遷移が考えられます。 深くなってしまう場所がないか確認したり、ユーザ動線が正しく描けているかどうか確認するのに便利です。UI Tilesはそんなフローチャートを作成するのに便利なデザイン集です。 UI Tilesの使い方 UI TilesはPNGの他、PhotoshopやIllustrator形式でファイルが配布されています。 PNG版。画面のモックがたくさんあります。 それぞれ小さいながらも特徴があります。 動画プレーヤ、ポートフォリオページもあります。 PSDはデモも用意されています。 デザイン一覧。 Illustratorも同様です。 UI Tilesを使うと、これまでは単なる四角い枠に対してトップページなどとラベルを貼って
Materialize - マテリアルデザインのためのCSSフレームワーク MOONGIFT
レスポンシブでWebデザインを組むのは当たり前、今のトレンドはマテリアルデザインにあるという時代になってきました。フラットUIを踏襲しつつ、アニメーションを効果的に使うことでさらにユーザビリティ高いデザインを可能にします。 主にモバイルアプリ用に使われていますが、Webデザインにおいても十分利用が可能です。今回はマテリアルデザインを実現するスタイルシートフレームワーク、Materializeを紹介します。 Materializeの使い方 今回はスクリーンショット多めに紹介します。 Materializeはレスポンシブかつマテリアルデザインのフレームワークになっています。開発の高速化、ユーザ体験重視、ドキュメントとサンプルを多めにして学習コストを低くするといった特徴があります。 MaterializeはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア（MIT Lic
MozVR - Oculus Rift + Mozilla。WebブラウザでVRを楽しむ！ MOONGIFT
HTML5の機能はどんどん広がっています。Web上でUnityが使えるようになったり、WebGLを使えばリッチなコンテンツも表示できるようになります。MIDIと接続することだってできますので、HTML5の未来は無限にさえ感じます。 そんなHTML5の楽しみ方をまた一つ教えてくれるのがMozVRです。なんとWebベースでVRコンテンツを表示します。もちろんVRと言えばということで、Oculus Riftと接続できます。 MozVRの使い方 Oculus Riftありきな感じなのでスクリーンショットは微妙ですが。 基本スクリーンショットでの表示になります。 ワイヤー。これがスプラッシュです。 二つに別れていると分かりづらいですが、実際はリアルに浮かんでいます。 メニュー。視線で選択します。 パノラマ写真。 ドライブ。 個人的なオススメはアラスカ（？）あたりを舞台にしたドキュメンタリー風動画です
Chartbuilder - Web上で細かくカスタマイズしたグラフを作成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました SVGやCanvasの登場によって、Webの表現力は大幅に向上しています。たとえばグラフです。円グラフや棒グラフ、折れ線グラフなど多数のグラフを描くライブラリが存在します。 システムから動的に出力される場合はそうしたライブラリを使うのが良いですが、記事の中で一度切りで使いたいグラフの場合はChartbuilderを使うのが便利そうです。 Chartbuilderの使い方 Chartbuilderはグラフの表示を逐次確認しながら描画設定ができます。設定を変更するとアニメーションしながら切り替わっていくのが格好良いです。さらに画像出力まで含めてすべてJavaScriptだけで作られているのも利点で、サーバサイドを使っていません。 ChartbuilderはExcelやGoogleスプレ
whirl – CSSだけで実装されたローディング表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webアプリケーション化が進み、Ajaxを使ってデータを取得したりJavaScriptで画面を再描画するようになると、その処理途中にユーザに触って欲しくないことが増えます。特にフォーム送信の二重処理は厄介です。 そこでボタンを一時的に無効にしたり、処理中である旨を通知する必要が出てきます。そのためのライブラリがwhirlです。 whirlの使い方 whirlには様々なデザインが用意されています。 whirlの良いところは画像ではなくCSSだけでアニメーションを表現しているという点です。わざわざ画像をアップロードする必要もないのでwhirlだけで素早くローディングアニメーションが実現できます。 使い方としてもクラスを追加したり、表示するだけで使えますので手軽です。 <div clas
ng-admin - 次世代のWeb管理画面
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近はサーバサイドではHTMLレンダリングせず、RESTfulなWeb APIを使ってデータを取得、表示するといったWebアプリケーションが増えています。そうした中、運営側の管理画面においても求められるものが変わってきています。 そこで今回は次世代の管理画面、ng-adminを紹介します。AngularJSを使ったWeb管理画面になります。 ng-adminの使い方 Web APIを用意しておくことで、ユーザ向けはもちろんのこと管理画面においてもスムーズな操作ができるようになります。pushStateにも対応していますので、URLはユニークになるようです。 ng-adminはJavascript/HTML5製のオープンソース・ソフトウェア（MIT License）です。 Angul
HTML5 Canvas Old School RPG - 昔懐かしいRPGをHTML5で表現
ゲームには多くのジャンルがありますが、スマートフォンなどで人気なのはカジュアルなパズルゲームやアクションゲームではないでしょうか。人によってはもう少し時間をかけて遊べるRPGが好きという方も多いかと思います。 WebブラウザベースでRPGを作れれば、データをサーバに残していつでも続きができるようになります。そのベースとして参考になりそうなのがHTML5 Canvas Old School RPGです。 HTML5 Canvas Old School RPGの使い方 HTML5 Canvas Old School RPGは昔ながらのRPGといった感じですが、ファミコン風のノスタルジックな表現がかえって心地よかったりします。音楽も鳴るので、ゲーム内容を作り込めばかなり本格的なRPGが作れるのではないでしょうか。 HTML5 Canvas Old School RPGはHTML5/JavaScr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
