プログラミング言語 - JavaScriptの記事一覧
JavaScriptのイベントをたくさん見られるサイト - 開発時に役立つ。JavaScriptのイベント処理を確認
JavaScriptでのアプリケーション開発において肝になるのがイベントのハンドリングです。マウスやキーボード操作などによって多様なイベントが呼ばれます。それらの購読、解除によってアプリケーションを構築するのですが、慣れている人であっても複雑で分かりづらいものです。どんなイベントがあって、どうデータが送られてくるのかを...
ReLaXed - Web技術からPDFを生成
PDFを作るのは数年前に比べると、さほど難しくなくなっています。プリンタドライバ形式でPDFを生成するプロダクトは多く、簡単な体裁のものであればすぐに作成できます。しかし、よりこだわったレイアウトであったり、自動化となると、まだまだ技術が必要です。今回はWeb技術でPDFが作れるReLaXedを紹介します。## ReL...
carbon-now-cli - プログラミングコードを画像化
プログラミングコードをブログなどで綺麗に表示したいと思っても、ブログの環境が対応していないケースがあります。多少のハイライトは入っていても、タブ幅、フォント、テーマなどカスタマイズしたい要素は無数に存在します。そこで使えるのがコードの画像化ですが、毎回手作業でやるのは面倒です。自動化したいならcarbon-now-cl...
Terminalizer - ターミナルの入出力内容をアニメーションGIF化
サーバのセットアップ時など、ターミナルの作業内容をメモしておきたいということは多々あります。後になって、コマンドだけで振り返っても分かりづらいので、入出力内容をそのまま保存しておくのが便利です。そこで使ってみたいのがTerminalizerです。ターミナルの作業内容をアニメーションGIFに変換してくれます。## Ter...
Canvas Sketch - ビジネスモデルキャンバスをWeb上で
ビジネスモデルを考える際にビジネスモデルキャンバスを使うと、見逃していた視点を発見したり、相互の関連性を俯瞰的に確認できるようになります。A4の紙を使ってすぐに作れるのも魅力でしょう。今回はビジネスモデルキャンバスをWeb上で作れるCanvas Sketchを紹介します。Web上であれば何度も書き直したり、共有しやすい...
React Site Nav - Stripeにインスパイアされたメニュー表示
良いデザインは真似してみると、その良さやエッセンス、理由などが見えてくるものです。細部にまでこだわったデザインはやはり美しく、使いやすいUIやUXになるものでしょう。今回はReact Site Navというライブラリを紹介します。Stripeのメニューを真似したUIコンポーネントです。## React Site Nav...
StyleURL - CSS設定をGistで共有するデザインカスタマイズ機能拡張
開発者ツールを使うと任意のWebサイトに対してスタイル設定を変更できます。可読性を下げる要素を削除したり、並び替えたりすることもできます。Styusのような機能拡張を使えば、サイトを訪問した際にデザイン設定が自動的に適用されます。今回紹介するStyleURLも類似のソフトウェアですが、スタイル設定の作りやすさとシェアの...
lexrank.js - 日英対応のテキスト要約
情報は日々増える一方です。もはやすべての情報を収集するメリットは薄くなっています。次に大事なのは必要な情報だけをいかにして収集するかです。一つはフィルタリングで、情報の取捨選択です。もう一つは情報数は変えずに情報量を変えるのです。つまりテキスト要約で、lexrank.jsは日本語/英語に対応しています。## lexra...
Trends - GitHub Trendsを高速表示するWebアプリ
Webサイトの高速表示に注目が集まっています。日本で有名なところと言えば日経新聞のサイトがありますが、PWAやSPAといった技術を活用することで表示を高速化できるようになります。そんなPWAを駆使してGitHub Trendsを高速化にチャレンジしたソフトウェアがTrendsです。## Trendsの使い方最初の表示で...
Juno - メニューバーからJupyter Notebookを呼び出し
PythonやR使いの方はJupyter Notebookを使っている方も多いでしょう。コードとテキストを一つのドキュメントに仕上げられるので、開発者向けのドキュメントを作るのに最適です。そんなJupyter Notebookをメニューバーから呼び出せるのがJunoです。## Junoの使い方メニューバーからJupyt...
Pushbar.js - 上下左右どこからでも出せるドロワー
最近は常にヘッダーバーを表示しているサイトが増えていますが、正直うざいを感じることがあります。画面の大きくないスマートフォンなどではヘッダーが常にあることで表示されるコンテンツが狭くなってしまいます。そこで使ってみたいのがドロワーです。ユーザアクションに応じてヘッダーなどを表示する方がユーザビリティが高いと言えるでしょ...
Save images - ページ内の画像をまとめてダウンロード
Webサイトの中には写真をたくさん掲載しているところがあります。気に入った写真をまとめてダウンロードしたいと思っても、いちいち写真を選択するのが面倒だったりしますよね。そこで使ってみたいのがSave imagesです。ページ内にある写真を一気にダウンロードできるソフトウェアです。## Save imagesの使い方任意...
Pomotroid - シンプルなポモドーロテクニック用アプリ
ポモドーロテクニックはご存じでしょうか。25分を基本として仕事をし、終わったら5分間の休憩をします。それを何回か繰り返したら、少し長めの休憩を取ると言ったワークスタイルです。特にキッチンタイマーを使うというのが特徴になります。そんなポモドーロテクニックを使うためのソフトウェアがPomotroidです。## Pomotr...
TOAST UI Image Editor - Canvasを使ったリッチな画像編集
画像編集と言えばPhotoshopを思い浮かべる人が多いでしょう（またはGIMP）。しかしPhotoshopのすべての機能を満遍なく使いこなしている方はほとんどいないはずです。それどころか、無料のソフトウェアでも実は十分だったという方もいるでしょう。そこで注目したいのがTOAST UI Image Editorです。W...
lepto - WebとCLIで画像最適化
スマートフォンやデジカメなど、画像コンテンツがどんどん増えています。綺麗な写真を、と思うとファイルサイズも大きくなる一方で、あっという間にストレージを逼迫してしまいます。そこで使ってみたいのがleptoです。様々なフィルタリングをつけた上で自動的に画像を最適化してくれるソフトウェアです。## leptoの使い方Web版...
TabSpeech - Webページを読み上げるGoogle Chrome機能拡張
最近音声入力や出力が人気です。目で出力を受け取るのと、指先で入力するのは限界があります。そこで耳と口に注目が集まっています。さらに情報を処理できるようになるでしょう。Webブラウザについても同様です。TabSpeechを使えば表示されている内容を読み上げてくれます。## TabSpeechの使い方実行しているところです...
Simple Keyboard - Web上のシンプルなバーチャルキーボード
セキュリティへの意識が高いサイト、例えば銀行などではログイン時にソフトウェアキーボードを提供しています。しかしアルファベットの順番がキーボードと異なるので入力しづらいこともしばしばです。そこでより本格的なバーチャルキーボードとしてSimple Keyboardを紹介します。日本語入力はできませんが、標準キーボードと変わ...
PWACompat - PWAに対応しない古いブラウザでもWeb App Manifestに対応させる
PWAの一要素としてWeb App Manifestがあります。JSONファイルを用意しておくことで、Webアプリをローカルアプリケーションかのように保存できます。この時、アイコンやスプラッシュスクリーンも大事な要素です。古いブラウザでは対応していないPWAについて、PWACompatが対応させてくれます。## PWA...
MediaStreamRecorder - Webで音声/動画を録画
HTML5ではWebカメラやマイクにアクセスできます。例えばWebチャットなどで使われたりしますが、ARに使ったりとアイディア次第で面白い使い方が考えられます。録音、録画だって可能です。今回紹介するMediaStreamRecorderはMediaRecorder APIを使った録音/録画が実装できます。## Medi...
page-transitions-travelapp - ネイティブレベルのUXを体感できるWebアプリ
ハイブリッドアプリやPWAなど、Webアプリケーションをスマートフォンのネイティブアプリ風に使う技術が発展しています。ネイティブアプリと異なり、インストールの手間がなく、プラットフォーマーによる縛りもないのがWebの魅力と言えます。そんなWeb技術を駆使して作られたのがpage-transitions-travelap...