Webの記事一覧
Bowlcu - SVGテキストを自在に変化
SVGの面白いところはバイナリデータではないので、JavaScriptから簡単に操作できるところです。時間によって移動させたり、形を変えることもできます。もちろんクリックなどのイベント処理とも連携できます。今回紹介するBowlcutはSVGのテキストを面白く表示できるライブラリです。## Bowlcutの使い方例です。...
Google Form to Slack - Googleフォームの回答をSlackへ通知
Googleフォームを使ってお問い合わせフォームを提供しているケースはよくあります。登録した内容はスプレッドシートに自動登録されるので後から分析する際に便利ですが、通知機能がメールだけなことに不満を感じる人も多いでしょう。社内でSlackを使っているならば、そちらに通知を送ってくれた方が便利です。そこで使ってみたいのが...
PeerTube - P2Pを使った分散化動画共有サービス
最近は分散化、非中央化の流れがあります。仮想通貨、ブロックチェーンであったり、Mastodonも分散化技術を特徴としています。分散化によって、ベンダーロックインも避けられ、多様性も生まれるでしょう。今回はYouTubeのような動画共有サイトを分散化技術で実現するPeerTubeを紹介します。## PeerTubeの使い...
DownGit - GitHubリポジトリのディレクトリダウンロードURLを生成
GitHubで特定のファイルやディレクトリだけダウンロードしたいと思うことがあります。ファイルであればRawファイルを表示すれば良いかも知れませんが、ダウンロードを実行するのも面倒です。そこで使ってみたいのがDownGitです。GitHubのリポジトリのパスを入力して、ダウンロード用のURLを生成します。## Down...
CSPVR - Content Security Policyのチェックツール
Content Security Policyは外部コンテンツの不用意な読み込みを防止することで、XSSなどを防いでくれる仕組みです。何も設定しなくともWebブラウザは動作しますが、サイトをセキュアにするためには設定した方が良いでしょう。そんなContent Security Policyをチェック、レポートしてくれる...
nanoJS - jQueryの代わりに使えるDOM操作ライブラリ
jQueryはもう使いたくないと思いつつ、使った方が楽になるという場面は多いです。Ajaxもその一つですが、Superagentやaxiosといった代替ライブラリを使うこともできます。そしてもう一つはDOM操作です。DOM操作を素のJavaScriptだけで書こうと思うと若干面倒です。そこで使ってみたいのがnanoJS...
PIB - PHPをWebAssembly化してWebブラウザ上で実行
WebAssemblyはCやC++、Rustなどの言語で開発できます（他にもLLVMを生成する言語であれば何でも良いのですが）。つまり元々Cで開発されたソフトウェアはWebAssembly化できる可能性（あくまでも可能性）がある訳です。そんな無謀とも言える可能性を感じさせるのがPIBです。なんとPHPをWebブラウザ上...
Popcode - 学生向けのWeb開発/実行環境
プログラミングが教育に取り入れられる中で大事なのは体験です。かつての自主的にプログラミングを学ぶ人たちと違って、欲求を呼び起こすところからはじめる必要があります。そのためにはいち早く結果を見られる形にしなければなりません。そうした中でWebは良いプレゼン層になるでしょう。学生向けに作られたPopcodeをぜひ体験してみ...
Wired Elements - ラフなデザインになるカスタムタグ
ワイヤーフレームなど、ラフに作りたいという時は手書きなどが向いています。それをドローのソフトウェアなどできっちりと書き始めてしまうと、些細な部分にこだわってしまって目的であるプロトタイプがなかなか作れなかったりします。そこで使ってみたいのがWired Elementsです。Web上でラフなデザインを再現できるWebコン...
Nim forum - Nimで作られたDiscourseクローン
Nimというプログラミング言語は聞いたことがなかったのですが、Rust/D/Goといったプログラミング言語と比較されるようです（via Wikipedia
GitHub Contribution Chart Generator - GitHubでのこれまでの活動をすべて可視化
GitHubの活動計（Contribution Chart）は開発者としてのやる気を喚起してくれます。すべて埋めてやろうと躍起になる開発者もいるのではないでしょうか。しかし直近の情報しか見えないのが残念です。そこで使ってみたいのがGitHub Contribution Chart Generatorです。これまでのすべ...
LaTeX.js - Webブラウザ上で動作するLaTeX執筆環境
LaTeXは今なお論文やレポートを書く際に使われています。しかし、環境整備が面倒であったり、インストールするライブラリのサイズが大きいこともあって、もっと手軽に作りたいと思う人が多いのではないでしょうか。そこで使ってみたいのがLaTeX.jsです。なんとWebブラウザ上で使えるLaTeX環境です。## LaTeX.js...
mini-c - node製のWebAssemblyコンパイラ
WebAssemblyには未来が感じられます。DOM操作などはできないものの、コンパイルしたコードがWebブラウザ上で動かせるのは魅力的です（しかもWeb標準の技術で！）。しかしまだ開発環境を整えるのは大変なのが現状です。そこで期待したいのがmini-cです。なんとWebブラウザ上でWebAssemblyを生成します。...
Scratch editor - Web上でのグラフィックスアピールに特化したライブコーディングシステム
ライブコーディングは勉強会などで盛り上がるネタの一つです。臨場感があることで、参加者の目を釘付けにできます。時に失敗するかも知れませんが、それでも良いのです。念のため動画でも用意しておけば問題ありません。そこで使えるのがScratch editorです。グラフィックス系のデモを行う際にインパクトあるステージを演出するで...
logo.svg - テキストとフォントからSVGを生成
スマートフォンやタブレットによって高解像度なディスプレイが普及しています。そのため、画像などのバイナリのファイルは高解像度向けにサイズの大きなファイルを用意せざるを得ず、ネットワークの負荷増大につながっています。そこで使ってみたいのがlogo.svgです。テキストベースの簡易的なロゴをSVGで生成してくれます。## l...
icon QRCode genereter - アイコンを追加したQRコードを生成
QRコードはガラケーややスマートフォンの普及に伴って一気に伸びていった技術です。ネットワークなどを使わずに情報を伝達する手段として、とても優れています。しかし、生成されたQRコードはどれも同じようなものになるので、判別しづらいという問題があります。そこで使ってみたいのがicon QRCode genereterです。Q...
Nuage - 各種ストレージサービスを共通のUIで操作
クラウドにデータを保存できるサービス、技術が増えています。一つのストレージに頼らず、様々なサービスを使いこなしているのではないでしょうか。しかし、その結果としてUIがバラバラになってしまって、管理が煩雑になります。Nuageは多数のクラウドストレージに対応し、共通したインタフェースで使えるようにするソフトウェアです。#...
MeetHub - PythonのシンプルなMeetup.comクローン
コミュニティなどのイベントを管理するサービスとして、日本であればconnpassやDoorkeeper、EventRegistなどが知られています。それに対して海外であればMeetup.comが知られています。しかしMeetup.comは本格的に使おうと思うと有料サービスになってしまい、コミュニティでは使いづらいかも知...
redcycle-map - 非公式赤チャリマップ
俗に赤チャリと呼ばれるシェアバイクが日本でも広まってきています。元々横浜ではじまった仕組みですが、東京23区内でも対応している場所が増えています。どこでも乗り捨てられる仕組みではないので、自転車置き場になるポートマップが重要です。公式でもポートマップは提供されていますが、非公式ながらもredcycle-mapの方が情報...
Qemu.js - QemuをEmscriptenでWeb化
EmscriptenはCのコードをLLVM化し、さらにJavaScriptに変換します。すべてのソフトウェアが問題なく動作する訳ではありませんが、多くのCで作られたソフトウェアがJavaScript上で動くようになっています。そんなEmscriptenの集大成とも言えそうなのがQemu.jsです。あのQemuがWeb上...