プログラミング言語 - JavaScriptの記事一覧
DevTools Timeline Viewer - 開発者ツールのパフォーマンス結果を共有/閲覧
Webページを表示するまでには様々な処理が行われています。DOM構築、HTMLのレンダリング、JavaScriptなど様々な処理が行われた結果、一つの画面を表示します。さらにWebアプリケーションであれば、その画面のまま要素が変化します。そうした中でパフォーマンスを測定する機能がGoogle Chromeにありますが、...
Bowlcu - SVGテキストを自在に変化
SVGの面白いところはバイナリデータではないので、JavaScriptから簡単に操作できるところです。時間によって移動させたり、形を変えることもできます。もちろんクリックなどのイベント処理とも連携できます。今回紹介するBowlcutはSVGのテキストを面白く表示できるライブラリです。## Bowlcutの使い方例です。...
Google Form to Slack - Googleフォームの回答をSlackへ通知
Googleフォームを使ってお問い合わせフォームを提供しているケースはよくあります。登録した内容はスプレッドシートに自動登録されるので後から分析する際に便利ですが、通知機能がメールだけなことに不満を感じる人も多いでしょう。社内でSlackを使っているならば、そちらに通知を送ってくれた方が便利です。そこで使ってみたいのが...
DownGit - GitHubリポジトリのディレクトリダウンロードURLを生成
GitHubで特定のファイルやディレクトリだけダウンロードしたいと思うことがあります。ファイルであればRawファイルを表示すれば良いかも知れませんが、ダウンロードを実行するのも面倒です。そこで使ってみたいのがDownGitです。GitHubのリポジトリのパスを入力して、ダウンロード用のURLを生成します。## Down...
nanoJS - jQueryの代わりに使えるDOM操作ライブラリ
jQueryはもう使いたくないと思いつつ、使った方が楽になるという場面は多いです。Ajaxもその一つですが、Superagentやaxiosといった代替ライブラリを使うこともできます。そしてもう一つはDOM操作です。DOM操作を素のJavaScriptだけで書こうと思うと若干面倒です。そこで使ってみたいのがnanoJS...
jeelizFaceFilter - Webカメラで使える顔認識&トラッキング
Webカメラやスマートフォンのカメラはリアルとデジタルの入り口です。そのため、写し出された映像を加工したり、そこにある情報を解析する類のソフトウェアはとても人気があります。スマートフォンアプリにある、動画チャットしながらリアルタイムに情報を付与する、それと同じことがWeb上でできるのがjeelizFaceFilterで...
Popcode - 学生向けのWeb開発/実行環境
プログラミングが教育に取り入れられる中で大事なのは体験です。かつての自主的にプログラミングを学ぶ人たちと違って、欲求を呼び起こすところからはじめる必要があります。そのためにはいち早く結果を見られる形にしなければなりません。そうした中でWebは良いプレゼン層になるでしょう。学生向けに作られたPopcodeをぜひ体験してみ...
GUN - 分散型グラフデータベース
グラフデータベースというキーワードが聞かれるようになっています。SNSのようなデータ同士の関連性を管理するような場合に向いており、用途を選ぶデータベースと言えます。有名なところではNeo4jであったり、Amazon Neptuneなどがあります。GUNもグラフデータベースの一つです。特徴としては分散型、オフラインファー...
Wired Elements - ラフなデザインになるカスタムタグ
ワイヤーフレームなど、ラフに作りたいという時は手書きなどが向いています。それをドローのソフトウェアなどできっちりと書き始めてしまうと、些細な部分にこだわってしまって目的であるプロトタイプがなかなか作れなかったりします。そこで使ってみたいのがWired Elementsです。Web上でラフなデザインを再現できるWebコン...
PatternFly - Red Hat製のWeb UIフレームワーク
HTMLは自由度が高い反面、何でも自分でイチから作らなければならないイメージがあります。そのためUI、JavaScriptフレームワークは貴重です。それらを使うことで効率を大幅に高められます。今回紹介するPatternFlyはUIフレームワークで、Red Hat社によって開発されています。## PatternFlyの使...
FacePause - 顔を認識してYouTubeの再生/停止を制御
Webの進化が止まらないのと同様に、Webブラウザ自身もどんどん進化しています。新しく出てくるAPIを実装し、それらが徐々にWeb標準として使えるようになっていきます。こうしたAPIは広まらない可能性もありますが、試してみる価値は十分あります。今回はGoogle Chromeに実装されたFaceDetector API...
GitHub Contribution Chart Generator - GitHubでのこれまでの活動をすべて可視化
GitHubの活動計（Contribution Chart）は開発者としてのやる気を喚起してくれます。すべて埋めてやろうと躍起になる開発者もいるのではないでしょうか。しかし直近の情報しか見えないのが残念です。そこで使ってみたいのがGitHub Contribution Chart Generatorです。これまでのすべ...
KnzkApp - ハイブリッドアプリのMastodonクライアント
一時期燃えるように注目が集まり、さっと引いてしまったように見えるMastodon。一時的なブームはさておき、ゆっくりと着実な成長をしていけば何の問題もないでしょう。個人的にもまだ使っています。そんなMastodonクライアントとしてKnzkAppを紹介します。Monacaを使ったハイブリッドアプリになります。## Kn...
vuegg - Vue.jsプロジェクトの画面を作成
ReactやVue、AngularといったJavaScriptフレームワークはHTMLを再定義しており、UIを作るのもそうそう簡単ではありません。デザイナーとの協業も難しく、苦戦している方も多いのではないでしょうか。そこで使ってみたいのがvueggです。Vueの画面をWYSIWYGに設計できるソフトウェアです。## v...
Framework Inspector - Webサイトがどのライブラリで作られているのかチェック
Webサービス、Webサイトを支える技術は無数に存在します。トレンドの移り変わりも激しく、どれを選んだら良いのか分からないという方も多いでしょう。そんな時、有名なサービスで使われているものを選ぶという選択は決して間違いではありません。そこで使ってみたいのがFramework Inspectorです。気になるサイトがどん...
Maji - ハイブリッドアプリ開発のベストプラクティスを提供
ハイブリッドアプリと言うのはHTML5でUI、ロジックを作成したスマートフォンアプリです。ネイティブとの繋ぎ込みはCordovaなどの技術を使います。かつては遅いと言った問題がありましたが、今はほぼ分からないくらいの速度で実行できます。そんなハイブリッドアプリは画面遷移やUIなどを自分で用意する必要があります。ここが敷...
Vuido - Vue.jsでデスクトップ向けネイティブアプリを開発
JavaScriptが多くの環境で動作するようになっています。Webブラウザだけでなく、サーバやスマートフォンアプリなど一つの言語でここまで幅広く動作するものはそうそうないでしょう（特にWebブラウザが問題です）。そんなJavaScriptを使ってデスクトップアプリを作成できるのがVuidoです。Electronと異な...
mini-c - node製のWebAssemblyコンパイラ
WebAssemblyには未来が感じられます。DOM操作などはできないものの、コンパイルしたコードがWebブラウザ上で動かせるのは魅力的です（しかもWeb標準の技術で！）。しかしまだ開発環境を整えるのは大変なのが現状です。そこで期待したいのがmini-cです。なんとWebブラウザ上でWebAssemblyを生成します。...
Scratch editor - Web上でのグラフィックスアピールに特化したライブコーディングシステム
ライブコーディングは勉強会などで盛り上がるネタの一つです。臨場感があることで、参加者の目を釘付けにできます。時に失敗するかも知れませんが、それでも良いのです。念のため動画でも用意しておけば問題ありません。そこで使えるのがScratch editorです。グラフィックス系のデモを行う際にインパクトあるステージを演出するで...
logo.svg - テキストとフォントからSVGを生成
スマートフォンやタブレットによって高解像度なディスプレイが普及しています。そのため、画像などのバイナリのファイルは高解像度向けにサイズの大きなファイルを用意せざるを得ず、ネットワークの負荷増大につながっています。そこで使ってみたいのがlogo.svgです。テキストベースの簡易的なロゴをSVGで生成してくれます。## l...