プログラミング言語 - JavaScriptの記事一覧
Current Device - デバイス判定をスタイルシートに反映
Webページにアクセスするデバイスが多様化している中、JavaScriptで各デバイスを判別して表示分けしているWebサイトも多いのではないでしょうか。こういった実装を都度行うのはとても面倒ですし、条件分岐も増えがちです。そこで使いたいのがCurrent Deviceです。デバイスに応じてスタイルシートにクラスを追加し...
Ervy - CUIで棒/円/折れ線/ゲージグラフを表示
コンソール用のアプリケーションが増えています。UIをあまり作り込まずに済み、さらに結果の出力も簡単にできます。その反面、グラフのような可視化は苦手です。テキストで出力して、別なライブラリで可視化するのではないでしょうか。そこで使ってみたいのがErvyです。ターミナル上で簡易的な可視化を実現できます。## Ervyの使い...
spacetime - JavaScriptの高機能時間ライブラリ
JavaScriptで悩ましいのが時間の扱いではないでしょうか。Webブラウザごとによって異なるタイムゾーン、年月日を表示するのにもばらばらのメソッドを実行するなど面倒な操作が多いと感じます。そこで使ってみたいのがspacetimeです。JavaScriptにおける日時関連の処理を手軽にしてくれるライブラリです。## ...
tiptap - Vue.js向けのリッチなWYSIWYGエディタ
WYSIWYGなエディタは開発者ではない人たちにコンテンツを作ってもらいたい時に活躍します。HTMLを手書きするのは困難ですし、編集している内容と結果が異なるので、結果を想像しながら作るのは慣れない人にとっては難しいでしょう。もしVue.jsを使っているならば導入したいWYSIWYGエディタがtiptapになります。多...
SQLPad - クエリを保存、可視化するSQL実行環境
社内でエンジニア以外の人たち（特にマーケター）にSQLを覚えてもらうと業務効率が良くなるという話をよく聞きます。データを様々な角度から取り出したいと思う人たちは自分でやってもらう方が早いのです。そんなSQLを実行したり、保存できるのがSQLPadです。re:dash
model-viewer - Webコンポーネントの3D/ARビューワー
HTML5の機能が追加されている中で、Web上でできることが増えています。その一つとして注目したいのがWebVRであったり、AR技術です。これまでは専用のソフトウェアがなければ実現できなかったことがWeb標準の技術で実現できます。そんなAR/VRを簡単に表示、操作できるライブラリがmodel-viewerです。## m...
virtual-scroller - 長大なリストもサポートするスクロールライブラリ
Webページは縦に長く伸びがちです。特にリスト状に情報を載せる際にデータ量をシステムからの出力で動的に変化させている場合、間違って数十万件のデータを一気に表示しようとしてDOMレンダリングが終わらなくなったりします。そういった時に使ってみたいのがvirtual-scrollerです。縦横を含めたスクロールをスムーズにし...
myConsole - スマートフォン向けのJavaScript実行環境
JavaScriptの実行環境としてはWebブラウザの開発者ツールがよく使われますが、それはデスクトップにしか用意されていません。タブレットやスマートフォンでちょっとしたJavaScriptを実行したいと思うこともあるでしょう。そんな時に使えるのがmyConsoleです。Webベース、スマートフォン特化型のJavaSc...
demado - 決まった幅と高さでURLを開く
チャットやプレイ中のWebゲームなど、別ウィンドウにしておきたい場面は多々あります。そんな時、Electronなどで別アプリ化する手もありますが、機能拡張やアプリが分かれるのが面倒という方もいるでしょう。そこで使ってみたいのがdemadoです。特定のURLを固定された大きさのウィンドウで開いてくれるソフトウェアです。#...
jsc - Rustで書かれたJavaScriptコンパイラ
JavaScriptを利用できる場面は広がっていますが、実行するためにはJavaScript実行エンジンたるv8などが必要です。また、スクリプト言語なので実行時に解釈されるため、実行速度は若干遅くなるでしょう。今回紹介するjscはそんな限界を超えるかも知れないソフトウェアです。Rustで書かれたJavaScriptコン...
ProjectVisBug - HTMLやCSSの情報をビジュアル的に確認、調整
Webサイトのデザインを作っていて、配置を少し変えたり、色合いを変えたいと思うことは多いでしょう。開発者ツールでCSSを変更したり、Webブラウザを再読込しても良いですが、細かい調整では時間がかかってしまいます。そこで使ってみたいのがProjectVisBugです。ビジュアルを細かく調整できるGoogle Chrome...
cpy-cli - cpコマンドをほんの少し便利に
Linuxなどでディレクトリをコピーする際に使うのがcpコマンドです。ごくごく基本的なコマンドなので使うのは簡単ですが、あまり融通が効かなかったりします。そのため、一旦コピーしてから別途ファイル操作を行うと言った人もいるのではないでしょうか。そこで使ってみて欲しいのがcpy-cliです。cpコマンドをちょっと便利にして...
howler.js - JavaScriptで音声/音楽ファイルを操作
HTML5になって音楽ファイルを扱うのが容易になりました。audioタグによって再生や停止をしたり、WebAudio APIでより細かく音声や音楽ファイルを操作できるようになります。しかし、まだまだそれほど活用事例が多くありません。今回紹介するhowler.jsはJavaScriptベースのオーディオライブラリです。W...
stacksort - StackOverflow上のコードを実行して検証
StackOverflowにはたくさんのナレッジが蓄積されています。しかし、実際に使えるコードなのかどうかは実行してみないと分からず、かつ同じような課題に対して解決方法が多数存在することもあります。そこで使ってみたいのがstacksortです。配列をソートする問題に対して投稿されているStackOverflowのコード...
Glorious - Web上でコードのデモンストレーション
プログラミングはできあがったものを一気に見せても理解するのが困難です。そのため細かく分けたり、動画を使ったりと様々な手段を講じる必要があります。ちょっとずつ説明することで全体としては難しいことをしていないと理解してもらえます。そんなプログラミングコードのデモを表現するのに使えるのがGloriousです。## Glori...
Swipe-listener - スワイプ操作を検知してイベント実行
スマートフォンのWebブラウザも高速化し、Webアプリケーションを提供するのに躊躇することもなくなってきました。デスクトップ向けのWebアプリケーションがほぼそのまま提供できますが、画面の大きさの問題などもあって多少の工夫が必要です。そんな中、スマートフォン特有の動きにも気を配る必要があります。今回はその一つ、Swip...
Domain Storytelling Modeler - 業務フローの可視化、モデリングに
システム開発を行う際にモデリングが良く行われます。業務フローを一般化したり、特定ドメインを可視化するのに便利です。それによって効果的なシステム化が可能になります。多くの場合、専用のソフトウェア（Visioのような）であったり、スライド作成ソフトウェアを使ったりします。今回は専用ソフトウェアのDomain Storyte...
Pennywise - 常に表示しておけるWebブラウザ
仕事をしていて、Webサイトを表示しつつ、その情報を使って作業するというのはよくある光景です。そんな時、ウィンドウを横並びにしたり、都度アプリケーションを切り替えながら作業しますが、とても面倒です。そこで使ってみたいのがPennywiseです。任意のサイトを表示しつつ、透明度が設定できるWebブラウザです。## Pen...
Edit with Emacs - テキストエリアの編集をEmacsで
Webのテキストエリアは貧弱な機能しかなく、普段プログラミングエディタを使っていると入力しづらくて嫌になることでしょう。そこで別なエディタで入力して、その内容を貼り付けたりします。しかし都度行うのは面倒です。Edit with Emacsはそんな手間を少しだけ軽減してくれるソフトウェアです。テキストエリアの入力をEma...
screensaver-js - HTML5/JavaScriptでWindows/macOS用のスクリーンセーバーを作成
スクリーンセーバーを自作するのは難しいことではありません。最近はHTMLで作成もできるようになっているので、SVGやCanvasを使ったり、動画を流すこともできます。十分手軽に作成できます。今回紹介するscreensaver-jsはHTML5/JavaScriptを使い、Windows/macOS両方に対応したスクリー...