Lottery - 何が当たるかな。Webベースの抽選マシーン MOONGIFT
みんな大好き抽選会。何かいいものが当たらないかとわくわくしながら待っていることでしょう。主催者側にとっては、そのワクワク感をさらに盛り上げるための工夫が必要になります。 今回はLotteryを紹介します。見た目の演出も楽しい、抽選マシーンです。 Lotteryの使い方 実際に動いているところです。 顔写真のアイコンが並んでいるので、社内であったり、カンファレンスの内容をTwitterでシェアした人限定などとすると面白いかも知れません。自分のところにフォーカスが当たると、もしかしたら選ばれるかもと思ってしまいますね。 LotteryはHTML5/JavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 Lottery meetmore/lottery.js: ? A simple javascript lottery app
Nat.js - Vue/Weexで使えるモバイルフレームワーク MOONGIFT
JavaScriptでスマートフォンアプリを作る、一つのコードでiOS/Android両方に対応するという夢に挑戦する人たちは後を絶ちません。かつてのTitaniumであり、現在のReact Nativeでもあります。 そして今回はもう一つの存在、Nat.jsを紹介します。こちらはVueやWeexなどで使えるライブラリ集になります。 Nat.jsの使い方 Nat.jsを使ったチュートリアルアプリを紹介します。こんな感じで機能が並んでいます。別なアプリを立ち上げたり、写真やオーディオ、動画を扱ったりできます。 Nat.callで電話をかけられます。 画像を選ぶ場合。 写真の撮影もできます。 モーダル、ネットワーク、位置情報、センサーなどの機能もあります。 さらに各種デバイスの情報も取れます。 Nat.jsは前述の通り、WebであればVueが使えて、ネイティブアプリであればWeexと組み合わせ
hls.js - JavaScript製のHTTP Live Streamingクライアント MOONGIFT
Appleがキーノートなどの配信に使っているのがHTTP Live Streamingと言われるプロトコルです。特別なプロトコルではなく、HTTPを使っているのがメリットですが、サポートしているブラウザがSafariくらいというのが難点です。 そこで使ってみたいのがhls.jsです。JavaScriptで作られたHTTP Live Streamingクライアントです。 hls.jsの使い方 設定も用意されています。エラーが出ても自動で回復してくれます。 Google Chromeでも動きます。10秒前後に動かすといったアクションもJavaScriptからできます。 hls.jsを使えばモダンなブラウザであればHTTP Live Streamingを提供できるようになります。良い動画配信プロトコルが見つかっていなかった方はhls.jsを使ってみてはいかがでしょう。 hls.jsはJavaSc
Smooth Scrollbar - スムーズなスクロールの制御
Webページは大抵縦長になっています。そしてマウスなどのスクロールを使って下の情報を表示します。つまりスクロールという機能はブラウジングの基本とさえ言えるでしょう。 そんなスクロールを標準のまま使うのではなく、もっと細かく制御できるのがSmooth Scrollbarです。 Smooth Scrollbarの使い方 様々なパラメータを使ってスクロールバーの動きを制御できます。 DOMの中でスクロールを埋め込む際にも制御できます。 Smooth Scrollbarの動きは実際にスクロールをしてみないと分かりづらいので、デモサイトでぜひトライしてみてください。もの凄く動きを軽くすることもできれば、粘度が高い感じにすることもできます。慣性を強くして、ゆっくりと進み続けるというのも面白いです。プラグインによる拡張もできるようです。 Smooth ScrollbarはJavaScript製のオープン
jsweet - JavaからJavaScriptへ変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JavaScriptはWebブラウザ上で動作することが保証されている唯一のプログラミング言語なので、Webに関わる開発をする方にとっては必修の存在と言えます。しかし、それでも書きたくないという方も多いでしょう。 そこで今回はJavaプログラマに使ってみて欲しいjsweetを紹介します。コンパイルするとJavaScriptになるJavaです。 jsweetの使い方 例です。元々のJavaはこのような形になります。 package quickstart; import static def.dom.Globals.alert; import static def.jquery.Globals.$; import java.util.ArrayList; import java.util
Blazer - SQLを使ってデータベースから有益な情報を引き出そう MOONGIFT
ビジネスの根幹にはデータベースがあります。日々の業務を通じて蓄積されていくデータをいかに検索し、有益なデータを抽出するかがビジネスの成否を決めると言っても過言ではないでしょう。 そのために必要なのがSQLを自由に実行できる環境です。今回はBlazerを紹介します。 Blazerの使い方 最初の画面です。データが一覧表示されています。 インクリメンタルサーチに対応しています。 任意のSQLを実行できる環境も用意されています。 SQLを実行し、そのまま保存もできます。 位置情報がある場合は地図にマッピングされます。 テーブルの構造も確認できます。 Blazerを使えば任意のSQLを実行して、それを保存しておけます。同じ条件であれば一度開発者が組み立てておくことでマーケターや営業の方はセルフサポートできるようになるでしょう。データベースをビジネスに活用するためには必須のソフトウェアです。 Bla
Terminal Kit - CLIのソフトウェアをパワーアップ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 開発者向けのツールを開発する場合、GUIがない方が手軽で自動化も考えられるのでメリットがあります。しかしユーザビリティを考えるならばインジケータを付けたり、インタラクティブに入力がある方が良いでしょう。 今回はそんなCLIツールを便利にしてくれる機能を満載したTerminal Kitを紹介します。 Terminal Kitの使い方 サンプルです。ファイル選択機能です。 $ node sample/file-input-doc1.js Choose a file: /path/to/saturn.txt Your file is '/path/to/saturn.txt ' さらにコマンドを入力させて、それを取得するデモ。 $ node sample/input-field-doc4
Franchise - 多数のデータベースに対応したSQLノートブック
SQLを覚えると実務で使える様々なデータを取得できるようになります。毎回同じようなSQLを記述するのが面倒で、テキストファイルに定番のSQLをメモで残している方も多いのではないでしょうか。 そんな方にお勧めなのがFranchiseです。SQLを残しておけるノートブックです。 Franchiseの使い方 メイン画面です。複数のデータベースに対応しています。 結果を地図に描画する例です。 グラフ。線グラフです。 棒グラフ。 並び替えた棒グラフ。 ドットだけ。表示を2カラムにしています。 一般的な一覧表も可能です。 レンジを使ってその時の値を表示するパターン。 メールを取り込んでクエリを投げるパターン。 FranchiseのデータリソースはSQLite/PostgreSQL/BigQuery/MongoDB/Microsoft SQL Server/Oracle/DB2/Teradataなどとな
Code Quality Checker - プログラムコードの品質チェッカー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました コードの品質はどう判断したら良いでしょうか。幾つかの判断基準はあると思いますが、複雑さやコードの重複などは挙げられるでしょう。そうしたネガティブな要素が積み重なった結果、バグを含みやすくなると言うことはあると言えます。 今回紹介するCode Quality Checkerはコードの品質チェックを行ってくれるソフトウェアです。 Code Quality Checkerの使い方 Code Quality Checkerはファイルのリストを渡すだけで実行できます。とあるJavaScriptプロジェクトの例。 $ cqc src/**/*.js Number of files: 3 Source lines of code: 203 Duplicate rate: 0.00% High c
dokieli - Web上のコンテンツエディタ/コメントシステム MOONGIFT
Web上にコンテンツを公開し、それに対して指摘が欲しいと思った時にはチャットなどを使うでしょう。できればWeb上でそのままコンテンツに書き込みができると便利です。 それを可能にするのがdokieliです。コンテンツの編集やコメントに加えて様々な機能が備わっています。 dokieliの使い方 デモです。右側にあるメニューをクリックします。 様々な機能が用意されています。 テキストを選択すると装飾用のツールバーが表示されます。 コメントができます。ライセンスを決められるのも面白いです。 dokieliを使えばコンテンツのレビュー、アノテーション、シェアなどのプロセスが容易になります。作りはクライアントサイドだけなので、サーバ側に保存する仕組みは別途用意する必要があるようです。認証はURIを指定する方法になっています。コンテンツの編集はオフラインでも行えて、最終的にサーバに保存するようになってい
Nulis - 文章を書く人のためのツリーエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 文章を書くときにはまず構成を考える必要があります。章立てを考えて、その中で何を書くのかを順番に決めていきます。段階的に掘り下げていくことで、その中で何を書くべきかを明確にしていけるでしょう。 そんな時に役立つのがNulisです。文章を書くためのツリーエディタです。 Nulisの使い方 メイン画面です。幾つかのブロックに分かれています。 各内容を連結させて書いていけます。 最初から書くとこんな感じです。 検索もできます。 Nulisを使うと文章を構造的に考えられるようになります。Trelloに似た形ですが、より文章を書くのに特化しているようです。画像を使ったり、キーボードショートカットで素早く移動しながら文章を構築できるでしょう。 NulisはJavaScript製のオープンソース・
UI Recorder - node.js製のSelenium IDE代替 MOONGIFT
Selenium IDEが最新のFirefoxで動かなくなりました。これに伴い、新しいAPIで動くIDEも開発がスタートしたようですが、それを待つのも辛いでしょう。かといって旧バージョンを使い続けるのも問題です。 そこで使ってみたいのがUI Recorderです。新しく登場したSelenium IDEライクなWebブラウザの操作記録ソフトウェアです。 UI Recorderの使い方 UI Recorderではまずディレクトリを作って初期化します。 $ uirecorder init __ ______ ____ __ / / / / _/ / __ \___ _________ _________/ /__ _____ / / / // / / /_/ / _ \/ ___/ __ \/ ___/ __ / _ \/ ___/ / /_/ // / / _, _/ __/ /__/ /_/
src2png - ソースコードを画像に変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ソースコードを埋め込んで表示してくれるサービスは多数ありますが、ブログによっては対応していないこともあります。さらにそもそもコードのシンタックスハイライト表示にも対応しておらず、コード表示が微妙になってしまうこともあります。 そんな時にはsrc2pngを使ってみましょう。画像ではありますが、ソースコードを綺麗に表示してくれます。 src2pngの使い方 使い方は簡単で、src2pngコマンドにソースコードファイルを渡すだけです。 $ src2png SOURCE_FILE そうすると綺麗な画像を生成してくれます。 src2pngはPoiという開発用のHTTPサーバを立てて、そこでソースコードをハイライト表示します。そしてヘッドレスブラウザを使ってスクリーンショットを撮るという仕組み
Ordinance format jp - Markdownで日本の公文書を記述
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownは広く使われるようになっていますが、シンプルな記法だけに簡易的なHTMLへの変換以外のニーズ向けとなると使い勝手が悪いことがあります。そのためグラフを入れられるようにしたり、チャートを描けるようにするソフトウェアが作られます。 今回紹介するOrdinance format jpもその一つです。日本の公文書フォーマットに合わせたMarkdown記法です。 Ordinance format jpの使い方 サンプルです。左側が拡張されたMarkdownで、右側に展開されます。 ラベルが付けられたり、補足情報の記述、リストの番号の付け方が変わっています。 Ordinance format jpを使うことで普段から慣れているMarkdown記法のまま、公文書風に仕上げることが
notes - ベンダーロックインの心配がいらないノートアプリ MOONGIFT
メモを取る環境は多々ありますが、ローカルで行っている人も多いはずです。そして最近であればMarkdown記法を使っているケースが多いでしょう。その結果、特定のフォルダやローカルディスク内に多数のMarkdownファイルが散らばったりします。 そうした情報の散在や特定Webサービスによる情報のロックインを防げるソフトウェアがnotesです。 notesの使い方 notesはコマンドであり、newサブコマンドで新しいファイルを作成できます。 $ notes new Test 環境変数のEDITORで編集できます。そしてlsで保存されているファイルを一覧できます。 $ notes ls Test.md さらにgrepでファイル内部を含めて検索できます。 $ notes grep H.*e Test.md 開くときにはopenを使います。 $ notes open Test.md notesはとて
Responsivook - 縦書き/横書きに対応したレスポンシブな電子書籍 MOONGIFT
今のWebデザインはあらゆるデバイスに合わせてレスポンシブにすることが求められています。それは何もWebブラウザだけでなく、HTMLをベースとした文書にも適用されます。 今回は電子書籍をターゲットにしたResponsivookを紹介します。縦書き、横書きともにレスポンシブになります。 Responsivookの使い方 縦書き表示です。 ブラウザの幅を変更すると一ページの行数が変化します。 段組されていてもきちんと表示されます。 段組されている中での幅変更。 もちろん横書きも対応しています。 横書きで幅を変更したところです。 横書きも段組に対応しています。 Responsivookはベースにnehan.jsを使っています。そのため、縦書きは適切に表現されます。そしてレスポンシブになったことで文字サイズの変更や画面幅の変更に対して強くなっています。 ResponsivookはJavaScrip
qbrt - Geckoエンジンを使って特定サイトだけ立ち上がるアプリを生成 MOONGIFT
ElectronはWeb標準の技術を使ってデスクトップアプリケーションが作れるとあって人気があります。とは言え、よく使われるのはWebサイトのガワアプリで、特定のサイトだけ使える点においてセキュリティ上のメリットがあります。 そんなガワアプリをコマンドラインで作れるのがqbrtです。さらにレンダリングエンジンとしてWebKitではなく、Geckoを採用しているのが特徴です。 qbrtの使い方 例えば以下のように実行します。 qbrt run https://www.moongift.jp/ そうすると指定したサイトだけを表示して立ち上がります。 qbrt package url と実行するとアプリが作れます。これで特定のサイトだけが利用できるアプリが作られます。悪意あるサイトに情報を吸い取られる心配も減りますし、常時立ち上げておくサイトを指定しておくとWebブラウザを安心して再起動できるで
gtop - ターミナル上のシステムダッシュボード
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました システム管理者はシステム全体のステータスを把握する必要があります。そのためにサーバ側データを送信して可視化するダッシュボードソフトウェアがたくさんあります。 しかしデータをあえて飛ばすことなく、ターミナル上でそのまま確認できるのがgtopです。 gtopの使い方 メイン画面です。 データはリアルタイムに書き換わります。CPU、ディスク容量、プロセス、メモリ、ネットワークなどの多数の情報が可視化できるようになっています。何よりターミナル上で実行されるので、別途表示するツールを用意しないので良いのが利点です。なおデータは蓄積されないので、実行したタイミングから表示されていく形になります。 gtopはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）
VUESTIC - Vue.jsを使ったシステム管理画面テンプレート MOONGIFT
Webサービスを作っていて、必要になるのが管理画面です。多くは開発工程の最後に回されて、予算もないために簡易的な画面で作られます。しかしより良い管理を行うためには管理画面もこだわりたいものです。 今回はVue.jsを使った管理画面、VUESTICを紹介します。 VUESTICの使い方 トップページです。アイコンが大きめで分かりやすい表示です。 画面上部のアイコンをクリックするとメッセージが表示されます。 グラフです。 進捗。プログレスバーです。 入力系です。 テーブル表示も複数パターンで表示されています。 タイポグラフィ。 ボタン。 アイコンは様々なアイコン集に対応しています。 グリッド。 確認用のダイアログ。 アラート。 ログイン用のUI。 地図。 グローバルな地図。 拡大表示。ノードはアニメーションしています。 VUESTICには一般的な管理画面で必要な画面の構成要素を網羅しています。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google、Webブラウザで実行できる機械学習ライブラリ「deeplearn.js 0.1.0」をリリース
