Webの記事一覧
mdline - Markdown記法で縦型の年表表示
サービスバージョンアップの歴史、個人の年表などタイムライン表示を使いたいことはよくあります。それ用のライブラリもありますが、記法が面倒だったり、後々のメンテナンスが面倒というイメージがあります。そこで使ってみたいのがmdlineです。記法はMarkdownを使っていますので、使い方はすぐに覚えられます。## mdlin...
Maze Solver/Generator - JavaScriptで迷路の生成と回答
暇な時間にちょっと楽しみたいのが迷路です。子供は特に大好きで、できあがった時に何か絵が浮かび上がったりすると大喜びでしょう。しかし、そんな迷路も無限にある訳ではありません。そこで使ってみたいのがMaze Solver/Generatorです。迷路を自動生成し、さらに回答まで出してくれます。## Maze Solver/...
zipShare - 認証レスなファイル共有サービス
パスワードが暗号化されていない挙げ句に情報漏洩した宅ファイル便ですが、利用者は多かったので別なサービスへの乗り換えを余儀なくされていることでしょう。アカウントやパスワードを登録する系統のサービスはリスクが大きいと言えます。そこで使ってみたいのがアカウントを登録しないで使えるファイル共有サービスのzipShareです。#...
Sprite - フローチャートを生成するコード風記法
詳細設計を行うなら実装してしまった方が早いと言った声もありますが、それでも機能単位のフローチャートが用意されている方が間違いはないように思います。共通認識がないと個人の勝手な判断が入り、思わぬバグを生み出したりします。今回紹介するSpriteはコードライクにフローチャートが書けるソフトウェアです。テキストベースなのでメ...
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...
WasmWinforms - WebAssemblyでWinformsを再現
WebAssemblyはWebブラウザ上でネイティブコードが動かせるようになり、より大型で複雑なWebアプリケーションが実現できるようになります。とても期待できる一方、DOM操作ができないといった欠点もあります（将来的に解決する予定ですが）。今回はC#からWebAssemblyに変換して作られたWasmWinforms...
org.js - Web上でorg-mode
Emacsをメインで使っていた頃にはメモ環境としてorg-modeを使っていました。覚えることは多いのですが、一旦慣れてしまうと一つのテキストにすべて記述できる環境は便利でした。キーボードショートカットで様々な操作ができるのも良かったです。そんなorg-modeを懐かしむ人に贈りたいソフトウェアがorg.jsです。Ja...
Prophetter - Twitterを使った未来日記
通常の日記は過去について記述します。少なくとも数時間、数分前の事柄について記述するでしょう。つまり事実をベースであり、過去を振り返るのが日記であると言えます。もし今日目標を書いておいたとしても、数日経ったら忘れてしまっているのではないでしょうか。そこで使ってみたいのがProphetterです。Twitterを使った未来...
Markline - Markdownを使った年表表示
Markdownが開発者用ドキュメントのデファクトスタンダードと言える存在になり、とりあえずMarkdownで書いておくという人が増えています。そうすることで将来的にソフトウェアによって多彩な表現が容易に実現できるようになるでしょう。今回はその一例として、Markdown記法から年表表示を可能にするMarklineを紹...
Shiny - モバイルWebサイトで使える反射効果
モバイルデバイスはデスクトップよりもセンサーが多く搭載されており、それらを使うことでより自然でインタラクティブ性の高い効果を出せます。例えば加速度センサーであったり、位置情報、距離センサーなどです。今回紹介するShinyはスマートフォンの傾きを使って、自然な反射を実現しています。## Shinyの使い方実際に使っている...
indigo-player - 高い拡張性を誇る動画プレイヤー
videoタグの登場によってWeb上でも動画が再生できるようになりました。しかし機能的には実に簡素で、ただ再生する以上の機能がありません。大抵は別途ライブラリを用意して、そのライブラリ経由でvideoタグを使うでしょう。今回紹介するindigo-playerもそんな動画プレイヤーの一つです。扱える動画が多いのが特徴です...
long-press - Webブラウザでロングタップイベントを実現
スマートフォンでよく使われる操作にロングタップがあります。例えばiOSのホーム画面でアプリを整理する際にはアイコンをロングタップするとアイコンが揺れて整理できるようになります。同様の操作をWebブラウザ上で使えるようにするのがlong-pressです。## long-pressの使い方利用しているところです。クリックし...
Chrome Github Points - GitHubのIssueでストーリーポイントを管理
開発すると必ず工数がかかります。そのため、やらなければならない数あるタスクの中からなるべく小さなコストで大きな成果を達成できるものを選択する必要があります。その際に使われるのがストーリーポイントです。ストーリーポイントを使うことで各タスクの相対的な大きさが可視化されます。そしてGitHub Issueとストーリーポイン...
Cookie AutoDelete - プライバシー保護に。タブを閉じたらCookie削除
プライバシーを重視する人にとってWebブラウジングは注意すべき点が多いことでしょう。個人のデータは大手のベンダーに吸い上げられており、広告などに使われています。不必要に収集した情報が漏洩することも少なくありません。そこで使ってみたいのがCookie AutoDeleteです。タブを閉じる際にCookieを自動的に削除し...
dimage.js - アニメーションGIFよ、進化せよ！
人は常に進化していなければなりません。立ち止まったら、それは停滞ではなく退化のはじまりであると捉えるべきです。写真から動画、二次元から三次元が作られるように次のアクションが求められるのです。今回紹介するdimage.jsも同じです。二次元に留まるな、がコンセプトなソフトウェアとなっています。## dimage.jsの使...