プログラミング言語 - JavaScriptの記事一覧
Userscripts - Safari用のユーザスクリプト作成、実行環境
ユーザスクリプトを使うことで、Webサイトを便利にできます。公式には提供されていない機能を実現したり、UIで不要な部分を削ったり、逆に追加したりできます。筆者も様々なサイトでユーザスクリプトを使っています。作成が若干面倒なイメージがありますが、Userscriptsを使えばとても簡単にユーザスクリプトを作成できます。...
Branded QR Ccode - 任意のロゴを載せたQRコードを生成
QRコードは世界中で使われています。特にスマートフォンが登場して以降、その利用範囲が拡大しているように感じます。仕様として多少汚れていても使えるようになっており、エラー率も考慮して生成できます。そんな仕様を使うことで、QRコードの中に本来不要な情報も盛り込ませることができます。それがBranded QR Ccodeです...
アクセシビリティカラーヘルパー - Webアクセシビリティを考慮した色を提案
Webのアクセシビリティは大事な考え方です。誰もが使いやすいWebサイトを目指す上で、文字の大きさや背景色とのコントラスト、リーダー対応など様々な観点があります。今回紹介するアクセシビリティカラーヘルパーは背景と文字のコントラスト比を維持するためのカラーパレットになります。## アクセシビリティカラーヘルパーの使い方利...
Krabby - キーボードによるWebブラウジング補助ライブラリ
テキストエディタやターミナルなど、開発作業の殆どはキーボード主体でできますが、Webブラウジングだけはマウスが必須です。キーボード操作をアシスタントするユーティリティも多いですが、あまり普及していません。今回紹介するKrabbyはブラウザ機能拡張としての動作はもちろん、Webブラウザ側で仕込むこともできるキーボード操作...
Sweetconfirm.js - 送信を思いとどまらせるボタン
送信フォームを押してしまって後悔した経験はないでしょうか。Gmailなどでは送信後にキャンセルできる機能が追加されました。押す前に熟考したはずなのに、押すとアラが見つかる、なんてことはよくあります。今回紹介するSweetconfirm.jsは送信完了するまでに少し猶予をくれる、そんなライブラリです。## Sweetco...
BlockLike.js - ビジュアルプログラミング風に開発できるJavaScriptライブラリ
ブロックを用いたビジュアルプログラミング環境はプログラミング初学者や、英語が分からない小学生などに向いています。極めれば多くのことが実現できる一方、通常のプログラミング言語との壁は常に存在します。ブロックによるプログラミングと通常のプログラミング、その垣根を越えようとするのがBlockLike.jsです。## Bloc...
Markdown Editor - シンプルなWebベースのMarkdownエディタ
Markdownエディタは多数存在します。それらを使うことで、自分のWebアプリケーション内にMarkdownを使った編集機能を簡単に追加できます。特に開発者向きのWebサービスで役立つでしょう。今回紹介するMarkdown EditorはそんなMarkdownエディタの一つです。シンプルですが、使いやすいエディタです...
Paint GitHub - イラストで説明。GitHub Issueでペイントできる機能拡張
言葉で説明するよりもイラストを描いた方が分かりやすい、そんな場面は多いです。そのため会議などでホワイトボードが使われるのでしょう。それはプログラマーにとっても同じです。絵で描いた方が通じると思っても、そのために画像編集ソフトウェアを立ち上げたりするのは面倒です。そこで使ってみたいのがPaint GitHubです。## ...
JSFrame.js - モーダルからチャットまで。軽量なウィンドウライブラリ
Webアプリケーションを高機能化する上で欠かせないのがウィンドウではないでしょうか。ローカルOSの中で使うのはごく当たり前のようになっていますが、Webアプリケーションも複雑化すると、情報をウィンドウごとに分けたくなるはずです。そんなウィンドウを実現してくれるライブラリがJSFrame.jsです。## JSFrame....
LiteGraph - 高機能なビジュアルプログラミング環境
ビジュアルプログラミング環境が注目されています。例えばNode-Redはビジネスレベルでも使われていますし、プログラミング教育の文脈の中でも様々な環境が利用されています。今回紹介するLiteGraphもそんなビジュアルプログラミング環境といえるソフトウェアです。様々なノードを連結し、情報をリミックスできます。## Li...
Jobmiru - どんなスキルが手に入るのかを重視した転職口コミサイト
仕事を決めるとき、何を重要視するでしょうか。給与、勤務地、待遇、同僚、上司など様々な条件が考えられます。そんな中、何の仕事をして何が得られるのかを重視する人もいるでしょう。そんな方に見て欲しいのがJobmiruです。何のスキルが身につくのか、そんな視点で作られた転職口コミサイトです。## Jobmiruの使い方トップペ...
JSONCrush - JSONをURLフレンドリーに圧縮
JSONはWeb APIのフォーマットとして多用されるようになっています。しかし広く普及すると、その使い勝手に対して不満を感じる人たちが増えます。サイズが大きい、もっと圧縮したいと考える人もいるでしょう。今回紹介するJSONCrushはURLフレンドリーにJSONを圧縮します。## JSONCrushの使い方適用したと...
texme - Markdownの中にLaTeXを埋め込めんで表示
Markdownではベーシックな記法しかサポートされていないので、こだわった記法を使うために拡張している人たちがたくさんいます。特に論文などを書く人たちにとっては表現力の低さが気になるでしょう。そこで使ってみたいのがtexmeです。Markdownの中にLaTeX記法が埋め込めるソフトウェアです。## texmeの使い...
WebGLStudio.js - 本格的な3D Webアプリケーション
デスクトップアプリケーションが続々Webアプリケーション化されています。開発環境や画像編集ソフトウェア、オフィススイートまで幅広くWebブラウザで動作するようになっています。今回紹介するWebGLStudio.jsはWebブラウザ上で3Dグラフィックスを作成できるソフトウェアです。## WebGLStudio.jsの使...
Flowy - さくさく作れるフローチャートライブラリ
フローチャートを利用する機会は意外と多いです。しかし専用のソフトウェアがないために表計算やプレゼンソフトウェアを使って無理矢理作っているのではないでしょうか。Webブラウザで手軽に作れると便利です。今回紹介するFlowyはシンプルなフローチャートライブラリです。## Flowyの使い方左側にあるノードをドラッグ&ドロッ...
p5.riso - 画像を懐かしさ溢れるリソグラフ風に加工
リソグラフというのは印刷方式の一つで、原版を作ることで高速な印刷ができます。色数を押さえることで高速印刷可能で、新聞の折り込みチラシにあるような風合いの印刷が可能です。そんなリソグラフをWeb上で再現してくれるのがp5.risoです。懐かしい風合いの表現になります。## p5.risoの使い方デモです。ちょっとかすれた...
BrowserGap - ブラウザからブラウザを呼び出して安全な環境を確保
セキュアで安全な実行環境を手に入れるにはサンドボックス化されているのが基本でしょう。OSでは普及していますが、Webブラウザではプライバシーに気を配ったモードがある程度です。今回紹介するBrowserGapはWebブラウザの中でWebブラウザを実行する試みです。## BrowserGapの使い方ボタンを押すとWebブラ...
PIXI Tower diffense - HTML5製のタワーディフェンスゲーム
タワーディフェンスゲームが好きな人は多いでしょう。味方をどのように配置するか、どう強化するかによって戦況が大きく変わります。理詰めで考える部分が多いので、開発者は好きそうです。そんなタワーディフェンスゲーム好きに贈るゲームがPIXI Tower diffenseです。PIXI.jsを使い、Webブラウザ上ですぐに遊べま...
GraphQL Network - GraphQLを開発者ツールで分かりやすく表示
GraphQLはREST APIの欠点を改善し、Web APIとして使われる場面が増えていくことでしょう。しかし開発中の難点として、エンドポイントがすべて同じURLであるために、どのアクセスなのかは深く見てみないと分からないという点があります。そんなGraphQLの欠点を克服してくれるGoogle Chrome機能拡張...
CopyPasteJS - コーディングなしでクリップボード操作
HTML5のAPIによって、Webブラウザからクリップボードを操作できるようになっています。共有を促すときにメッセージをクリップボードにコピーしたり、別な機能でコピーしたテキストを貼り付けるといった操作が考えられます。今回紹介するCopyPasteJSは、そんなWebブラウザのクリップボード操作を簡単に行えるようにする...