Text2MindMap - テキストで記述するマインドマップ
マインドマップは思考整理ツールとしてよく使われますが、ビジュアルにこだわりはじめると考えを整理するよりも並びであったり、ノードの見た目にこだわったりしてしまいます。これは思考の邪魔になるでしょう。 そこで使ってみたいのがText2MindMapです。テキストで記述してビジュアルで確認できるマインドマップソフトウェアです。 Text2MindMapの使い方 メイン画面です。左側がエディタ、右側がプレビューになります。 日本語も使えます。 設定画面です。 色を変えられます。 Text2MindMapはインデントを使ってノードの繋がりを表現します。テキストだけで、装飾などはできないので書くことに集中できるでしょう。記述した内容はダウンロードできますが、テキストファイルの内容であって画像ではありません。思考を停止させない、便利なソフトウェアです。 Text2MindMapはJavaScript製の
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
Javascript Downcast - ES6のコードをES5に変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JavaScriptはES6以降によって記述が変わってきました。アロー関数であったり、オブジェクトの渡し方も変わっています。慣れれば難しいものではありませんが、従来のJavaScriptに慣れている人にとっては一瞬理解しづらいものに映るかも知れません。 そこで使ってみたいのがJavascript Downcastです。ES6で記述されたJavaScriptを従来の形式にコンバートしてくれます。 Javascript Downcastの使い方 例えば {a} という書き方。これを変換した結果が確認できます。 {function} の書き方を置き換えた例。 引数のデフォルト値。 残り全部という引数の渡し方。 クラス。これはちょっと難しいコードになりました。 Babelなどを使ってもでき
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の作品をオン
JavaScript Visualizer - JavaScriptの実行内容を可視化 MOONGIFT
プログラミングコードはコンピュータ上で実行されるので、実行を開始して終わるまでが一瞬です。そのため、どう動いているのかを確認するのは困難で、初学者にとっては魔法のように感じてしまうでしょう。 そこで使ってみたいのがJavaScript Visualizerです。JavaScriptをステップ実行してその内容を把握できます。 JavaScript Visualizerの使い方 実行中です。 実行速度が指定でき、左側に書いたコードを実行してくれます。 thisの内容など変数も確認できます。 JavaScript Visualizerを使うことでJavaScriptのコードがどう実行されているのかが分かりやすくなります。処理の順番が分かればデバッグもしやすくなるでしょう。プログラミング初級者にもお勧めなソフトウェアです。 JavaScript VisualizerはJavaScript製のソフト
Vvverb.js - ドラッグ&ドロップでWebサイトを作成 MOONGIFT
かつてはWebサイトを構築する際にオーサリングツールを使うのが当たり前でしたが、最近ではUIフレームワークが出てきたり、CSS3の多機能性によってHTMLを手打ちすることも増えてきました。とはいえ、簡易的な内容であればオーサリングツールを使った方が簡単でしょう。 そこで使ってみたいのがVvverb.jsになります。ドラッグ&ドロップでWeb UIが作成できるソフトウェアです。 Vvverb.jsの使い方 メイン画面です。左側にコンポーネント、中央が編集画面です。 コンポーネントを選ぶと右側にプロパティが出ます。 テンプレートは幾つも用意されています。 デスクトップだけでなく、スマートフォンサイズも確認できます。 Vvverb.jsは多彩なコンポーネントが用意されており、大抵のニーズは満たせるのではないでしょうか。アンケートフォームを作ったり、ユーザベースでページを作る、Webサイトのモック
bedecked - Markdownで作るHTMLスライド MOONGIFT
HTMLでスライドを作るソフトウェアが増えています。その多くがMarkdownも使えるようになっています。しかしMarkdownはあくまでもオプションだったりするので、ちょっとした設定が必要になったりします。 bedeckedはMarkdownだけに対応したHTMLスライドソフトウェアです。スライド部分はreveal.jsを使っているので操作性は全く問題ありません。 bedeckedの使い方 Markdownでコンテンツを書いて、それがHTMLスライドになります。変換は不要です。 Escキーでスライドを一覧表示する機能もあります。 bedeckedは普段使っているMarkdownの書き方と、reveal.jsの使い方さえ覚えてしまえばすぐに使いこなせます。アニメーションであったり、文字の大きさなどを気にしないで良いので、スライドの内容だけに集中できることでしょう。 bedeckedはJav
PaginateMyTable - テーブルタグをページネーション可能に MOONGIFT
業務システムではデータの一覧表示を作ることが多いでしょう。そんな時にはHTMLのテーブルタグを使うはずです。50行くらいであれば良いですが、数百行のデータを一気に表示すると視認性も落ちますし、使いづらくなります。 そこで使ってみたいのがPaginateMyTableです。HTMLのテーブルにページネーションを追加してくれるライブラリです。 PaginateMyTableの使い方 元々の表示です。 実行しました。デフォルトで5行ごとのページネーションになります。 PaginateMyTableは単なるテーブルをページネーション可能にしてくれます。動的に行われているので、ページネーションの件数を変更したりするのも簡単でしょう。サーバサイドを使わないので何度も読み込み直したりする必要もなく、便利そうです。 PaginateMyTableはjQuery/JavaScript製のオープンソース・ソフ
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コンテンツを変換しています。そのため、クローラーなど
30-seconds-of-code - 30秒以下で理解できる便利なJavaScriptスニペット集 | ソフトアンテナブログ
今やWeb開発になくてはならないプログラミング言語「JavaScript」。 フロントエンドだけではなくバックエンドでも使用されるように活用範囲が広がっていますが、なかにはJavaScriptは本職ではなく、思うような処理が素早く記述できなくてヤキモキしている方もいるかもしれません。 本日紹介する「30-seconds-of-code」はそのような場合に役立つ、JavaScriptのスニペットコレクションサイトです。 30秒以下で理解できる簡潔なスニペットが大量にまとめられていて、さまざまな処理を素早く記述したい場合に役立てることができるようになっています。 カテゴリごとに大量のスニペットが 30-seconds-of-codeでは、Adapter、Array、Browser、Date、Function、Math、Node、Object、String、Type、Utility、Archiv
HTTP Responder - WebHookを使った開発を便利に MOONGIFT
WebHookはシステム連携するのに便利な仕組みですが、呼び出されるのがサーバ側とあって、開発時の確認がしづらいのが問題です。ngrokなどを使ってローカル環境を外部に繋ぐこともできますが、準備が面倒と感じる人もいるでしょう。 そこで使ってみたいのがHTTP Responderです。WebHookの内容を確認できるWebサービスです。 HTTP Responderの使い方 最初に自分の好きなURLを設定します。 後はそのURLに来たアクセスについて、細かく情報が確認できます。 HTTP Responderで設定したURLをWebHookに設定することで、どういった情報が送られてくるかが一目で分かるようになります。さらにレスポンスも決めることができます。URLを複数作れるので、サービスごとに分けられるのも便利です。 HTTP Responderはnode/JavaScript製のオープンソー
Nodebook - Webブラウザで使えるnodeプレイグラウンド
JavaScriptを覚えることで、Webブラウザはもちろんサーバサイド、IoTなど幅広い環境でソフトウェアを開発できます。環境を整えるのは決して難しくはありませんが、それがネックになって習得を頓挫してしまっているとしたら非常に勿体ないことです。 そこで使ってみたいのがNodebookです。JavaScriptファイルの編集と実行ができるソフトウェアです。 Nodebookの使い方 Dockerで実行した場合です。Webブラウザからアクセスします。 ブックとして残しておくこともできます。 もちろん実行時エラーも表示されます。 Nodebookは手軽に実行できるnode実行環境です。Dockerやクラウドで実行するならば、nodeのインストールも不要です。ローカルのファイルを指定したり、クラウドのファイルを使ってJavaScriptの練習や学習が可能です。 Nodebookはnode/Jav
フロントエンド開発に迷ったら「Vue.js入門」を読もう - JavaScript関連の書籍とかまとめてみた - Lean Baseball
先日のPyCon JP 2018の野球の話にてVue.js（Nuxt.js）の話をした結果、技術評論社様のご厚意により、一冊頂戴いたしました. Vue.js入門 基礎から実践アプリケーション開発まで 作者: 川口和也,喜多啓介,野田陽平,手島拓也,片山真也出版社/メーカー: 技術評論社発売日: 2018/09/22メディア: 単行本（ソフトカバー）この商品を含むブログを見る 正に欲しかった類の本で大変助かりました、ホントありがとうございます！ 結論から言うと、 Vue.js（またはNuxt.js）で開発するなら一冊持っておけ！（ただし他のFWにもいい本がある） っていうくらい素晴らしい書籍でした、自信を持ってオススメができるレベルです. このエントリーでは、 「 Vue.js入門 基礎から実践アプリケーション開発まで」の簡単な感想 私がフロントエンド開発するまでにやってきたJavaScri
レガシーシステムの大規模リプレイスで分かった「Vue.jsでSPAならNuxt.jsが有力」 #エンジニアHub - エンジニアHub｜若手Webエンジニアのキャリアを考える！
レガシーシステムの大規模リプレイスで分かった「Vue.jsでSPAならNuxt.jsが有力」 10年以上前に作られたレガシーシステムをVue.jsで大規模リプレイスしたエムスリーに、導入して感じたVue.jsのメリットや、活用法を伺いました。 JavaScript（JS）のフレームワークは、何を使うのがベストなのでしょうか。ここ3年ほどで数々のJSフレームワークが誕生していますが、React、Angularという二大巨塔を超えるものはなかなか現れていません。 そんな状況の中、GitHubではReactを上回るスター数を誇っている1のが、2014年のリリース後、着実に進化を重ね、日本でも採用事例が増えてきているVue.jsです。「JavaScript ベスト・オブ・ザ・イヤー」に2016年、2017年と2年連続で選ばれているほか、Ruby on Rails（Rails）やLaravel とい
PAW.js - パスワードレス認証システム MOONGIFT
パスワードによる認証が脆弱であるのはよく知られています。そのため多要素認証としてSMSを使ったり、認証コード生成アプリといった補助ツールが存在します。最近ではYubiKeyのようなハードウェアも使われています。 そんな中、パスワードを使わない認証機能としてPAW.jsが登場しました。 PAW.jsの使い方 まず登録を行います。 メールアドレスを入力するだけです。 登録完了して、日記が書けます。 次にログインです。すでに登録したメールアドレスが表示されます。 ログインできました。 別なWebブラウザではログインできません。 PAW.jsの仕組みは公開鍵認証で、各Webブラウザに対して公開鍵が生成されます。そのため、同じ人であってもWebブラウザが異なるとログインできません。パスワードがない分、セキュリティは十分に強力ですが、万一鍵を紛失するとログインできなくなるので、復旧するための仕組みは何
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製のソフ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
