CMS.js - クライアントサイドで動作するCMS MOONGIFT
Webサイトの基本といえばCMSです。そのため、Web表示に使えるプログラミング言語があればまず作られるのがCMSと言えます。 今回紹介するCMS.jsもそんなCMSの一つです。プログラミング言語としてJavaScriptを使っています。 CMS.jsの使い方 CMS.jsはJekyllを使っており、実際の描画はクライアントサイドだけでできるようになっています。こちらは設定ファイル兼、スクリプトとなっています。 トップページです。記事が一覧表示されます。 記事詳細。 アバウトなどのページ機能もあります。 リンク一覧です。 CMS.jsはJavaScriptだけなのでどんなWebホスティングでも使える一方、サーバサイドのレンダリングを行っていないのでSEOに弱いという問題があります。社内であったり、ログイン後にしか使えないサイトであれば良さそうです。 CMS.jsはJavaScript/no
nativefier - Webサイトをローカルアプリケーション化 MOONGIFT
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 今やWebサイトであってもローカルアプリケーション並に使えるサイトが増えています。むしろクラウド上にデータが保存できる分、ローカルアプリケーションよりも便利な場合もあります。 そんなWebアプリケーションをローカルアプリケーション風にしてくれるのがnativefierです。 nativefierの使い方 nativefierはnpmでインストールして使います。 nativefier -name "MOONGIFT" http://www.moongift.jp/ そうするとElectronを使ってラッピングし、アプリとなります。 アプリを立ち上げるとWebサイトがそのまま表示されます。 nativefierはWebサイトをそのままラッピングしてアプリ化しているだけです。しかし普段使
rmdr - コンソールで使えるリマインダー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました タスク管理にはリマンインダーが付いているものが多いです。タスクを登録するだけでなく、必要になったタイミングで通知してくれることで思い出したり、作業をはじめることができます。 rmdrはそんなリマインダー部分だけを取り出したソフトウェアになります。面白いのはCLIで動くということでしょう。 rmdrの使い方 rmdrは例えば次のように使います。meというのは通知先の指定です。 $ rmdr me get coffee -in 1min 登録したタスクを確認することもできます。 $ rmdr list ┌────┬────────────┬─────┬────┬─────┬───┬─────┐ │ id │ message │ min │ h │ dom │ m │ dow │ ├──
Sukiyaki - Webブラウザでも動く。JavaScript製ディープラーニング MOONGIFT
ディープラーニングが盛り上がっています。大量のデータを分析する際に画一的なアルゴリズムではなく、学習しながらエンジンを磨いていくことで、これまでにない精度で分析ができるようになっています。 今回紹介するSukiyakiもそんなディープラーニングエンジンの一つですが、特徴としてJavaScriptで作られ、Webブラウザ上で動くという点があげられます。 Sukiyakiの使い方 分析の一例です。画像の数字を見極めます。最初は精度が高くありません。 学習を繰り返す内に徐々に精度があがってきました。 最後はだいたい2%に落ち着きました。 SukiyakiはGPGPUとマルチコアCPUををサポートしています。nodeでももちろん動作します。ディープラーニングをさくっと体験するにはWebブラウザで動くという利点は大きいと思われます。 Sukiyakiはnode/JavaScript製のオープンソース
Dinos - HTML5を活用。日本製WebOS MOONGIFT
HTML5の高い表現力とJavaScriptのパワーが合わさることで、かつてのコンピュータ上で実行されていたものがWebブラウザ上で再現できるようになっています。ChromeOSはその最たるものと言えるでしょう。 HTML5を使ってどこまでできるのか、それに挑戦したのがDinosです。いわゆるWebOSと呼ばれるソフトウェアの実験ですが、実用的な機能も多数実装されています。 Dinosの使い方 Dinosのトップページです。雰囲気がMac OSXっぽいですね（アイコンが右に並んでいるところなど）。 HTMLを開いたところ。ソースが表示されています。 イメージビューワー。 設定画面。 Dinosはあくまでも実験的なものであって、実用できる訳ではありません。しかしウィンドウ制御であったり、XMLベースのファイルシステム、各種Webアプリケーションなど磨いていけば十分使えるレベルになるのではない
Screenshot as a Service - Webサイトのスクリーンショットを保存するコマンド MOONGIFT
Webサイトのスクリーンショットは色々な場面で使われます。ニュース系サイトであったり、Webサイトを紹介するブックマーク的なサイトでも使われるでしょう。そんなスクリーンショットを一つ一つ手動で保存していたら時間がかかってしまいます。 そこで使ってみたいのがScreenshot as a Serviceです。Webサイトを画像化するコマンドツールです。 Screenshot as a Serviceの使い方 Screenshot as a Serviceを使ってGoogleのスクリーンショットを保存する例です。 画面の幅や高さを指定することもできます。レスポンシブなサイトに良さそうです。 さらにウィンドウの一部だけを指定も可能です。 Screenshot as a Serviceはコードから操作もできるので自動化することもできます。ウィンドウの中だけなので余計な機能拡張が写ってしまうこともあ
pangaea - JavaScriptが使えるGo製のテキストプリプロセッサ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 開発の中でテンプレートを使うことは当たり前になっています。そうすることでデザインとコードとを分離したり、繰り返しの処理などを簡略化して書けるようになります。そんな便利なテンプレートをプログラミングでしか使えないのは勿体ないでしょう。 そこで使ってみたいのがpangaeaです。Go製のテンプレートエンジンで、普段のテキスト文書を対象として処理してくれるソフトウェアです。 pangaeaの使い方 pangaeaはJavaScriptが埋め込めるのが特徴となっています。以下は例文です。 This is just a normal text file that has pangaea scripts embedded, e.g. JavaScript: <pangaea type="tex
React Desktop - Reactを使ってMac OSX/Windowsアプリを開発 MOONGIFT
Reactへの注目がどんどん高まっています。Webのビューライブラリという枠を越えて、React Nativeによってスマートフォンアプリ開発にも使えるようになっています。特にコンセプトであるLearn once, run everywhere（一度覚えればどこでも動く）が素晴らしい考えと言えます。 そんなReactを次のターゲットとしてデスクトップでも動くようにしたのがReact Desktopです。Mac OSX/Windowsに対応しています。 React Desktopの使い方 React Desktopのデモです。Webでも表示できるのがすごいです。 コントロールもちゃんと動きます。 そしてWindows 10でも使えます。 フォームもまさにWindows 10といった感じです。 メニューを隠すこともできます。 ElectronはHTML5を使ってデスクトップアプリを作ることがで
AllcountJS - デスクトップ/スマートフォン対応の高速Webアプリケーション開発フレームワーク MOONGIFT
Webアプリケーションを素早く組み上げられるフレームワークはとても重要です。ここ数年ですとRuby on Railsがそんな高速開発可能なフレームワークとして注目を集め続けていますが、他の言語でも類似フレームワークがたくさん存在します。 今回はそんなRailsっぽさはまるでなく、高速にWebアプリケーションを開発できるとしているフレームワークAllcountJSを紹介します。nodeを使い、デスクトップとスマートフォンの両方に対応しています。 AllcountJSの使い方 デモアプリです。プロフィールを表示するものになります。 編集画面があります。 スマートフォンにも対応しています。 スマートフォンでは画面遷移もスムーズです。 デモアプリではありませんが、AllcountJSではこんな感じにコードを書きます。 A.app({ appName: "Hello World", appIcon:
schedulerjs - スケジュール調整に使えそうな横向き予定表
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上で様々な作業を行えるようになったことで、UIに求められる多様性も増しています。特に面倒だと感じるのは時間関係ではないでしょうか。カレンダー、ウィークリー、デイリーなどいずれにおいても時間に合わせた表示、処理は大変です。 そこで様々なライブラリを知っておくことでいざとなった時に役立ちます。今回は横型のスケジュール選択ライブラリschedulerjsを紹介します。 schedulerjsの使い方 schedulerjsの初期表示です。 薄いブルーのエリアはドラッグしたり、端をドラッグして枠の幅を増減できます。 実際に操作しているところです。 実際の描画は予定を配列で渡すだけです。 var list = [ { 'name': 'Chewbacca', 'appointments
jQuery-KingTable - 業務システムに使えそうなテーブルライブラリ MOONGIFT
Webベースで業務システムを構築した場合、必ず必要になるのが一覧表です。そして、そこにExcel並の機能が求められます。ソートであったり、フィルタリング、ページネーションが欲しいと要望が出るはずです。 それらを一から自作するのは大変です。そこで今回はjQuery-KingTableを紹介します。 jQuery-KingTableの使い方 jQuery-KingTableのデモです。ページネーション、検索、並び替えができます。 並び替えると小さなアイコンが出ます（今回はGreenの横にアイコンがあります）。 カラーテーマを変更しました。 検索するとヒットした部分がハイライトします。 表示するカラムを絞り込めます。 表示をテーブルではなくカードに変更しました。 さらにパネルにも。 フィルタリング条件の追加もできます。 jQuery-KingTableは多機能なので、業務要件によってはこれで十分
Jotted - プラグインで拡張できるHTML/JavaScript/CSS実行環境 MOONGIFT
HTML/JavaScript/CSSの良いところはWebブラウザ上でそのまま実行できると言うことです。そのためJSFeddleやjsdo.itといったサービスが人気になります。環境を用意しないでデモが見られるのは良いことです。 そんな実行環境を自分でホスティングできるのがJottedです。プラグインの仕組みもある面白い実行環境です。 Jottedの使い方 右側がJottedを使った表示です。結果から。 HTML。 CSS。 JavaScript。 HTMLを編集してみます。 もちろん即座に反映されます。 Markdownプラグインがあります。 CoffeeScriptで書くこともできます。 Jottedを使えばJavaScript SDKなどで説明と実際の実行を一つの画面でできるようになるでしょう。また、デザインフレームワークでも活躍しそうです。 Jottedはnode/JavaScri
Web VR Starter Kit - WebでVRをはじめるならここから
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました gumiがVR専門の子会社を設立するなど、VRに対する期待は大いに高まっています。ゲームでの利用はもちろんのこと、遠隔地操作など多くの利用が考えられるだけに、その可能性を考えるとわくわくしてきます。 そんなVRをWebブラウザ上で楽しむためのスターターキットと言えるのがWeb VR Starter Kitです。 Web VR Starter Kitの使い方 Web VR Starter Kitのデモです。パノラマ写真を楽しめます。デスクトップブラウザの場合、マウスで動かせます。OculusのようなVRグラスをつければ、被って頭で映像の方向を変えられます。 360度の写真が必要ですが、そこはRICOH THETAなどが使えますね。 別なデモです。動画をVRの中で閲覧できます。使いこな
Booking.js - 空いている時間を表示するスケジュール管理 MOONGIFT
忙しくなってくるとミーティングなどの時間調整もままならなくなっていきます。なんとなく避けて提示した時間が相手にとってはピンポイントだったりして、いつまでも調整がつかないなんてこともあります。 そこで自分の予定をオープンにして、空いている時間を埋めてもらうのはいかがでしょう。Booking.jsはまさにそんなUIを提供します。 Booking.jsの使い方 Booking.jsのUIです。週間表示で1時間ごとに枠が決まっています。 空いている時間を選択すると予定を差し込めるようになっています。 こんな感じで自分の情報を入れればOKです。 複数のカレンダーにも対応。ビフの予定は入れたくないですね…。 Booking.jsは国に合わせて日付などの表記を変えたり、コールバックを受け取ることもできます。上司と面談する時間を各自で決めたり、弁護士などの仕業の方にとって便利なUIかも知れません。 Boo
screenlog.js - console.log代替。画面上にログ出力 MOONGIFT
Webフロントエンドの開発時にDevToolsを開くことはよくあるかと思います。ただ、画面の大きさを結構とりますし、常に開いておくのが邪魔という方もいるでしょう。 そこで使ってみたいのがscreenlog.jsです。console.logのように使えて、画面上にログを出力してくれるソフトウェアです。 screenlog.jsの使い方 screenlog.jsを使っているのでところです。右上にデバッグメッセージが出ています。 自動的にメッセージが追記されていきます。 screenlog.jsはconsoleオブジェクトの代わりにscreenLogオブジェクトを使います。ログのクリアもできるので、デバッグに活躍してくれるのではないでしょうか。 screenlog.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 chinchang/screenlog.j
jQuery formBuilder - jQueryによる動的フォームが作成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました マーケターの人たちはアンケートフォームを数多く作成します。そんな時に一回一回プログラマに依頼して作成してもらうのでは時間もかかりますし面倒です。 そこで使ってみたいのがjQuery formBuilderです。jQuery formBuilderを使えば自由にフォームが作れるので、後はそのデータを保存できるようにすればいいだけです。 jQuery formBuilderの使い方 jQuery formBuilderのデモサイトです。項目は自由にドラッグ&ドロップできます。 編集で細かいところを直せます。 リストなどは項目を設定できます。 実際のレンダリング結果を確認できます。 jQuery formBuilderは汎用的なフォームができますので、後はそのデータをJSONなりでまとめ
Showoff - Sinatra製のHTMLスライド
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プレゼンテーションにおいてスライドは重要な要素になります。PowerPointを使ったものは似たり寄ったりで眠くなりますし、Keynoteの派手なアニメーションも出尽くした感があります。 そこでHTMLプレゼンテーションの出番です。しかも自分でカスタマイズまでできてしまうものはいかがでしょう。今回はSinatra製のShowoffを紹介します。 Showoffの使い方 Showoffのデモです。 キーボードで次のスライドに切り替えられます。目立たせたいところを点滅させることもできます。 実際に使っているところです。 Showoffはこれまでに出てきたHTMLスライドと比べてアニメーションが多機能に見えます。HTMLスライドは簡素なものが多いのですが、少しでも目立たせたいと考えると方
pdf.js-controller - PDF.jsを使ったWebスライド MOONGIFT
FirefoxではPDFビューワーをJavaScriptで実装しています。それがPDF.jsです。PDFは公開されているフォーマットではありますが、解析して表示するのはとても大変なものだと想定されます。 そんなPDF.jsを活用してスライドビューワーにするのがpdf.js-controllerです。PDFプレゼンを行うのに向いていそうです。 pdf.js-controllerの使い方 実行しているところです。ちょっと余計な文字が下に出てしまっています。 矢印キーを使ったスライド移動にも対応しています。 ツリービューのような複雑な表示にも対応しています。 PDF、さらにJavaScriptとは思えない表示ですね。 PDFはビジネスの場では数多く使われています。編集が容易ではないことがメリットですが、その結果として再利用性が悪いのが欠点でした。pdf.js-controllerを参考にすればP
Feature.js - Webブラウザで実装されている機能をチェック MOONGIFT
HTML5でWebブラウザの機能標準化が行われていますが、まだまだ統一はされていません。ブラウザによって得て不得手あり、実装されていない機能もたくさんあります。 それらを逐一調べながら実装していっても良いですが、Feature.jsを使うことで各機能の実装状態を手軽にチェックできるようになります。 Feature.jsの使い方 例えばWebGLの実装確認は次のようにできます。 if (feature.webGL) { console.log("WebGL supported"); } else { console.log("WebGL not supported"); } Safariの各機能の実装状態。結構未実装なのが分かりますね。 Google Chromeの場合。ないのはタッチとコンテクストメニューくらいです。 Feature.jsを使うことでfeatureオブジェクトの各プロパティ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - RobertoPrevato/jQuery-KingTable: A jQuery plugin for administrative tables that are able to build themselves, on the basis of the input data.
