プログラミング言語 - JavaScriptの記事一覧
Web Code Editor - 実行結果付きのWeb上のコードエディタ
コードを学習する環境は素早く作れるのが理想です。色々なソフトウェアをインストールしたり、セットアップしていたら諦めてしまうでしょう。特にWeb系のように手軽に動かせることを期待されている環境はそうです。PHPやJavaScriptの学習、コードを試す際に使ってみて欲しいのがWeb Code Editorです。## We...
Javascript Downcast - ES6のコードをES5に変換
JavaScriptはES6以降によって記述が変わってきました。アロー関数であったり、オブジェクトの渡し方も変わっています。慣れれば難しいものではありませんが、従来のJavaScriptに慣れている人にとっては一瞬理解しづらいものに映るかも知れません。そこで使ってみたいのがJavascript Downcastです。E...
webattle.js - Web上でみんなで戦うタンクゲーム
簡単なルールのゲームであればあるほど、誰でもすぐに遊べて熱中します。一人で遊ぶタイプのゲームも良いですが、仲間同士で遊べるものもまた違った楽しさがあります。オンラインゲームであれば世界中の人たちと遊べます。今回紹介するwebattle.jsはWeb上で戦えるタンクゲームになります。ハマりすぎに注意しましょう。## we...
Spectrum - 複数参加できるオンラインコミュニティ
一言でコミュニティといっても様々な形式があります。オフラインのコミュニティもあれば、オンラインもあります。チャットのようにフローな会話もあれば、フォーラムのようなストック型もあるでしょう。Spectrumはオンラインコミュニティを形成するソフトウェアで、フローとストックの間にあるような作りになっています。## Spec...
tracking.js - 画像/動画をトラッキング
写真はテキスト以上に情報が含まれています。人物を撮影しただけでも、そこには背景があったり、洋服があったり、天気なども映し出されます。しかし、そのためには写真から情報を収集する技術が必要です。tracking.jsはWebブラウザ上で人やオブジェクトを認識するJavaScriptライブラリになります。## trackin...
React Slack Clone - ReactとChatkitで作ったSlackクローン
一つの流行ったサービスが出てくると、そのクローンサービスとも言える存在が次々に登場します。最近多いのはSlackクローンでしょう。Slackを置き換えようとするものもありますし、単に自社技術と合わせる目的のものもあります。今回紹介するReact Slack Cloneは後者に近いもので、Pusherが提供するChatk...
Fengari - Webブラウザ/nodeで動作するLua VM
JavaScriptはWebブラウザ上での動作が保証された唯一のプログラミング言語です。しかし、JavaScriptが好きではない方もたくさんいます。特にサーバサイドと別な言語で書かなければならないのが嫌という方はいるでしょう。もしあなたが好きなプログラミング言語がLuaであれば、Fengariを使って記述してみてはい...
push-dir - ディレクトリをGitHub Pagesへ公開
GitHubのリポジトリを使っていて、プロジェクト内容をGitHub Pagesで公開している人は多いのではないでしょうか。やり方は幾つかありますが、gh-pagesというブランチを追加する方法があります。しかし、この方法はブランチを切り替えてコンテンツを編集して…と意外と手間が多いです。そこで使ってみたいのがpush...
TensorFlow.js - Webでも機械学習。JavaScript版TensorFlow
TensorFlowと言えば機械学習を行うソフトウェアで、多くのサービスやソフトウェアの基盤に使われています。環境を整えるのは若干大変ですが、Dockerイメージもあります。GPUなどのハードウェアさえ用意できれば、利用するまでの敷居はずいぶん低くなっています。そんなTensorFlowをWebブラウザベース、WebG...
Tabullet - 既存のテーブルをメンテナンスしやすくするjQueryプラグイン
業務システムでテーブル表示はよく使います。そんな時、ユーザから出てくるのがデータのメンテナンスを行いたいと言う要望です。行を追加したり、編集や削除するといった機能です。一つのテーブルだけであれば頑張って実装できるでしょう。しかし、画面が多数あったらどうしたら良いでしょうか。そこで使ってみたいのがTabulletです。j...
Sufee Admin - Bootstrap4対応の多機能ダッシュボードデザインテンプレート
Bootstrap4がそろそろ本格的に導入されるようになっています。後方互換性がないため、これまでのテンプレートが使えなくなってしまったのが残念です。しかし、これによって新しいチャンスが生まれたとも言えるでしょう。Sufee AdminはBootstrap4向けの管理ページテンプレートになります。今後のことを考えるなら...
WebSlides - 多彩な表現が可能なHTMLプレゼンテーションフレームワーク
プレゼンテーションというとPowerPointやKeynoteで作ることが多いですが、HTMLでのプレゼンテーションも使われるようになっています。しかし表現力があまり高くなく、シンプルなスライドが多かったように思います。そこで使ってみたいのがWebSlidesです。これまでにないほど表現力の高いHTMLスライドが作れる...
blend.js - 二つの画像を重ね合わせるJavaScriptライブラリ
一つ一つの素材は単純でも、素材同士を合成することで新しい素材を生み出すことができます。最近ではAIによって、風景写真を別な風合いに変えたりするものもあります。従来、人手でやっていたような作業がすべて自動でできるようになっています。今回紹介するblend.jsはAIほど高度な訳ではありませんが、二つの画像をWeb上でミッ...
Git WebUI - ローカルのGitリポジトリ用ブラウザ
Gitリポジトリの情報をWeb上で見たいと思った時にはGitoriusであったりGitLab、GitHubなどを使うでしょう。突然大事になってしまって、セットアップするのも面倒です。そこで使ってみたいのがGit WebUIです。ローカルで使うためのGitリポジトリブラウザです。## Git WebUIの使い方Git W...
Dejavu - Elasticsearch用Web UI
Elasticsearchはオープンソースの有名なデータベースです。MOONGIFTの検索機能でも使っています。細かな条件指定ができるので、検索としてはもちろんデータベースとして使っている人も大勢います。そんな ElasticsearchのWeb UIとしてDejavuを紹介します。## Dejavuの使い方トップペー...
Mark Text - マルチプラットフォームで動作するWYSIWYGなMarkdownエディタ
Markdownエディタは多数あります。多くは二画面タイプで、左側にエディタがあって右側にプレビューが出ます。Markdown記法に慣れている人は十分ですが、不慣れな人にとってはそもそも記法が分からないので使い勝手が悪くなります。そこで使ってみたいのがMark Textです。インラインで書式が反映されるタイプのMark...
Private Internet Access - プライバシーを確保したインターネットアクセスを可能にするGoogle Chrome機能拡張
プライベート…なんと甘美な響きでしょう。インターネットによって個人のプライバシーなどほとんどなく、むしろ自分のすべてをシェアしようという流れの中にあって、プライベートは大事なものになっています。もしあなたがプライベートを維持してインターネットを使いたいならば、Private Internet Accessをインストール...
emma-cli - npmパッケージを検索&インストール
今、システムを開発する際に一切のライブラリを使わないことのが少ないでしょう。ライブラリを探し、組み合わせて一つのライブラリやフレームワーク、システムを作るはずです。そこで求められるのがライブラリの選定力です。今回紹介するのはemma-cli、npmパッケージを検索、インストールできるソフトウェアです。## emma-c...
Sloth - ネットワーク速度を落とすGoogle Chrome機能拡張
ブロードバンドが当たり前になり、さらにLTEが普及しきっている環境だと、速いインターネットが当たり前に感じてしまいます。しかし、時に3G環境で使わなければならなくなったり、遅い環境でWebブラウジングすることがあります。そんな時の感覚を忘れないように手軽にネットワーク速度を切り替えられるのがSlothです。## Slo...
JSON table editor - テーブルを編集してJSONを生成
JSONはXMLに比べてシンプルな構造ですが、それでも手作業で作るのは面倒です。複雑な入れ子の構成はもちろんのこと、一階層であったとしても作る手間があります。適当に作った結果、パースできずにデバッグに時間を取られることもあります。そこで使ってみたいのがJSON table editorです。HTMLテーブルを編集してJ...