管理画面などに格好いいグラフがあるとテンションがあがりますよね。とは言えグラフを表示するというのは意外と面倒で、ついつい後回しになってしまいがちです。 そこで手軽に格好いいグラフを描けるライブラリとしてmorris.jsを紹介します。 morris.jsの使い方 morris.jsはまずJavaScript/スタイルシートを読み込みます。 <link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-m

MixItUp 3 A high-performance, dependency-free library for animated filtering, sorting, insertion, removal and more... MixItUp gives you beautiful animated DOM manipulation on top of native CSS layout.

これで十分でしょ！ Bootstrapで作る管理画面は相当増えてきているようです。確かに一般ユーザ向けに提供するとBootstrap臭が出てしまいますが、管理画面であれば問題はないですよね。 ということで今回は新しいBootstrap製の管理画面テンプレートAdminLTEを紹介します。高度なウィジェットが数多く提供されていますので使い勝手良さそうですよ。 AdminLTEの画面 今回もスクリーンショット多めで紹介します。 ダッシュボード。この時点でかなりリッチ。 ボックス。これだけ多彩なパターンがあると言うのも凄いですね。 左端にはちょっとした設定を表示させています。 背景色を変えるだけでも随分印象が違います。 グラフ。 こちらもグラフ。 外部ライブラリもそつなく使いこなしています。 スパークラインも！ アラート。ちょっと飛び出しているのがいい感じです。 アイコン。 ボタン。フラット系で

木の葉を隠すなら森、という言葉があります。秘密の文字を隠すなら、文字の中に入れてしまうのが最もばれない方法かも知れません。とは言え単純に暗号化されているのではそこに秘密の文字があるのは明らかです。 今回紹介するz.jsは一風変わったライブラリで、テキストがまるでなくなってしまったかのように埋め込んでしまうソフトウェアになります。 z.jsのデモ 元々の文字列です。日本語も使えます。 全て/になってしまいました。もちろん復号化できます。 hello worldの文字がなくなっているかのように表示されています。 z.jsの使い方 最も基本的な使い方としては下のようになります。 var tmp='Something'+z.js('hello world')+' inside'; console.log(tmp,tmp.length); → Something‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌

Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...

巨大なファイルをアップロードする際に欲しくなるのがリジューム機能です。万一途中でネットワークエラーになったりして最初からやり直し、なんてことになったらもはや二度とアップロードする気にならなくなるでしょう。 今後Webの利用範囲が広がっていく中で、動画をはじめサイズの大きいファイルをアップロードしようと思ったらリジューム機能は欠かせなくなります。そこで使ってみたいのがFlow.jsです。 Flow.jsの使い方 Flow.jsは通常のファイルアップロードの代わりに使えるようになっています。 デモです。ボックスにファイルを追加します。 アップロード中… 途中で止めたり、一つだけ再開もできます。 タネを明かすと、Flow.jsではFile APIを使ってファイルを読み込み、小さく分割（チャンク）してアップロードを行っています。その分ネットワーク接続の回数が多くなりますが、巨大なファイルによるネッ

HTML5は多彩な機能をWebにもたらしてくれますが、機能が多彩でブラウザによってサポートされている機能が異なるなどまだまだ課題も多いのが実情です。しかしその課題こそプログラミングによって解決できる余地がある部分でもあります。 今回はオーディオ系APIを一つにまとめて提供してくれるライブラリBoombox.jsを紹介します。 Boombox.jsのデモ 実行中です。 Boombox.jsはHTMLAudio/WebAudio/HTMLVideoの3つのAPIを透過的にサポートするライブラリです。さらにブラウザが非アクティブな時には音を消したり、同時に複数の音を鳴らすのもサポートしています。 ミックスもサポートされています。 単純な再生、停止はもちろんのこと途中から再生したりループ再生、ボリュームの調整もできます。フィルタリングもサポートされています。サポートブラウザとしてはiOS/Andr

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました おお、これは表示系のテストが容易になりそう！ Seleniumは多数のブラウザを操作してテストを自動化できます。RubyやJavaなど様々なプログラミング言語向けにソース出力が可能で、各言語で作られたシステムと組み合わせることができます。 そんなSeleniumをnodeと組み合わせて使えるのがNightWatchです。書き方も使い方も柔軟で、これはテスト以外の用途でも活躍しそうです。 まずはテストの書き方。次のようなコードになります。 module.exports = { "Demo test Google" : function (client) { client .url("http://www.google.com") .waitForElementVisible("bod

地図は位置情報と結びつけると凄く魅力的で面白いサービスになります。ArcGISというGISサービスの統合プラットフォームがあるのですが、これを使うと位置情報を含めた様々なデータが取り出せます。 そのサンプルとして開発されているのがquickstart-map-jsです。Googleマップとはまた違う面白さがそこにはありそうです。 サンプルです。まずは白地図。 標高をマッピングしました。 衛星＋都市。この辺りはGoogleマップでもありますね。 拡大すると日本も英語ながら地名が出ます。 標高だけにすると随分見やすくなります。 ウォーターカラー。面白い表現ですね。 ここからがArcGISのデータを使った表現になります。 ルート案内。USだけなのが残念ですが。 1〜3分内にいける場所をマッピング。 こちらも細かいルート案内。複数箇所を指定できます。 複数のデータをマッピング。 自由に線やポリゴン

みんなで楽しくハッキング！ プログラミングは一人でやっても楽しいけれど、みんなでやればもっと面白いですよね。周囲に人がいなくても大丈夫、ネットワークが繋がっていればどこでも誰とでもプログラミングが楽しめます。 そんな環境を提供するのがhackifyです。 インストールはnpmを使って簡単にできます。 $ npm install hackify -g 終わったら開発しているプログラムのディレクトリに移動して hackifyを実行します。 $ hackify Creating a hackify room with: room link: http://www.hackify.org/rooms/521419 moderator password: 123775 ignoring folders matching: /(node_modules|.git)/ connected to serv

Facebookからまた面白そうなソフトウェアが出てきましたよ！ JavaScriptにおけるテンプレートフレームワークは数多く出てきています。いずれも興味深い作りなのですが、ここにきてFacebookがReactというライブラリをリリースしました。 ReactはUIを生成するJavaScriptライブラリで、MVCでいうところのVになります。さっそくコードを見てみましょう。 一番シンプルな実装例。左側がコード、右側が実行結果になります。 Reactは必須ではないのですがJSXというXMLライクな記法を使っています。 <hellomessage name="John" />のように定義するとthis.props.nameで値が取り出せます。実際の描画はリアルタイムに反映されるので、Helloのところを修正すればすぐにレンダリング内容が変わります。 こちらはタイマーを使った例。コードが見やす

仕事用ツールの基本としてはスケジュールとタスク管理かと思います。Googleカレンダーやサイボウズのようなグループウェアを使っている場合は問題ないでしょうが、独自にCalDavサーバを立てている場合、専用クライアントが悩みどころです。 そこで今回はWebベースのCalDAVクライアント、CalDavZAPを紹介します。Google Appsライクな操作で設定できるので独自にCalDAVサーバを立てているならかなり使えると思います。 まずはログインします。 ログインするとカレンダーが表示されます。月ごとの表示がデフォルトです。 表示、非表示はチェックボックスで切り替えられます。 新しいイベントの作成はフローティングで行います。 タスクビュー。タスクの追加、編集、削除ができます。 週数のビュー。月ごとよりもこちらの方が分かりやすいように見えます。 ウィークリービュー。時間毎の表示になります。

Open Document Format（ODF）と言えばOpenOffice.orgやLibreOfficeで使われているファイルフォーマットです。さらにGoogleドキュメントをはじめ、各種オフィススイートでもサポートされているフォーマットになります。 仕様はもちろん公開されていますのでその内容を解析すればエディターを開発することができる訳ですが、それは簡単ではないというのは容易に想像できます。という前提のもと、見て欲しいのがWebODF、WebベースのODFエディターです。 エディター画面です。変更履歴まで表示できてしまう優れもの！ まさかここまで…というレベルです。ちゃんとツールバーまであって、ほぼローカルアプリケーションレベルの編集が実現します。 日本語の入力もできます。 ODFファイルをアップロードして、そのまま編集もできます。画像の埋め込みもできるなど、ドキュメントエディタと

これは目から鱗！ Googleがスマートフォンとデスクトップブラウザを連携させるサービスを幾つかリリースしています。その際にはデスクトップ側（または逆）で表示されたキーをもう片方で入力することでWebSocketによって接続しています。 技術的に高度で容易には実現しがたい訳ですが、もっと簡単にスマートフォンとデスクトップのブラウザを連携させる方法がありました。それを実現しているのがRemote.jsです。 こちらがデモ。スマートフォンで操作するとA/Bのハイライトが切り替わります。 こちらはスマートフォン側のリモコン。なぜか文字が逆になっています。 こんな感じで別なウィンドウを開いたり、閉じたりもできます。 種明かしをすると、Remote.jsは音を使っています。スマートフォンでボタンを押すと、特定の音が出ます。それをデスクトップ側のマイクで聞かせると特定のアクションを実行する仕組みになっ