local-web-server - HTTPS/HTTP2も使えるローカル開発用HTTPサーバ MOONGIFT
ローカルで開発を行って、結果がうまくいったらサーバにアップロードするというのはよくある開発風景です。そんな時に必要なのがローカルでの開発用サーバです。Apacheやnginxでもいいですが、設定が面倒です。 そこで使ってみたいのがlocal-web-serverです。単なる静的配信に限らず多彩な機能が揃っています。 local-web-serverの使い方 local-web-serverはnpmでインストールします。 $ npm install -g local-web-server これで ws というコマンドが使えます。まず機能としては単純な静的配信サーバの他、SPA対応があります。これはどのURLにアクセスしても指定したファイル （通常は index.html）を返してくれるものです。 また、HTTPS対応であったり、Web APIのプロキシ機能、HTTP2も対応しています。JSO
Matrix Vision - Webカメラの映像をマトリックス風に
マトリックスと言えば黒バックに緑の文字が流れるシーンが有名です。あの文字は実は寿司のメニューだった、なんて話があります。コンソールっぽい雰囲気がデジタルの世界を感じさせるものになっています。 そんなマトリックスの世界観をWebカメラを使ってリアルタイムに再現するのがMatrix Visionです。 Matrix Visionの使い方 例えばこんな感じに表示されます。 ちゃんと動きに合わせてリアルタイムに反映されます。 カメラに近いと黒くなりがちなので、若干離れた方が良いようです。Webカメラの映像をリアルタイムに変換しても、それほど遅延は感じません。マトリックス風に限らず、様々な応用が考えられそうです。 Matrix VisionはHTML5/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 emilyxxie/matrix_vi
Web Code Editor - 実行結果付きのWeb上のコードエディタ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました コードを学習する環境は素早く作れるのが理想です。色々なソフトウェアをインストールしたり、セットアップしていたら諦めてしまうでしょう。特にWeb系のように手軽に動かせることを期待されている環境はそうです。 PHPやJavaScriptの学習、コードを試す際に使ってみて欲しいのがWeb Code Editorです。 Web Code Editorの使い方 最初の表示です。上にHTMLコードがあって、下にその実行結果が表示されています。 変更して保存（Processボタン）を押せば表示が更新されます。 日本語も使えます。 Web Code Editorの仕組みとしては実行結果はiframeで囲まれた内容になっています。上のHTMLで記述した内容をサーバ側に送り、特定のファイルを更新してi
matrixflow - Web上で機械学習のネットワーク設計/実行 MOONGIFT
AIや機械学習が盛んに取り上げられるようになっています。これまでは特殊な技術が必要で、限られた人たちしか触れることのできなかった領域ですが、様々なツールの登場によって民主化が進んでいます。 そこで紹介したいのがmatrixflowです。Web上のUIを使って機械学習のモデル設計と実行ができます。 matrixflowの使い方 matrixflowのメイン画面です。これはデータ管理です。 データをZip圧縮してアップロードします。CSVの書き方が分からず試せませんでした…。 レシピ管理。ここで機械学習のネットワークを設計します。 ドラッグ&ドロップで行えます。 学習の設定と実行画面です。 推論の実行画面です。 ここからは公式サイト上のデモ画像です。データ管理です。 学習させているところです。 matrixflowは雰囲気としてソニーのNeural Network Consoleに似ています。
ai2html - IllustratorファイルをHTML化 MOONGIFT
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Illustratorで作成したデータを他の人と共有したり、再利用する場合には画像やSVGで出力するのが一般的です。多くの場合、さらに加工すると言うことはなく、閲覧したりコンテンツとして埋め込むことでしょう。 今回紹介するai2htmlはIllustratorのファイルをHTML化するソフトウェアです。 ai2htmlの使い方 例えばこんなデータを用意します。 Illustratorのファイルを開いてスクリプトを実行します。 それがHTMLになるとこんな感じに。 さらにこんな複雑なデータも。 変換結果です。 ai2htmlは専用の記法に沿って記述することで再現度の高いHTMLファイルを出力します。その記法を覚える手間があるものの、一旦覚えてしまえばIllustratorの作品をオン
bedecked - Markdownで作るHTMLスライド MOONGIFT
HTMLでスライドを作るソフトウェアが増えています。その多くがMarkdownも使えるようになっています。しかしMarkdownはあくまでもオプションだったりするので、ちょっとした設定が必要になったりします。 bedeckedはMarkdownだけに対応したHTMLスライドソフトウェアです。スライド部分はreveal.jsを使っているので操作性は全く問題ありません。 bedeckedの使い方 Markdownでコンテンツを書いて、それがHTMLスライドになります。変換は不要です。 Escキーでスライドを一覧表示する機能もあります。 bedeckedは普段使っているMarkdownの書き方と、reveal.jsの使い方さえ覚えてしまえばすぐに使いこなせます。アニメーションであったり、文字の大きさなどを気にしないで良いので、スライドの内容だけに集中できることでしょう。 bedeckedはJav
md-page - MarkdownだけでWebページを作る
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownでコンテンツを作成する静的なWebサイト作成ソフトウェアは多数あります。これらのソフトウェアはMarkdownで記述した後、コマンドを実行してHTMLに変換します。そのため元のMarkdownとHTMLファイルが二つ存在する状態です。 md-pageは違います。純粋にMarkdownだけでWebページを作成できるソフトウェアです。 md-pageの使い方 表示されたWebページです。MarkdownからHTMLに変換されています。 ソースを見ると、確かにHTMLになっています。 ファイルの内容です。スクリプトが読み込まれていますが、基本はMarkdownです。 md-pageはJavaScriptでMarkdownコンテンツを変換しています。そのため、クローラーなど
HTTP Responder - WebHookを使った開発を便利に MOONGIFT
WebHookはシステム連携するのに便利な仕組みですが、呼び出されるのがサーバ側とあって、開発時の確認がしづらいのが問題です。ngrokなどを使ってローカル環境を外部に繋ぐこともできますが、準備が面倒と感じる人もいるでしょう。 そこで使ってみたいのがHTTP Responderです。WebHookの内容を確認できるWebサービスです。 HTTP Responderの使い方 最初に自分の好きなURLを設定します。 後はそのURLに来たアクセスについて、細かく情報が確認できます。 HTTP Responderで設定したURLをWebHookに設定することで、どういった情報が送られてくるかが一目で分かるようになります。さらにレスポンスも決めることができます。URLを複数作れるので、サービスごとに分けられるのも便利です。 HTTP Responderはnode/JavaScript製のオープンソー
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向けに作られています。レコーディング
jointerJS - HTMLエレメントを線で結ぶ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上で図を描く際にはCanvasを使うのが一般的です。しかし、Canvasは通常のDOMとはまったく異なるコーディングが求められるので、書くのは好きではないという方もいるでしょう。 そこで簡単な図、ノードを結びつけるようなものを描くならばjointerJSを使ってみましょう。 jointerJSの使い方 例です。5つのHTMLエレメントが線で結ばれています。 クリックで線を切ることもできます。 jointerJSはHTMLエレメント同士を直線で結ぶというごく簡単な作りです。しかし、これで十分というケースも多いのではないでしょうか。Canvasで描くまでもない、簡単な図であればjointerJSを使うと良さそうです。 jointerJSはjQuery/JavaScript製のソフ
ReLaXed - Web技術からPDFを生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました PDFを作るのは数年前に比べると、さほど難しくなくなっています。プリンタドライバ形式でPDFを生成するプロダクトは多く、簡単な体裁のものであればすぐに作成できます。 しかし、よりこだわったレイアウトであったり、自動化となると、まだまだ技術が必要です。今回はWeb技術でPDFが作れるReLaXedを紹介します。 ReLaXedの使い方 ReLaXedはコンテンツをPug（かつてのJade）フォーマットで記述します。そしてPDFを生成します。 日本語も使えますが、フォントの指定が必要です。 ReLaXedはPugをテンプレートに採用することで、Webブラウザでの閲覧とPDFによるダウンロードの両方がサポートされます。CSSも使えるので、表示のカスタマイズも容易です。eBookや履歴書、
Stencila - ドキュメントと表計算をシームレスに連携させるオフィススイート MOONGIFT
Pythonを使っている人にとってはお馴染みのJupyter Notebook。コードと文章を一緒に書けるのでプログラミングに関連したコンテンツが見やすくなります。様々な種類の文書を埋め込む際には同様の手法が便利です。 オフィスでよく使われる文書や表計算でも同じことができそうです。それがStencilaです。 Stencilaの使い方 ドキュメントと表計算が一つのドキュメントにまとめられます。こちらはドキュメント。 こちらは表計算。 埋め込むとこんな感じになります。計算式を埋め込むことができます。 グラフも表計算を使って表現できます。 Microsoft OfficeでもOLEを使って連携はできます。しかし元ファイルを移動してしまったらリンクが切れてしまったりします。更新も複数のアプリケーションを使うのが面倒です。Stencilaは一つのファイルとしてまとまっているので、メンテナンスしやす
PatternFly - Red Hat製のWeb UIフレームワーク
HTMLは自由度が高い反面、何でも自分でイチから作らなければならないイメージがあります。そのためUI、JavaScriptフレームワークは貴重です。それらを使うことで効率を大幅に高められます。 今回紹介するPatternFlyはUIフレームワークで、Red Hat社によって開発されています。 PatternFlyの使い方 例です。データテーブル。 管理画面。グラフも多数用意されています。 スライダー。 カード。 コメント。 通知。 ウィザード。 グラフ。 フォーム。 日付ピッカー。 テキストボックスフィルター。 パンくず。 ページネーション。 アコーディオン。 アラートとバッジ。 ツリービュー。 PatternFlyはjQueryを使っており、企業などのWebシステム開発において活躍しそうです。ウィジェットやデザインのパターンも多数用意されていますので、管理画面の作成など、様々なシステムに
twentytwenty - 上下または左右で画像を比較
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 二つの画像を見比べて何が違うのか判断するにはどうしたら良いでしょうか。横並びにしてもなかなか分かりづらいかも知れません。逆に変換前後でファイルサイズが軽減されている場合は、見た目が変わっていないことを理解させたいこともあります。 そんな時に使えるのがtwentytwentyです。スライダーを使って左右の画像を差し替えます。 twentytwentyの使い方 基本的な使い方は縦に分かれていて、左右に動かせるものです。 マウスオーバーで前後のラベルが出ます。 上下で変化を見せることもできます。 二つの画像はサイズが同じである必要があるでしょう。そしてスライダーを動かすことで変化している、または変化していないことを確認できます。時々このような表示を使いたくなることがあるので覚えておくと便
CodiMD - リアルタイムコラボレーション付きのMarkdownエディタ MOONGIFT
Markdownは業務の中でも広く使われるようになっています。個人でメモとして使う範疇を遙かに超えて、Markdownなしでは仕事が回らないというチームすらあるのではないでしょうか。 そんな方達にお勧めなのがCodiMDです。共同編集をサポートしたMarkdownノートアプリです。 CodiMDの使い方 エディタです。2ペインになっています。左側が編集、右側にプレビューが表示されます。 他のブラウザの編集がリアルタイムに反映されます。 画像はドラッグ&ドロップでアップロードされます。 メニューです。プレゼンテーションモードや各種フォーマットでのダウンロードが可能です。 PDFは残念ながら日本語が表示されませんでした（Herokuに日本語フォントが入っていないせいだと思いますが）。 テーブルもサポートされています。 PDFの埋め込み。 MathJax。 Graphvizによるグラフ埋め込み。
JavaScript初心者にもオススメ！クリーンなコードでHTMLを拡張する「Stimulus」とは？
HTMLやCSSは得意だけれど、JavaScriptは苦手…という方は、多いのではないでしょうか。HTMLやCSSは書き方がある程度統一されていますが、JavaScriptは数えきれないフレームワークやライブラリがあるので、どれを使えばいいのか迷ってしまいます。 そのような方にこそおすすめしたいのが、StimulusというJavaScriptライブラリです。 今回は、*クリーンなコードでHTMLを拡張する「Stimulus」*の概要や基本的な操作方法を紹介します。初心者でも比較的簡単に扱えるので、ぜひ利用してみてはいかがでしょうか。 Stimulusとは？ Stimulusは、世界的なプロジェクトマネジメントツールBasecamp(旧37シグナルズ)を開発しているメンバーによって開発されているフレームワークです。 JavaScriptはフレームワークだけでも、Angular.JSやReac
rawson.js - JavaScriptでRAWデータを読み込み MOONGIFT
デジカメで撮影した写真は基本、JPEGで保存されます。しかし、よりカメラや写真にこだわりがある人は、JPEGの不可逆な変換を嫌い、撮影したデータをそのまま残したいと考えるものです。そのためにRAWデータが存在します。 通常、RAWデータをレタッチソフトウェアなどでJPEGに変換しますが、rawson.jsを使えばRAWデータのままWeb上で表示できます。 rawson.jsの使い方 RAWデータと言っても多様な形式があります。こちらは.NEFを表示したところです。 メタデータも確認できます。 rawson.jsが対応しているのは以下のフォーマットです。 jpeg .jpg .jpe .png .3fr .ari .arw .bay .crw .cr2 .cap .dcs .dcr .dng .drf .eip .erf .fff .iiq .k25 .kdc .mef .mos .mrw
jeelizFaceFilter - Webカメラで使える顔認識&トラッキング
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webカメラやスマートフォンのカメラはリアルとデジタルの入り口です。そのため、写し出された映像を加工したり、そこにある情報を解析する類のソフトウェアはとても人気があります。 スマートフォンアプリにある、動画チャットしながらリアルタイムに情報を付与する、それと同じことがWeb上でできるのがjeelizFaceFilterです。 jeelizFaceFilterの使い方 jeelizFaceFilterは多数のデモを用意しています。顔の部分に立体的なブロックを表示。 顔を横に向けると表示角度も変わります。 ダースベーダーになるデモ。音楽も流れます。 アノニマス。 犬。 蝶蝶が飛び回ります。 自分の上に雨雲ができ、雨が降ります。 お金のフレームも表示。 お菓子メーカーともコラボ。ソーシャ
nanoJS - jQueryの代わりに使えるDOM操作ライブラリ
jQueryはもう使いたくないと思いつつ、使った方が楽になるという場面は多いです。Ajaxもその一つですが、Superagentやaxiosといった代替ライブラリを使うこともできます。そしてもう一つはDOM操作です。 DOM操作を素のJavaScriptだけで書こうと思うと若干面倒です。そこで使ってみたいのがnanoJSです。 nanoJSの使い方 nanoJSはjQuery風のDOM操作だけを提供するライブラリです。書き方はjQueryのままです。 $(".someClass").css("background-color:green;").html("Hello World"); $('#c').animate('2.3', '1.2','0','1','1','0','0', '0','0','1').css('background-color:red').text('Hello')
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Popcode - 学生向けのWeb開発/実行環境 MOONGIFT