GoMocha - テイクアウトの予約システム
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました スターバックスや多くのカフェやレストランでオンラインによる注文受け付けシステムが出始めています。オンラインで注文し、指定時間になったら引き取りに行くだけです。とても手軽で効率的なシステムです。 自分のお店でもそんなシステムを導入したいという方はGoMochaを使ってみましょう。 GoMochaの使い方 注文開始です。まず名前を入れます。名前があるのが何となく海外っぽいですね。 開始です。 お店を選択します。 商品を選びます。デカフェオプションが良い感じです。 商品を追加しました。 商品を取りに来る時間を選びます。また、交通手段も選びます。 注文の確認です。 注文が完了しました。 注文の履歴も確認できます。 GoMochaはお店側の管理画面もあり、注文内容を一覧して完了したらステータ
clasp - ローカルでGoogle Apps Scriptを開発
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Google Apps Scriptを使えばGoogleスプレッドシートであったり、スライドなどを自動操作できる仕組みが作れます。さらにWeb APIもあり、外部からデータをウケたり、送信することも可能です。 そんなGoogle Apps Scriptをローカルで作成できるのがclaspです。 claspの使い方 clasp new で新しいプロジェクトが作れます。一度 clasp pull するとCode.gsがダウンロードされるので、後は編集してpushします。 $ clasp push └─ Code.gs └─ appsscript.json Pushed 2 files. ローカルで開発はできますが、実行できる訳ではないので注意が必要です。開発したらpushして、それから
Blazer - SQLを使ってデータベースから有益な情報を引き出そう MOONGIFT
ビジネスの根幹にはデータベースがあります。日々の業務を通じて蓄積されていくデータをいかに検索し、有益なデータを抽出するかがビジネスの成否を決めると言っても過言ではないでしょう。 そのために必要なのがSQLを自由に実行できる環境です。今回はBlazerを紹介します。 Blazerの使い方 最初の画面です。データが一覧表示されています。 インクリメンタルサーチに対応しています。 任意のSQLを実行できる環境も用意されています。 SQLを実行し、そのまま保存もできます。 位置情報がある場合は地図にマッピングされます。 テーブルの構造も確認できます。 Blazerを使えば任意のSQLを実行して、それを保存しておけます。同じ条件であれば一度開発者が組み立てておくことでマーケターや営業の方はセルフサポートできるようになるでしょう。データベースをビジネスに活用するためには必須のソフトウェアです。 Bla
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
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サーバを立てて、そこでソースコードをハイライト表示します。そしてヘッドレスブラウザを使ってスクリーンショットを撮るという仕組み
google-apps-script - Google Apps Scriptをローカルで開発/管理 MOONGIFT
Google Apps Scriptを使うとGoogleスプレッドシートやドキュメントなどの自動操作ができるようになります。若干特殊なJavaScriptにはなりますが、デバッグ実行もできるので開発もしやすいです。難点はコードをすべてWeb上で書くという点です。 開発をローカルで行いたいという方はgoogle-apps-scriptを使ってみましょう。 google-apps-scriptの使い方 createオプションを使ってコードを生成します。 $ gas create gas-test Creating 'gas-test' in your Google Drive... [✔] [1ePybn623IqFsWw7qmIGQnfFxX5lVDMJ_hbMIuaSIwub9Sj29i1aIj1ax] gas-test 後はコードを変更するだけです。listで既存のスクリプトが一覧できま
jsonsmash - ファイルシステムのような操作ができるJSONビューワー MOONGIFT
Web APIを伴う開発を行う際にはJSONファイルを使うことが増えています。XMLに比べると冗長性がなく、サイズが小さくて済むのですが、改行などもなく見づらいのが難点です。そのため、データのある場所を間違えてしまって、うまく動かないなんてこともよくあります。 そこで構造を確認するために使ってみたいのがjsonsmashです。インタラクティブにJSONの内容を確認できます。 jsonsmashの使い方 jsonsmash コマンドにJSONファイルを渡せばOKです。そしてlsでキーを並べたり、catでデータの表示ができます。 $ jsonsmash http://headers.jsontest.com/ > ls Host X-Cloud-Trace-Context > cat X-Cloud-Trace-Context: 0f8474abd239690f43f5e9c82b07ff7f
VMS - Vue.js製のCMS MOONGIFT
CMSは常に新しいものが登場します。それはプログラミング言語だったり、フレームワークだったりします。CMSがあることで、そのプログラミング言語やフレームワークの使い方が分かるようになります。CMSは殆どの方が機能について理解していますので、コードの理解も早いでしょう。 今回はVue.jsを使ったCMS（管理画面）のVMSを紹介します。 VMSの使い方 管理画面のダッシュボードです。 ユーザ一覧。 ページを追加する画面です。 アンケート機能もあります。 こんな感じで設問を追加します。 質問の一覧です。 VMSはVue.jsでできていますので、UIの遷移などはとてもスムーズです。Vue.jsの書き方、使い方を学ぶ上でも役立つのではないでしょうか。なお、ユーザが見る画面については自分で開発する必要があるようです。 VMSはnode/JavaScript製のオープンソース・ソフトウェア（MIT L
png2svg - PNGをSVGに変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました SVGもドロー系フォーマットとして一般的になりつつあります。モダンなWebブラウザは表示に対応していますし、JavaScriptと組み合わせればFlash風なインタラクティブ性を持ったコンテンツも作成できます。 そんな中紹介したいのが画像をSVGに変換するというpng2svgです。 png2svgの使い方 png2svgを実行する際のコマンドです。画像をフルパスで与えるのが注意点です。 >.\png2svg.exe -f C:\ダウンロード\png 2svg-win64\png2svg-win64\image.png -q 0.7 そうすると画像がSVGになります。 png2svgは特に画像を解析している訳ではありません。画像をBase64にして、SVGの中に埋め込んでいるだけです
glsl2img - GLSLファイルを画像に変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 3Dやグラフィックスを描くのに使われるのがシェーディング言語になります。その一つで知られるのがGLSL（OpenGL Shading Language）で、OpenGLの中で使われているシェーディング言語です。 そんなGLSLが書かれたファイルを画像に変換するのがglsl2imgです。 glsl2imgの使い方 まず一つ目としてglsl2pngがあります。これはその名の通り、PNG画像にします。 タイミングも指定可能です。 さらにglsl2gifはアニメーションGIFを出力します。 glsl2imgを使うのは一般的にグラフィックスソフトウェアなどになりますが、glsl2imgを使えば画像にできます。後は多くの場面で好きなように使えるでしょう。Webはもちろんスライドの中に埋め込んだ
maildown - Markdownを日本企業で使えるメール文面に変換 MOONGIFT
Markdownが便利な記法であってもすべてに使える訳ではありません。まだまだ個人間でやり取りされるメールはテキストが一般的で、HTMLメールが使われることはほぼありません。となるとMarkdownの出番がありません。 そこで作られたのがmaildownです。Markdownで書かれた文章を日本企業で使われるメール風の体裁にしてくれます。 maildownの使い方 左側が元文章、右側が変換された内容です。 リストなどに特徴があります。 maildownではリストの他、罫線を使ったテーブル表示、見出しの処理、80文字で改行などと細かな部分を日本企業風に仕立ててくれます。また、下には変換された部分やタイポなどの指摘がされるようになっています。日本風と言わずともメール用のMarkdownコンバータとして便利なソフトウェアです。 maildownはnode/JavaScript製のオープンソース・
GanttPad - テキストからガントチャート生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました プロジェクト管理と言えばガントチャートと言うくらい必要としている方は多いです。少なくとも一覧では分からなかったタスクの関連であったり、今後のタスクの予定が可視化されるようになります。それによって無理が来るポイントなども掴めるようになるでしょう。 今回紹介するGanttPadはテキストで書いたタスクをガントチャートに展開してくれるソフトウェアです。 GanttPadの使い方 下にあるテキストエリアに入力すると、上にあるガントチャートに反映されます。 日付フォーマットは柔軟なようです。 新しいチャートの作成もできます。 GanttPadはテキストをガントチャートに展開してくれるので、多くのシステムと連携ができそうです。タスク名、日付さえ出力すれば良いので既存システムからそういった文字列
Print.js - Webで任意のコンテンツを印刷できます MOONGIFT
Webが苦手としているものの一つに印刷があります。Webサイトを印刷しようとしてデザインが崩れてしまった経験はないでしょうか。また、ごく一部だけ印刷したいのにそれもままなりません。 そこで使ってみたいのがPrint.jsです。印刷対象を細かく指定できるソフトウェアです。 Print.jsの使い方 一例です。PDFファイルを指定すると見ているHTMLと全く違うPDFが印刷できます。 <button type="button" onclick="printJS('docs/printjs.pdf')"> Print PDF </button> さらにフォームの印刷も。 <form method="post" action="#" id="printJS-form"> ... </form> <button type="button" onclick="printJS('printJS-form
Prettier - JavaScriptのコードを見やすく整形
JavaScriptは人によって書き方が変わる言語でもあります。企業によっては基準を設けたりしますが、それでもLint系で注意するのが精一杯でしょう。見づらいコードはそれだけバグをはらみやすく、システムの品質を低下させます。 そこで使ってみたいのがPrettierです。JavaScript用のコード整形ツールです。 Prettierの使い方 左側が元コード、右側が変換後のコードです。 引数の与え方などが大きく変わっています。 配列なども綺麗に並んでいます。 Prettierを使うとルールに合わせてコードを変換してくれます。改行やインデントでの整形になるので、動作が変わることはありません。インデントはタブか空白か選択できたり、ダブルクォートかシングルクォートかといった指定もできます。パーサーも指定できるので、自社好みのカスタマイズもできるでしょう。 Prettierはnode/JavaScr
pnpm - npmの高速化と容量削減を実現
npmは優れたパッケージ管理システムですが、使っていると速度が遅くてストレスを感じることがあります。その挙げ句にエラーが出たら目も当てられません。それを解決するためにyarnも作られていますが、まだ機能的に十分でないこともあります。 そこで使ってみたいのがpnpmです。高速かつディスクスペースを低減してくれるnpmです。 pnpmの使い方 標準のnpmでインストールした場合。 pnpmを使った場合。3MBくらい小さくなっています。 pnpmでは複数のモジュールを平行してビルドする方式をとっており、高速化を実現しています。依存関係をフラット化することで余計なものをインストールせず、ディスク容量をセーブしています。 pnpm/pnpm: Fast, disk space efficient npm installs
ts2c - JavaScript/TypeScriptのコードをCに変換 MOONGIFT
JavaScriptはWebブラウザで動作する保証がある唯一のプログラミング言語です。さらにnodeによってサーバサイドやデスクトップなどでもJavaScriptでソフトウェアが作れるようになっています。 今回紹介するのはts2c、JavaScriptやTypeScriptをCのコードに変換するソフトウェアです。 ts2cの使い方 例です。 さらにfor文を追加してみます。 生成されたコードをgccでコンパイルすると、ちゃんと結果が表示されます。 $ ./a.out Hello world!a Hello world!b Hello world!c もちろんすべてのコードが問題なく動くわけではありませんが、JavaScriptの中でも特に速度が求められる時にはCで実行するという選択肢ができそうで面白いです。ぜひコードを書いて試してみてください。 ts2cはTypeScript製のオープンソ
mdpdf - スタイル設定が指定できるMarkdown to PDF
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました MarkdownはHTMLだけでなく、他のフォーマットに展開する際にも使える便利な記法です。よくあるのはPDFではないでしょうか。しかし殆ど装飾も行われないシンプルなPDFなので、業務や報告書で使うのはちょっと躊躇してしまいます。 そこで使ってみたいのがmdpdfです。スタイル設定などが可能なMarkdownからPDFへの変換ソフトウェアです。 mdpdfの使い方 変換例です。ヘッダーを追加しました。 2ページ目にもちゃんとヘッダーが表示されます。 こちらはスタイル設定を適用したものです。先ほどとはフォントが異なります。 別なスタイルシート。文字が大きすぎて被ってしまっていますが、修正すれば問題ないでしょう。 mdpdfではスタイル設定としてCSSが使えるのがポイントです。つまりM
tlapse - 指定したURLに定期的にアクセスしてスクリーンショットを保存 MOONGIFT
Webサイトの作成はゼロから形になるものを作っていく、作品としての一面を持っています。いきなり完成品ができあがる訳ではなく、色々試行錯誤しながら、再読込を繰り返しつつできあがっていきます。 そんなWebサイトのできあがっていく様を残し続けてくれるのがtlapseです。 tlapseの使い方 tlapseは以下のように利用します。 tlapse --every 5m --directory ./screens -- localhost:3000 そうするとlocalhost:3000に5分ごとにアクセスして、スクリーンショットを残し続けてくれます。PNG画像でできあがるので、後はImageMagickなりを使うとアニメーションGIF化もできます。 何も作業していない時はスクリーンショットが重複するので、その場合は画像は保存されません。固定のURLを指定するので、別なページのスクリーンショット
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - angular/closure-demo
