プログラミング言語 - JavaScriptの記事一覧
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を使うことで自分の好...
Trilium Notes - 個人用ナレッジベース
個人のメモ環境については、これといった決定的な製品がなかなか出てきません。かつてはEvernoteのようなもの、さらに昔ではorg-modeもありました。最近ではBoostnoteを使う人も多く、全く別な独自の環境を構築する人もいます。今回は個人用ナレッジベースとしてTrilium Notesを紹介します。## Tri...
dimage.js - アニメーションGIFよ、進化せよ！
人は常に進化していなければなりません。立ち止まったら、それは停滞ではなく退化のはじまりであると捉えるべきです。写真から動画、二次元から三次元が作られるように次のアクションが求められるのです。今回紹介するdimage.jsも同じです。二次元に留まるな、がコンセプトなソフトウェアとなっています。## dimage.jsの使...
JournalBook - オフラインファーストなプライベートな日記
ブログではなく、日記は個人的なものです。外部に公開したくない人は多いでしょうが、そのために専用のソフトウェアをインストールするのはためらってしまいます。普段使っているWebブラウザで、プライベートな日記をささっと書けると手軽です。そこで使ってみたいのがJournalBookです。データはWebブラウザ内部に保存され、外...
MarkDeck - 多機能なHTMLスライドを生成
プレゼンテーションのスライドを作る方法としてはPowerPointやKeynote、Googleスライドと言った専用のソフトウェアを使うのが手軽です。ただし相手が同じ環境でないと使えなかったり、ソフトウェアを手に入れる必要があります。Googleスライドは便利ですがフォントの種類が少なかったりするのが残念です。そこで使...
RunJS - デスクトップ用のJavaScriptプレイグラウンド
JavaScriptのコードをさくっと試したいと思ったときにはどうしていますか。一つはWebブラウザの開発者ツールを開いてコンソールを使う方法があります。もう一つはCodePenのようなサービスを使ってHTMLなどと組み合わせることもできるでしょう。しかしどちらも外部ライブラリが関係した際などに面倒です。そこで使ってみ...