プログラミング言語 - JavaScriptの記事一覧
photoEditor - Webブラウザ上で画像編集
Webアプリケーションでできることの幅が広がっていますが、最近ではさらにWebブラウザ上だけでできることも広がっています。Webブラウザ上のJavaScript、ワーカー、WebAssemblyと機能が拡充しています。今回はphotoEditorを紹介します。クリック一つで画像を加工できる、そんなWebアプリケーション...
Torrent Web - TorrentをWebブラウザから使う
UbuntuやRasbianなど巨大なイメージファイルをダウンロードする際、HTTPよりもTorrentを使った方が速いことが多いです。しかしTorrentのイメージが悪く、会社などでインストールするのは難しいかも知れません。そこで使ってみたいのがTorrent Webです。TorrentのWeb UIに相当するソフト...
run.rb - RubyをWebブラウザ上で実行
Web上でJavaScript以外のプログラミング言語を使いたいという夢は昔から存在します。一時はActionScriptとJava、そしてC#が使えました。しかし今ではJavaScript一色です。しかし私たちにはWebAssemblyがあります。今回はWebAssemblyを使ってWebブラウザ上でRubyを動かす...
Maze Solver/Generator - JavaScriptで迷路の生成と回答
暇な時間にちょっと楽しみたいのが迷路です。子供は特に大好きで、できあがった時に何か絵が浮かび上がったりすると大喜びでしょう。しかし、そんな迷路も無限にある訳ではありません。そこで使ってみたいのがMaze Solver/Generatorです。迷路を自動生成し、さらに回答まで出してくれます。## Maze Solver/...
zipShare - 認証レスなファイル共有サービス
パスワードが暗号化されていない挙げ句に情報漏洩した宅ファイル便ですが、利用者は多かったので別なサービスへの乗り換えを余儀なくされていることでしょう。アカウントやパスワードを登録する系統のサービスはリスクが大きいと言えます。そこで使ってみたいのがアカウントを登録しないで使えるファイル共有サービスのzipShareです。#...
QR Code Scanner - PWAなQRコードリーダー
QRコードが世界的に普及したお陰で、様々な場面でQRコードが利用されています。スマートフォンアプリの中で活躍する機会も多いですし、Webブラウザ上で使いたい時も多いでしょう。現在PWAにも注目が集まっており、そこでもQRコードを使いたいと思う機会があるはずです。そこで使ってみたいのがQR Code Scannerです。...
Matter - ピュアなCSSで作られたマテリアルデザインコンポーネント
マテリアルデザインは単なるデザインにとどまらず、アニメーションも大事な要素になります。ユーザがタッチした、スワイプしたといったアクションに対して適切なフィードバックがあってこそです。そのため、デザインの敷居が高くなっています。そこで使ってみたいのがMatterです。ピュアなCSSだけで作られたマテリアルコンポーネントで...
実績解除ったー - 実績を解除しよう
ゲームなどをやっているとはじめて行ったアクションや累積ポイントに対して実績が解除されます。実績を解除すると、それが一覧として表示されます。すべての実績を解除しようと躍起になる人もいるでしょう。そんな実績解除好きな人たちに送りたいのが実績解除ったーです。自分の好きな言葉、色で実績を解除できます。## 実績解除ったーの使い...
Meemo - Markdownを使った個人用メモ帳
個人のメモ環境は大事です。気がついた時にささっとメモできる環境があると忘れてしまうのを防いだり、さらに発想を膨らませられます。アイディア、タスク、その日にあったこと…なんでもとにかくメモしておきましょう。今回紹介するMeemoもそんなメモ環境の一つです。個人用に特化し、すぐにでもはじめられる手軽さが売りです。## Me...
x-spreadsheet - Canvasで作られたWeb表計算ソフトウェア
ExcelやGoogleスプレッドシートはオフィスに欠かせないツールになっています。単純な表計算としてはもちろん、ドキュメントやプロジェクト管理などあらゆる場面で活躍しています。今後10年経っても存在し続けそうです。しかしUIがまったく進化しなくても良いわけではありません。今回はその一例、Canvasを使った表計算ソフ...
GitHub Spray - GitHubのコントリビューショングラフを自由に描く
GitHubの活動を示すコントリビューショングラフは活動が多ければ緑の四角になり、より活動量が多いほど色が濃くなります。つまりなるべく色が濃い四角が並んでいるほど、開発者としての活動が活発であると言うことです。そんなコントリビューショングラフを使って遊べるのがGitHub Sprayです。## GitHub Spray...
QuickTabSwitch - Google Chromeのタブを素早く切り替える
Google Chromeを使っていて、大量のタブを開いてしまって、元々開いていたタブがどこにいってしまったのか分からなくなった経験はないでしょうか。そのため、仕方なく同じURLを別なタブで開いたりします。その結果、さらにタブが増えていきます。そんなタブ管理が苦手な方に使ってみて欲しいのがQuickTabSwitchで...
org.js - Web上でorg-mode
Emacsをメインで使っていた頃にはメモ環境としてorg-modeを使っていました。覚えることは多いのですが、一旦慣れてしまうと一つのテキストにすべて記述できる環境は便利でした。キーボードショートカットで様々な操作ができるのも良かったです。そんなorg-modeを懐かしむ人に贈りたいソフトウェアがorg.jsです。Ja...
Markline - Markdownを使った年表表示
Markdownが開発者用ドキュメントのデファクトスタンダードと言える存在になり、とりあえずMarkdownで書いておくという人が増えています。そうすることで将来的にソフトウェアによって多彩な表現が容易に実現できるようになるでしょう。今回はその一例として、Markdown記法から年表表示を可能にするMarklineを紹...
Shiny - モバイルWebサイトで使える反射効果
モバイルデバイスはデスクトップよりもセンサーが多く搭載されており、それらを使うことでより自然でインタラクティブ性の高い効果を出せます。例えば加速度センサーであったり、位置情報、距離センサーなどです。今回紹介するShinyはスマートフォンの傾きを使って、自然な反射を実現しています。## Shinyの使い方実際に使っている...
Animating URLs with Javascript and Emojis - URLで絵文字を使ったアニメーション
絵文字は世界から認知されるコンテンツになっています。年々文字数も増えており、表現できる情報がどんどん増えています。テキストとしてだけでなくスライドで使ったり、アイコン代わりにしているケースもあります。今回紹介するAnimating URLs with Javascript and Emojisはその名前の通り、アニメー...
Rambox CE - メール/メッセージサービスを一カ所で管理
コミュニケーションはインターネットの基礎技術と言えます。かつては掲示板やIRC、ICQなどがあり、今はSlackや各種メッセンジャーがあります。メールだってあり、メッセージサービスが乱立し、相手によって使い分けているのではないでしょうか。そんな中だからこそ使ってみたいのがRambox CEです。各種メッセージサービスを...
BetterTweetDeck - TweetDeckの表示を細かくカスタマイズ
Twitterを複数アカウントで運営する際に便利なのがTweetDeckです。しかし、かゆいところに手が届かないインタフェースで、ストレスをためている人も少なくないはずです。もう少しこうだったら使いやすいのに…と思ったりしないでしょうか。そこで使ってみたいのがBetterTweetDeckです。TweetDeckをカス...
long-press - Webブラウザでロングタップイベントを実現
スマートフォンでよく使われる操作にロングタップがあります。例えばiOSのホーム画面でアプリを整理する際にはアイコンをロングタップするとアイコンが揺れて整理できるようになります。同様の操作をWebブラウザ上で使えるようにするのがlong-pressです。## long-pressの使い方利用しているところです。クリックし...
TamperDAV - Tampermonkeyのスクリプトをローカルで編集&同期
Tampermonkeyというのはいわゆるユーザスクリプトを管理、利用するためのソフトウェアです。通常のままでは使い勝手の悪いWebサイトでもユーザスクリプトを使うことで独自の機能や画面の書き換えが可能になります。デフォルトではTampermonkey上でコードの編集を行いますが、TamperDAVを使うことで自分の好...