MOONGIFT更新停止のご連絡 MOONGIFT
いつもMOONGIFTをご覧いただきありがとうございます。タイトルにあります通り、MOONGIFTの更新を恒久的に停止するご連絡となります。最終更新記事は2021年07月16日になります。 背景 MOONGIFTはオープンソース・ソフトウェアの紹介サイトとして2004年01月29日に運営を開始しました。一番最初はlivedoorブログにて開始し、その後様々なブログプラットフォームを利用し、さらに一時はサイト名の変更（Open Alexandria）を経て、MOONGIFTという名称で運営を続けてきました。 MOONGIFTでは、これまでに16,000以上のソフトウェア（一部オープンソース・ソフトウェア以外のソフトウェアを含む）を紹介してきました。オープンソース・ソフトウェアは多くの先進的な技術への取り組みが行われており、オープンソース・ソフトウェアを知ることはソフトウェアの開発トレンドを知
DbGate - Webでもローカルでも使えるデータベース管理
データベース内のデータをメンテナンスする際にmysqlやpsqlといったコマンドを使うこともできます。しかし毎回SQLを書くのは面倒ですし、データ量が増えると一覧性が落ちてしまいます。 そこで使いたいのがデータベース管理アプリケーションです。今回はMySQL/PostgreSQL/SQL Server/MongoDBと幅広いデータベースに対応したDbGateを紹介します。 DbGateの使い方 ローカルアプリケーションとWebアプリケーションで動作します。今回はWebアプリケーション版のデモです。 接続先を選ぶとデータベース一覧が表示されます。 さらにデータベースを選ぶと下にテーブル一覧が出ます。テーブルを選ぶとデータが一覧表示されます。 フィルター機能で簡易的にデータを絞り込めます。 デザイナーを使ってリレーションを設計できます。SQLが生成できるので、ビューの作成にも使えるでしょう。
Wireflow - Webサイトのユーザフロー/ワイヤーフローを自由に作成 MOONGIFT
Webサイトを作る際にユーザフロー（ワイヤーフロー）を作ります。Webサイトの画面を並べて、リンク先をつないでいくことで、フローを明確にします。そして目的のページまでたどり着くのに深くなりすぎていないか、分かりづらい流れになっていないかなどをチェックできます。 今回紹介するWireflowはWeb上か簡単にワイヤーフローが作成できるソフトウェアです。 Wireflowの使い方 例です。左側にあるパーツをドロップして、線でつないでいくだけという簡単さです。 拡大できます。 パーツを縦につなげることで、長いページも表現できます。 グルーピングも可能です。 Wireflowを使えばワイヤーフローが手軽に作成できます。あらかじめ多数の画面モックアップが用意されていますので、ページの雰囲気に合わせて自由に作成できるでしょう。Wireflowを使えばWebサイトの構造を検討したり、パーツをカスタマイズ
Drawflow - データフローを作成するライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ノーコードプラットフォームが普及してきています。プログラミングはせずに、多くの場合はGUIで部品同士を組み合わせて一つの機能を作り上げていきます。 そうしたUIを作るのに使えそうなUIライブラリとしてDrawflowを紹介します。 Drawflowの使い方 デモのUIです。 つながっている線は選んで削除できます。 拡大したり、ノードに変数を与えるといったこともできます。 ダブルクリックのイベント処理。 新しいノードの追加も可能です。 Drawflowは左側の機能（ノード）をドラッグ&ドロップで追加して、各ノードを線でつなぎます。ノーコードプラットフォームであったり、Node-RedやYahoo! Pipes、ScratchのようなUIを実現するのにも使えるでしょう。 Drawflo
glauth - 開発や個人利用に最適なLDAPサーバ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 個人的に認証統合は好きで、一つのIDでシステム全体を管理したいと考える派です。そのベースとしてよく使われるのがLDAPです。Active DirectoryもLDAPをベースとしており、社内外における認証統合に一役買っています。 そんなLDAPサーバですが、ちょっと立てるのが面倒に感じていました。しかしglauthであれば開発用途や個人で簡単に使えそうです。 glauthの使い方 設定ファイル指定して起動するだけです。とても簡単です。 $ glauth -c sample-simple.cfg 15:18:52.896862 doConfig ▶ DEBU 001 Debugging enabled 15:18:52.896892 startService ▶ DEBU 002 W
Artyom.js - Webサイトにボイスコマンドを追加 MOONGIFT
ボイスコマンドといえばSiri、Google Home、Alexaなどが有名です。スピーカーやスマートフォンに語りかけるだけでアクションしてくれるのは、一度慣れると手放せません。他にももっと音声だけで操作できれば便利なのにと思ってしまうでしょう。 そこで使ってみたいのがArtyom.jsです。WebサイトでJavaScriptベースの操作ができるようになります。 Artyom.jsの使い方 Artyom.jsのコードです。特定のワードに対して反応し、それに対するアクションを定義できます。 Artyom.jsでは聞く方はもちろん、発話も可能です。つまり音声認識した結果に対して、発話で対応もできます。さらに認識する内容はワイルドカードを使った定義もできるので、ある単語を翻訳したり、どこどこに移動するといった指定も可能です。 Artyom.jsはJavaScript製のオープンソース・ソフトウェ
lit - 軽量なレスポンシブWebフレームワーク
CSSフレームワークは大型なものになるほど便利な機能が追加されますが、その制約もまた大きくなります。Webデザイナーであれば、レスポンシブなどの機能だけあって、他は自由度が高いものを選びたいと思うのではないでしょうか。 今回紹介するlitはわずか395byteしかないレスポンシブWebフレームワークになります。小さいだけに余計な機能も少ないことでしょう。 litの使い方 スクリーンショット多めです。まずはグリッド機能。12等分される、よくあるものです。 タイポグラフィ。 ナビゲーションバー。 ボタンとリスト。 フォーム。 テーブル。 カード。 カードを使えば、こんなレイアウトにも。 水平線。 litではあまり多くの機能は用意されていません。別途ユーティリティとして使えるCSSも用意されており、必要に応じて組み合わせることができます。クラスも多くありませんので、習得は容易そうです。 litは
Mailu - Dockerで立てられるメールサーバ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました メールサーバを立てるのはとても面倒なイメージがあります。安定して動かしておかないとメールが受信できない、なんて問題にもなりかねません。メールがビジネスの根幹を担っている場合にはなおさらです。 そこで紹介したいのがMailuです。Dockerで簡単に立ち上げられるメールサーバです。 Mailuの使い方 ログインします。 縦並びの3カラム構成です。左にボックス、中央がメール一覧、右側にメール本文が出ます。 メール作成画面です。 ファイルを添付すると右側に一覧が出ます。 設定画面です。 もちろんDockerだから安定する訳ではないですが、立ち上げが簡単なのはメリットが大きそうです。IMAPやSMTPはもちろん、Let’s encryptを使ったSSL/TLS、アンチウィルススキャナ、スパ
PWA asset generator - PWA用のアイコン/スプラッシュスクリーン用画像を一気に生成 MOONGIFT
PWA（Progressive Web Apps）は今後のWebを担う大事な技術になっています。多数ある技術を合わせたものなので、すべてを実装するのは難しいですが、逆に一部からでもはじめられるのがメリットです。 そんなPWAでアプリとしてインストールする機能に注目が集まっていますが、面倒なのが多数のアイコンを作成しなければならない作業です。そこで使ってみたいのがPWA asset generatorです。 PWA asset generatorの使い方 PWA asset generatorを実行します。画像やSVGファイルを指定するだけです。 $ pwa-asset-generator new-org-logo.png 16:24:49 getSplashScreenMetaData Initialising puppeteer to load latest splash screen
imgpush - オープンソースの画像共有サーバ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ImgurやGyazoなど画像アップロードサイトは多数あります。そうしたサイトを使うことで友人やコミュニティサイトなどで画像共有を簡単に行えますが、コンテンツの公開制限をはじめ、自分で制御できないことに不安を感じる人もいるでしょう。 そこで使ってみたいのがimgpushです。画像を簡単にアップロードできるサーバを手軽に設置できます。 imgpushの使い方 imgpushを立てたら、後はそこにポストするだけです。 $ curl -F 'file=@photo.jpg' http://localhost:5000 {"filename":"Vl0U9.png"} この場合、 http://localhost:5000/Vl0U9.png で画像にアクセスできます。 wとhというパラメ
Terminus - TypeScript製のターミナル
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました AtomやVisual Studio Codeの登場によって、Web技術を使っても十分ローカルアプリケーションとして利用できるというのが分かっています。そこで様々なソフトウェアがHTML/JavaScript/CSSで作られています。 今回紹介するTerminusもその一つです。よりモダンなターミナルを提供します。 Terminusの使い方 メイン画面です。ターミナルでこんなカラフルな画面を見ようとは…。 ターミナルとしての機能は特に問題ありません。 設定画面です。AtomやVisual Studio Code風です。 プラグインで拡張できます。 Terminusによる拡張はまさに今風と言ったところでしょう。ショートカットキーもカスタマイズできます。設定がJSONになるのも今風で、
bento-starter - PWAを学ぶ、実装するのに参考にしたいスターターキット MOONGIFT
PWA（Progressive Web Apps）というキーワードに注目が集まっていますが、実際のところ何からはじめれば良いのか分からない人は多いのではないでしょうか。PWAは固有の技術を指し示すものではないので、特に分かりづらいでしょう。 そこで参考にしたいのがbento-starterです。PWAとは何か、を学ぶのにぴったりなスターターキットです。 bento-starterの使い方 こちらがそのテンプレートです。 マニフェストファイル、Service Workerもちゃんとインストールされます。 Lighthouseを使った評価はほぼパーフェクトです。 PWAの要素となるCACHE APIの利用はもちろん、アプリマニフェストやアクセシビリティもきちんと提供されています。このbento-starterをベースにしたり、ここから学べることは多数あるでしょう。Service Workerの
)
PWA Starter Kit - PWAを学ぶためのテンプレート
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました PWA（Progressive Web Apps）というキーワードがトレンドになっています。しかしPWAは特定の技術を指すのではなく、Webでの体験をよりネイティブ並に向上させるという概念でしかありません。そのため何から取り組んだら良いかが分かりづらいです。 そこで勉強のベースに使ってみたいのがPWA Starter Kitです。PWAに関する要素が盛り込まれたテンプレートです。 PWA Starter Kitの使い方 こちらがテンプレートです。 カウンター。これは再読み込みすると消えてしまいます。 ショッピングカート。 マニフェストファイルもきちんと設定されています。 PWA Starter KitではPWAとして必要になる要素（レスポンシブ、SPA、アプリマニフェスト）などの要
PWA Starter Kit - PWAを学ぶためのテンプレート
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました PWA（Progressive Web Apps）というキーワードがトレンドになっています。しかしPWAは特定の技術を指すのではなく、Webでの体験をよりネイティブ並に向上させるという概念でしかありません。そのため何から取り組んだら良いかが分かりづらいです。 そこで勉強のベースに使ってみたいのがPWA Starter Kitです。PWAに関する要素が盛り込まれたテンプレートです。 PWA Starter Kitの使い方 こちらがテンプレートです。 カウンター。これは再読み込みすると消えてしまいます。 ショッピングカート。 マニフェストファイルもきちんと設定されています。 PWA Starter KitではPWAとして必要になる要素（レスポンシブ、SPA、アプリマニフェスト）などの要
Kanon - プログラミングコードを可視化
プログラミングは構造的です。そのため、構文解析して別な言語にしたり、ツリー構造に展開したりできます。それらの構造を見ることで、綺麗な設計になっているかどうかも分かりそうです。 そんな可能性を感じさせるのがKanonです。JavaScriptのコードを解析、ビジュアル化します。 Kanonの使い方 左側にコード、右上にクラスの構造、右下にメインスクリプトの実行が可視化されています。 処理を増やしたところ。 コードが複雑になると、可視化された構造も複雑化します。 Kanonを使うことでプログラミングコードを別な視点から見られるようになります。コードは自動的に更新されるので、自分のコードを貼り付けてみて、どんな構造になっているのか見てみるのも面白そうです。 KanonはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 prg-titech/Kanon: A l
Netron - 機械学習のネットワークを可視化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 機械学習ではフォーマットの標準化が進んでいます。これまでTensorflowやCaffe、Chainerなど様々なソフトウェアがありましたが、生成されるモデルがONNXというフォーマットに統一されつつあります（他にもあるようですが）。 そんなONNXフォーマットのモデルをビジュアル化できるソフトウェアがNetronです。 Netronの使い方 ドロップしたところです。これは4か9を判別するモデルです。 拡大もできます。 パラメータも閲覧できます。 Netronを使うことでPythonのコードではなく、ビジュアル化されたモデルを通じて機械学習のネットワークを学ぶことができます。各ノードにおける出力の数も出ており、ネットワークの詳細が分かりやすくなるでしょう。 NetronはJavaS
JavaScript Visualizer - JavaScriptの実行内容を可視化 MOONGIFT
プログラミングコードはコンピュータ上で実行されるので、実行を開始して終わるまでが一瞬です。そのため、どう動いているのかを確認するのは困難で、初学者にとっては魔法のように感じてしまうでしょう。 そこで使ってみたいのがJavaScript Visualizerです。JavaScriptをステップ実行してその内容を把握できます。 JavaScript Visualizerの使い方 実行中です。 実行速度が指定でき、左側に書いたコードを実行してくれます。 thisの内容など変数も確認できます。 JavaScript Visualizerを使うことでJavaScriptのコードがどう実行されているのかが分かりやすくなります。処理の順番が分かればデバッグもしやすくなるでしょう。プログラミング初級者にもお勧めなソフトウェアです。 JavaScript VisualizerはJavaScript製のソフト
imagemin - 画像サイズをコマンドラインでまとめて軽減
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ネットワーク上に流れるデータは極力小さい方が良いです。圧縮はもちろん、余計なメタ情報を削除したりして、ネットワーク負荷を軽減するのが望ましいでしょう。しかし一つ一つのファイルを手作業でやるのは現実的ではありません。 そこで自動化です。今回はコマンド一つで画像サイズを軽減できるimageminを紹介します。 imageminの使い方 例えば以下のようにコマンドを実行します。これだけでPNGファイルをまとめて処理してくれます。 $ imagemin *.png -o ./out 処理前後のファイルです。682KBが433KBになっています。37%削減されています。 imageminはオプションとして他の画像圧縮ライブラリを指定できます。より圧縮率の高いアルゴリズムを指定するのも良いでし
webdiff - WebベースのGit差分表示
バージョン管理を入れていて役立つのが差分（Diff）です。Gitでは標準で git diff が使えますが、大きな変更を行っている時には見づらいでしょう。かといって専用のソフトウェアを使うのも面倒です。 そこで使ってみて欲しいのがwebdiffです。Gitコマンドに連携したWebブラウザベースの差分表示ツールです。 webdiffの使い方 webdiffは git diff の代わりに git webdiff とするだけです。そうするとWebブラウザが立ち上がって差分を表示してくれます。 webdiffをインストールしておけば、差分表示がとても見やすくなります。ファイル単位でサイドバイサイドで見られるので変更した部分がはっきり分かるでしょう。インストールしておくと役立つ場面が多そうです。 webdiffはPython製のオープンソース・ソフトウェア（Apache Licnese 2.0）で
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Gandul - 簡単に画像の遅延読み込みを実現
