pdfmake - クライアント/サーバサイド両方に対応したPDFジェネレータ MOONGIFT
Webシステムを作っていて、時々PDFの帳票が必要になることがあります。サーバサイドでPDF出力するツールは幾つかありますが、それらのセットアップは面倒ですし、サーバの負荷も気になるでしょう。 そこで使ってみたいのがpdfmakeです。サーバ、クライアントサイド両方に対応したPDF作成ツールです。 pdfmakeの使い方 pdfmakeではJSONを使ってPDFの形式を定義します。 スタイル設定も可能です。 より複雑なスタイルを使った例です。 段組のサンプル。 テーブルも使えます。 リスト。ネストもできます。 より本格的な形式ですね。 画像も使えます。 pdfmakeの良いところはJavaScriptによる生成なのでサーバサイドの負荷なく、かつ編集した内容をその場で反映して生成し直すこともできるということです。さらにnodeで動かすこともできるのでクライアントサイドのコードを使ってそのまま
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
Messenger - Growlライクな通知機能をWebで
メールやチャットなどでメッセージを受け取ったら早めに返信をしたいと思いつつも、常に張り付いている訳にはいきません。そこで便利なのが通知システムです。通知がくるまでは放っておいても安心です。 Mac OSXであればGrowlが有名ですが、同じようなUIをWebベースで提供するのがMessengerです。 Messengerの使い方 Messengerはこのようなコードで実行します。 Messenger().post({ message: "How's it going?", type: "error" }) Ajaxと連携することも可能で、その実行結果によって成功、失敗の通知を出せるようになっています。 MessengerはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 messenger HubSpot/messenger
Chartbuilder - Web上で細かくカスタマイズしたグラフを作成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました SVGやCanvasの登場によって、Webの表現力は大幅に向上しています。たとえばグラフです。円グラフや棒グラフ、折れ線グラフなど多数のグラフを描くライブラリが存在します。 システムから動的に出力される場合はそうしたライブラリを使うのが良いですが、記事の中で一度切りで使いたいグラフの場合はChartbuilderを使うのが便利そうです。 Chartbuilderの使い方 Chartbuilderはグラフの表示を逐次確認しながら描画設定ができます。設定を変更するとアニメーションしながら切り替わっていくのが格好良いです。さらに画像出力まで含めてすべてJavaScriptだけで作られているのも利点で、サーバサイドを使っていません。 ChartbuilderはExcelやGoogleスプレ
DarkroomJS – JavaScriptで画像切り抜き
画像加工を行うと言えばローカルで画像編集ソフトウェアを使うのが思い浮かびますが、最近では随分Webベースで行えるようになっています。複雑な加工はまだまだですが、ちょっとした加工であればWeb上で行う方が手軽だったりします。 今回はその一つ、DarkroomJSを紹介します。位置を決めて切り抜きするという加工をシンプルに手早くできるようになります。 DarkroomJSの使い方 DarkroomJSはCanvasタグを使って画像加工を行います。加工後はそのまま切り抜かれた形で保存もできるようになっています。今は写真コンテンツも大きくなっているので、それをユーザサイドで加工してもらうための方法として使ってみるのが良さそうです。 DarkroomJSはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 DarkroomJS MattKetmo/darkroomjs
ウォール検索 - Facebookのウォール、タイムラインを検索 MOONGIFT
Facebookの大きな不満の一つは検索機能が弱いことです。せめて一度自分のタイムラインに出てきたステータスを後で見返したり、検索したいと思うことがあるはずです。タイムラインはフローなデータでどんどん流れていってしまうだけに検索があると便利です。 そこで使ってみたいのがウォール検索です。Facebookのタイムライン、自分のアクティビティから全文検索できるようになります。 ウォール検索の使い方 こちらがメイン画面です。 検索ボタンを押すと、JavaScriptでデータを随時取得して検索します。 友だちのウォールからも検索できます。 ウォール検索はサーバサイドの検索ではなく、Facebookからデータを取得しながらJavaScriptでフィルタリングする方法になるようです。そのため、データを逐一取得する分、時間がかかってしまうのが難点かも知れません。しかし最近のデータの中から探したいと言った
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
MOONGIFT: � Web上で音声入力を可能にする「w3voiceIM.js」:オープンソースを毎日紹介
音声入力というのはずっと昔からあるわりには一般的な普及が進まない技術だ。もちろん、何らかの障害がある方々の間では利用されているが、もっと一般に普及しなければよりよい技術革新やコスト低減などが臨めないのではないだろうか。 単語の認識精度は高い そんな中、一つのきっかけになり得るソフトウェアが登場した。なんとJavaScriptを埋め込むだけで音声入力が可能になる。 今回紹介するオープンソース・ソフトウェアはw3voiceIM.js、Web APIを使った音声認識ライブラリだ。 w3voiceIM.jsはw3voice.jpで提供される音声認識エンジンをJavaScriptだけで利用できるようにするライブラリだ。テキストボックスやテキストエリアに対して利用可能で、オブジェクトをダブルクリックすると音声入力のダイアログが表示される。 Pukiwikiに組み込まれた例。テキストエリアに音声入力でき
どんな使い方ができそうか。JavaScriptと連携できるWebベースの音声認識/出力·Speech API MOONGIFT
Speech APIはJavaScriptとFlashを使ったWebベースの音声認識/出力ソフトウェア。 Speech APIはJavaScript/Flash製のオープンソース・ソフトウェア。コンピュータが一般化される前から技術的には存在したが、今ひとつ流行らなかったのが音声入力だ。AppleのMacintoshの前で英語を発音していた頃が懐かしい。 音声認識デモ 少し現実味が出てきたのはスマートフォントの組み合わせだ。あの小さなデバイスでの入力は面倒で、音声を介して操作できるのは便利な場面もある。そしてローカルアプリケーションでは難しくとも、Web上であれば別な利用法もあるかも知れない。その可能性を感じさせるのがSpeech APIだ。 Speech APIはサーバにRed5、クライアントにはJavaScriptとFlashを使ったWebベースの音声認識システムだ。通信にはRTMPを使
Flowchart software | Diagram software | Flowchart diagram
It's FREE and Open Source ( GPL ) It's pure HTML5 Share and collaborate Export to PNG, Gif and JPEG Life time support & storage HTML5 Based ONLY on HTML5. No Flash, no Java or other plugins. Customize it! Take the sources and tune them to your needs. Share and collaborate Share diagrams with other teammates. Or make them public if you want. Free! GPL! Yes, it's a GPL application. You can tinker wi
ラフな描画にも対応したJavaScript製のシーケンス図描画ライブラリ·JS Sequence Diagrams MOONGIFT
JS Sequence DiagramsはJavaScriptを使ってUMLのシーケンス図を描画するライブラリです。 システムの仕様書を書くためのモデリング言語として知られているのがUMLです。思ったよりも普及しませんでしたが、仕様書の冗長的な文章よりも図の方が分かりやすいケースも多いです。今回はJavaScriptを使って描くシーケンス図ライブラリ、JS Sequence Diagramsを紹介します。 この手書きの乱雑さがいい感じです。 正確な描画もできます。 まさにシーケンス図です。 ノートをつけたり、全く関連し合わない図も書けます。 秀逸なのはやはり手書き風の乱雑な描画ができることではないでしょうか。正確に書くと分かりやすくなる反面、ちょっとしたミスも許されない感じになりますので、ちょっとくらいラフな方が開発もしやすいのではないでしょうか。シンプルな記法からシーケンス図が作れるのは
Webサイトの説明をまとめて表示してくれるヘルプライブラリ·Chardin.js MOONGIFT
Chardin.jsはWebサイトの画面上に項目の説明を表示するJavaScriptライブラリです。 スマートフォンアプリをはじめ、Webアプリケーションで最初に表示した時に説明を表示するタイプのWebサイトが増えてきました。凝ったものもありますが、もっとシンプルに実装したい時に使えそうなのがChardin.jsです。 最初の表示です。ボタンを押します。 各DOMごとに説明が表示されます。 ソースを見ると分かりますが、data-*で表示する内容を指定しています。 Chardin.jsは説明用のテキストとその表示位置（上下左右）、さらに一度表示した後ボタンを非表示にしたり、逆に別な要素を表示したりすることもできます。汎用的ではないかも知れませんが、手軽にチュートリアルやヘルプ画面を実現するのに便利そうです。 Chardin.jsはJavaScript製、Apache License 2.0の
WebサイトにFacebook風のチャット機能を追加·ChatJS MOONGIFT
ChatJSはJavaScript/ASP.NET製のオープンソース・ソフトウェア（BSD License）です。 同じWebサイトにいる人とチャットができる、というサービスはずっと昔から何度も出ては消え、出ては消えを繰り返してきました。今回のそのチャットサービスですが、Facebookスタイルという点がユニークです。 まず自分のユーザ名とメールアドレスを決めます。 ログインしました。右下にある名前のリストがログインしているユーザです。 別なユーザがログインしてくるとリストが自動的にアップデートされます。 チャット中。日本語も利用できます。 入力中にはその旨相手に表示されます。これによりチャットが終わっているかどうか分かりやすくなります。 ChatJSではFacebookのように対話できる人の一覧が表示され、そこから選んでチャットできます。チャットは1対1のみです。そしてログイン、ログアウ
WebRTCを使ったP2Pファイル送受信·Sharefest MOONGIFT
Sharefestはnode.js/JavaScript製のオープンソース・ソフトウェア（Apache License 2.0）です。 ネットワークを介してファイルを送ろうと思ったらよく使われるのがファイルアップローダー系のサービスです。今回はサーバ上にファイルを保存することなく複数人への同時配信を可能にする、Sharefestを紹介します。 トップページです。まず共有したいファイルをドロップします。 そうするとURLが生成されます。この時点ではファイルはオンラインで送られていませんので、すぐにURLが表示されます。 別なブラウザからアクセスすると、すぐにダウンロードが開始されます。これはWebRTCを使ってリアルタイムに送受信が行われます。 SharefestはWebRTCを使って指定したファイルをP2Pで送信します。その際の共通のセッションとしてサーバを使っています。WebRTCなので
JavaScriptを読み込むだけでリアルタイムコラボレーション·TogetherJS MOONGIFT
TogetherJSはJavaScript製、Mozilla Public Licenseのオープンソース・ソフトウェアです。 Webアプリケーションをリアルタイムコラボレーション化しようと思うとサーバサイドの様々な仕組みを開発しないといけません。そこで頓挫してしまう人も多いでしょう。しかしTogetherJSを使えばチャット及びコラボレーション機能があっという間に手に入ります。 Todoアプリの例。右側に出ている部分がTogetherJSです。 マウスボタンにユーザ名が出ています。 チャットもできます。 複数人の表示に対応しています。 TogetherJSではテキストチャットの他、動画や音声チャットも提供しています。さらに同じドメイン中における別なURL閲覧を確認したり、コンテンツの変更をリアルタイム同期もできます。何よりTogetherJSを読み込むだけで実現できるという手軽さが良いで
My Mind·Web上で高度なマインドマップを実現！ MOONGIFT
マインドマップは今もよく使います。頭の中を整理したり、網羅して考えることで思わぬ抜けを防げるようになります。ドリルダウンする形なので必要なところだけをメンテナンスするのも簡単です。 問題はマインドマップは専用アプリケーションが多いということです。インストールすれば良いのですが、それすら面倒という方は多いでしょう。そこで使ってみたいのがWebブラウザ上で使えるMy Mindです。 最初の表示です。 エンターとタブでどんどん作っていけます。 ノードの移動もできます。 ノードによっては小ノードのSUM/アベレージ数を出すこともできます。 より複雑なマップのデモ。これくらい使いこなせると面白そうですね。 保存を押すとJSONファイルでダウンロードされます。逆にJSONファイルをアップロードすれば再現もできますので、My Mindの置き場所はさほど問題ではないのかも知れません。サーバサイドの仕組みが
Remote.js·WebSocketも使わずデスクトップブラウザをリモート操作 MOONGIFT
これは目から鱗！ Googleがスマートフォンとデスクトップブラウザを連携させるサービスを幾つかリリースしています。その際にはデスクトップ側（または逆）で表示されたキーをもう片方で入力することでWebSocketによって接続しています。 技術的に高度で容易には実現しがたい訳ですが、もっと簡単にスマートフォンとデスクトップのブラウザを連携させる方法がありました。それを実現しているのがRemote.jsです。 こちらがデモ。スマートフォンで操作するとA/Bのハイライトが切り替わります。 こちらはスマートフォン側のリモコン。なぜか文字が逆になっています。 こんな感じで別なウィンドウを開いたり、閉じたりもできます。 種明かしをすると、Remote.jsは音を使っています。スマートフォンでボタンを押すと、特定の音が出ます。それをデスクトップ側のマイクで聞かせると特定のアクションを実行する仕組みになっ
Progress.js·読み込み中のストレス軽減のためのプログレスバー MOONGIFT
処理に時間がかかっている時にプログレスバーを出せばユーザストレスは幾分軽減できます。幾つものプログレスバーライブラリがありますので、目的に合わせて選ぶのが良いでしょう。 今回のProgress.jsはサイト全体はもちろん、画像などの一部の描画を行っている時に使ってみると面白そうなライブラリです。 Progress.jsの使い方 Progress.jsのJavaScript/スタイルシートファイルを読み込んだ上で、スタートを実行します。 //to set progress-bar for whole page progressJs().start(); //or for specific element progressJs("#targetElement").start(); Progress.jsのデモ 読み込み中。プログレスバーごとに速度を変えられます。 表示されました！ テキストエリ
電話テキスト化サービス·WebRTCで電話を実現しつつ音声をテキスト化 MOONGIFT
WebRTCを使ってみたいなと思いつつもサーバの準備が必要でありなかなか手を出しづらいのが実情です。しかしNTTコミュニケーションズの提供するSkyWayを使えばフレキシブルなWebRTCが手軽に手に入ります。 そんなSkyWayを使ったサンプルソフトウェアが電話テキスト化サービスです。音声認識技術とも合わせることで、音声チャットをしながらそれをテキスト化するという面白いサービスになっています。 電話テキスト化サービスの使い方 2台のコンピュータとブラウザが必要です。片方からもう片方の方に表示されている番号に電話をかけます。 受電しました。応答しましょう。 つながっている状態です。マイクにしゃべると音声が聞こえて、さらにそれがテキストになってチャット画面に表示されます。 認識精度は高いです。 漢字がじゃっかん苦手？ SkyWayではビデオチャット、ファイル転送なども可能です。対応ブラウザと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
mPulse — Real User Performance Monitoring and Real-Time Analytics | Akamai
