Nodebook - Webブラウザで使えるnodeプレイグラウンド
JavaScriptを覚えることで、Webブラウザはもちろんサーバサイド、IoTなど幅広い環境でソフトウェアを開発できます。環境を整えるのは決して難しくはありませんが、それがネックになって習得を頓挫してしまっているとしたら非常に勿体ないことです。 そこで使ってみたいのがNodebookです。JavaScriptファイルの編集と実行ができるソフトウェアです。 Nodebookの使い方 Dockerで実行した場合です。Webブラウザからアクセスします。 ブックとして残しておくこともできます。 もちろん実行時エラーも表示されます。 Nodebookは手軽に実行できるnode実行環境です。Dockerやクラウドで実行するならば、nodeのインストールも不要です。ローカルのファイルを指定したり、クラウドのファイルを使ってJavaScriptの練習や学習が可能です。 Nodebookはnode/Jav
Mailin·メールをJSONにしてくれるnode製のSMTPサーバ MOONGIFT
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました メールとWebシステムを連携できると便利だよなと思いつつもメールサーバとしての堅牢、安定性やメールの解析などで二の足を踏んでしまっているという人は多いのではないかと思います。 特にメールの解析が面倒と考える方に使ってみてほしいのがMailinです。node製のSMTPサーバで、受け取ったメールをなんとJSONにしてくれる機能があります。 Mailinの使い方 Mailinはnpmでインストールができてとても簡単です。 $ sudo mailin Password: warn: Either spamassassin or spamc are not available. Spam score computation is disabled. info: Mailin v0.0.10
Kantu Browser Automation - Seleniumの後継になるか。テストもできるブラウザ自動操作IDE MOONGIFT
Firefoxのバージョンアップに伴い、Selenium IDEが使えなくなりました。その代わりになるソフトウェアが数多く作られており、ビジュアルテスティングの覇権争いが続いています。 そんな中紹介したいのがKantu Browser Automationです。Selenium IDE風にレコーディング、そしてテストまでできるソフトウェアです。 Kantu Browser Automationの使い方 メイン画面です。左側にマクロとしてレコーディングした内容を保存できます。 スクリーンショットを撮って、IDE内で確認もできます。 ビジュアルタブで画面の内容を確認できます。 テストをKantu Browser Automation上で作って、そのまま実行できます。 Kantu Browser AutomationはGoogle ChromeとFirefox向けに作られています。レコーディング
imagemin - 画像サイズをコマンドラインでまとめて軽減
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ネットワーク上に流れるデータは極力小さい方が良いです。圧縮はもちろん、余計なメタ情報を削除したりして、ネットワーク負荷を軽減するのが望ましいでしょう。しかし一つ一つのファイルを手作業でやるのは現実的ではありません。 そこで自動化です。今回はコマンド一つで画像サイズを軽減できるimageminを紹介します。 imageminの使い方 例えば以下のようにコマンドを実行します。これだけでPNGファイルをまとめて処理してくれます。 $ imagemin *.png -o ./out 処理前後のファイルです。682KBが433KBになっています。37%削減されています。 imageminはオプションとして他の画像圧縮ライブラリを指定できます。より圧縮率の高いアルゴリズムを指定するのも良いでし
pgModeler - 強力なビジュアル化が可能なデータベースモデリング MOONGIFT
O/Rマッパーなどによってデータベースを意識せずに開発できるようになっています。しかしデータベースは設計次第でシステムのボトルネックになることも多く、やはり適切な設計能力は重要です。 今回紹介するpgModelerはPostgreSQLに特化したデータベースモデリングソフトウェアになります。 pgModelerの使い方 起動しました。 デザイン画面です。 サンプルを開いたところです。グループ化やコメントも付けられるのでビジュアル的にも分かりやすいです。 テーブルの設計画面です。 アウトプットはSQLや画像、さらに直接データベースへの実行もできます。 pgModelerはデータベースを設計するだけでなく、ビジュアルにも気が配られています。これならば仕様書として使うこともできるでしょう。ここまでのビジュアル化はデータベースからインポートするタイプのソフトウェアでは難しいでしょう。なお、pgMo
CodeWich - TypeScript対応、サーバレスなHTMLプレイグラウンド MOONGIFT
JSFiddleやCodePenなど、HTML/JavaScript/CSSのプレイグラウンド的サービスが多数あります。多くのサービスは専用のURLが払い出され、そのURLにアクセスして使います。そして、そのサービスが落ちたりすると使えなくなるリスクがあります。 そんな中注目したいのがCodeWichです。コードを圧縮して専用のURLとする、URLを覚えている限りはあなたのコードがなくなったりしないプレイグラウンドサービスです。 CodeWichの使い方 入力はTypeScriptベースになっています。 CSSの入力補完も効いています。 テーマの変更や入力内容のlocalStorage補完に関する設定も可能です。 実行例です。 Canvasを使った表現もできます。 CSSを使ったものも。 CodeWichは共有を行う際にURLが生成されますが、 https://codewich.com/#
jointerJS - HTMLエレメントを線で結ぶ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上で図を描く際にはCanvasを使うのが一般的です。しかし、Canvasは通常のDOMとはまったく異なるコーディングが求められるので、書くのは好きではないという方もいるでしょう。 そこで簡単な図、ノードを結びつけるようなものを描くならばjointerJSを使ってみましょう。 jointerJSの使い方 例です。5つのHTMLエレメントが線で結ばれています。 クリックで線を切ることもできます。 jointerJSはHTMLエレメント同士を直線で結ぶというごく簡単な作りです。しかし、これで十分というケースも多いのではないでしょうか。Canvasで描くまでもない、簡単な図であればjointerJSを使うと良さそうです。 jointerJSはjQuery/JavaScript製のソフ
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
Shrimpit - 使われていない変数を発見するJavaScript解析ツール
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました nodeが使われるようになって、大きなシステムも作られるようになっています。そんな中で生まれるのがrequire/import地獄です。毎回ファイルごとにライブラリを読み込まなければならず、管理が煩雑になっていきます。 そこで使ってみたいのがShrimpitです。ディレクトリを解析し、使われていない箇所を抽出してくれます。 Shrimpitの使い方 以下は一例で、3つのファイルがあるディレクトリになります。 # a4.js import { a11, a12 } from './a1' export const a4 = '1337' export default { propA: '8080', propB: () => {}, propC: false } # a1.js im
mikan.js - 機械学習を用いず日本語の改行問題を解決 MOONGIFT
先日、Googleがディープラーニングを使って文字文節を自然に区切るというbudouを開発しました。日本語は分かち書きによって分割できますが、それをさらに自然に改行させるというのは面倒なものです。 しかし機械学習を行わずに、クライアントサイドだけでも実現できてしまうのがmikan.jsです。 mikan.jsの使い方 幅が広い場合。 一番狭めた場合。 ちゃんと良い感じに文節に区切れます。 mikan.jsを見ると分かりますが、正規表現であったり、漢字と平仮名の関係を使って解決しています。汎用性という意味においては機械学習でしょうが、日本語の改行問題というごく限られた領域においてはmikan.jsを磨き上げる方が簡単かも知れません。 mikan.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 trkbt10/mikan.js: 機械学習を用いていな
Grade.js - 画像を解析して最適な枠を表示 MOONGIFT
画像は見せ方がとても大事です。ただ並べただけでは目を引くことができません。例えばPinterestがあれだけ流行ったのは、それまでになかった段違いな組み合わせのグリッドによるところが大きかったでしょう。画像を主体としているサイトでは特に見せ方に注意すべきです。 今回紹介するGrade.jsは画像に枠をつけてくれるJavaScriptです。画像に合わせた最適な色合いを選定してくれます。 Grade.jsの使い方 デモです。1色ではなく、左上と右下で2色使われているのが分かるでしょうか。そして間はグラデーションとなっています。 つまり特徴的、かつ元画像の雰囲気を壊さないような2色が選択されています。 この手のライブラリは幾つかありますが、Grade.jsはグラデーションを展開しているところが特徴になります。どの色を選ぶかのアルゴリズムがそれぞれ違いますので、自分の感性に合ったものを選ぶのが良い
Jasonette - JSONでiOSアプリを開発するフレームワーク
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 一昔前のTitaniumであったり、React NativeはJavaScriptをネイティブのJavaScriptエンジン上で実行してネイティブのコンポーネントを使えるようにしています。それを使ってReact Nativeではコードを即時反映しながら開発ができるようになっています。 そんな開発スタイルを一歩推し進めたのがJasonetteです。なんとJSONのみでiOSアプリが開発できるようになります。 Jasonetteの使い方 JasonetteのJSONの例です。これはInstagram風UIを作るものです。 { "$jason": { "head": { "data": { "posts": [{ "type": "stories", "items": [{ "avata
JointJS - 多彩な図を描けるJavaScriptライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上での表現力を向上させるためのライブラリが多数存在します。多くはグラフを描くものであったり、より複雑なチャートを描くものです。さらにWebGLを使ったり、Canvasに複雑な描画を行うものもあります。 今回紹介するJointJSはCanvas上に図形を描くのですが、JavaScriptと連携したインタラクティブな図を描けます。 JointJSの使い方 デモです。まずは回転する図形。 こんな図形も描けます。なお、緑と赤のポイントはドラッグでラインを接続できます。 各オブジェクトはマウスでドラッグできます。 図はグルーピングされていたり、コネクトされている場合は線も一緒に動きます。 デモです。赤いポイントがアニメーションしています。 パイチャートともちょっと違う図形です。 各要素
pageAccelerator - JavaScriptだけでWebページ読み込みを高速化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webページの読み込み速度は速ければ速いほどメリットがあります。スマートフォンアプリのようにUIはすべてアプリの中にあり、データだけをやり取りする方法が主流になっている中、Webブラウザが遅く感じられてしまうとユーザはあっという間にブラウザから離れていってしまうでしょう。 今回は簡易的にページ読み込みを高速化してくれるpageAcceleratorを紹介します。 pageAcceleratorの使い方 pageAcceleratorはTurbolinkやpjaxと呼ばれる仕組みに近いものとなっています。まずスクリプトを読み込みます。 <script src="page-accelerator.min.js"></script> 後はpageAcceleratorを実行するだけです。
Mojik - 日本語文章の可読性を向上させるJavaScript
Webにおける日本語はちょっとした工夫が読みやすくなります。例えば日本語と英単語の間には半角スペースを空けた方が良いでしょう。また、全角括弧を使うと間が空きすぎてあまり良くないのですが、半角では詰まりすぎるといった具合です。 そうした日本語の文章におけるちょっとした問題を解決してくれるのがMojikです。和文の文字組を上手にコントロールしてくれます。 Mojikの使い方 適用前と適用後の文章です。括弧が連続した時に隙間を狭めています。 別な例。英数字の前にスペースが空いているのが分かるでしょうか。 小さな隙間を使うことで可読性がぐっと向上します。書籍や雑誌では文字組は微妙に調整しますが、Webの場合はデフォルトのまま使われがちです。Mojikを使えば改善できるでしょう。 MojikはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 Mojik terke
image-diff - 画像の差分表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 開発者であれば差分表示に普段からお世話になっているでしょう。コードのどこを直したのか、どこが削除されたのかなどはDiffを使わなかったら目で探すことになってとても大変です。そして、それはテキストだけではありません。 今回紹介するオープンソース・ソフトウェアはimage-diff、画像で差分表示を行ってくれるライブラリです。 image-diffの使い方 一つ目の画像です。 二つ目の画像です。 差分を取ると、このような画像が生成されます。 image-diffは二つの画像と、その差分となる画像の3つの引数で実行されます。プログラムの中に組み込むこともできます。異なる部分が赤く表示されるので、どこが変わっているのかは一目瞭然でしょう。デザイナーの方などは必須のツールになるのではないでし
JavaScripthon - Pythonで書いてES6のコードを生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 今のところ、Webブラウザで適切に動作が保証されているプログラミング言語はJavaScriptしかありません。そのため、Webアプリケーションを開発する上でJavaScriptの習得は必須なのですが、なるべくなら書きたくないという方も多いです。 もしあなたがPythonプログラマーであれば使ってみたいのがJavaScripthonです。PythonコードからECMAScript2016（ES6）へ変換してくれるソフトウェアです。 JavaScripthonの使い方 コード例です。普通にPythonのコードに見えます。 # -*- coding: utf-8 -*- # :Project: metapensiero.pj # :Author: Andrew Schaaf <andre
math.js·計算処理ならお任せのJavaScriptライブラリ MOONGIFT
WebGLやCanvasの登場もあって、Webブラウザ上で複雑な計算処理を行うケースが増えています。もちろんJavaScript自体にも演算機能はありますが、複雑な処理を行うためにはコードも増えがちです。 そこで使ってみたいのがmath.jsです。数式を処理、表示するためのライブラリになります。 math.jsの使い方 複数の値を計算しています。文字列を解釈しているのがポイントです。 文字列をMathJaxを使って画像化しています。また、その計算結果も表示しています。 math.jsのデモコードです。 // functions and constants math.round(math.e, 3); // 2.718 math.atan2(3, -3) / math.pi; // 0.75 math.log(10000, 10); // 4 math.sqrt(-4); // 2i mat
Vorpal - node.js用のCLIツール開発用フレームワーク MOONGIFT
最近、nodeでCLIツールを書くことも増えてきました。単純に実行するだけなら簡単ですが、オプションをつけたり、ヘルプやパイプでの実行などCLIに欲しい機能を考えると色々面倒になります。 そこで使ってみたいのがCLIツールを作るためのフレームワークです。node向けにVorpalを紹介します。 Vorpalの使い方 まずはコマンドラインオプションをつける場合です。これだけで-b/-tオプションが使えるようになります。 const vorpal = require('vorpal')(); vorpal .command('say [words...]') .option('-b, --backwards') .option('-t, --twice') .action(function (args, callback) { let str = args.words.join(' '); s
Clairvoyance - CSSカバレッジツール
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサイトの運営を続けていると、徐々にスタイルシートが汚くなっていきます。使われているか使われていないかの判断がしづらいので、消せずに追加するのみだからです。 プログラミング言語であればコードカバレッジによってコードの利用状況が確認できます。そこで同じような仕組みであるClairvoyanceを使ってみましょう。 Clairvoyanceの使い方 Clairvoyanceを実行します。 $ clairvoyance --css path/app.css --html path/index.html --reporter clairvoyance-html HTMLとCSSファイルを指定して実行すると、結果のHTMLファイルが生成されます。 レポートです。使われているクラスは緑色に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
