プレミアムユーザー限定記事
MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから。
- 2017/12/14
- できることを全力でやる
- 2017/11/25
- 恥ずかしさを感じないためにできること
- 2017/11/11
- プロジェクトを遅延させないコミュニケーションパス管理
Webtest.app - アドブロックの有無でサイトの表示速度をチェック
アドブロックを入れることでWebページ表示が高速化されることはよく知られていますが、どれくらい速くなったのか計測している人は少ないでしょう。何となく体感として速くなっている程度の認識かと思います。そこで使ってみたいのがWebtest.appです。Webサイトごとに広告を表示した場合としなかった場合の比較ができます。##...
Mobile First Animation in React - React製のスマートフォンアプリ風UXコンポーネント
Webがどんどんネイティブアプリに近い体験を提供できるようになっています。WebブラウザのAPIもそうですが、アニメーションの高速化によって、スマートフォンアプリのようなUXも実現できます。今回紹介するMobile First Animation in ReactはモバイルWeb向けにアニメーションを提供するReact...
Footsies - シンプルなストリートファイター風格闘ゲーム
パキスタンには恐ろしく鉄拳の強いゲーマーがいるなんて話もありますが、格闘ゲームは熱狂的なファンが多いゲームジャンルの一つです。プレイするのも楽しいですが、開発者であれば自分で作ってみるのはいかがでしょう。今回紹介するFootsiesは2Dの格闘ゲームです。移動キーとスペースキーくらいしか使わないのに奥が深い、そんなゲー...
serve - Dart製の静的ファイル用HTTPサーバ
ローカルでHTMLファイルなどの表示を確認するために、HTTPサーバを立ち上げたいと思うことは良くあります。個人的にはRubyのワンライナーをエイリアスにして使っていますが、Pythonを使う人もいるでしょう。今回紹介するのはserve、ローカルでさくっと使えるHTTPサーバです。## serveの使い方serveを実...
Credit Card Form - Vue製のクレジットカード入力コンポーネント
Web上でものを買う場合、クレジットカード番号を入力する機会は多いかと思います。決済情報を入力する際にはなるべく手間取らないようにしないと、せっかくの決済機会を逃してしまうことになります。そこで使ってみたいのがCredit Card Formです。アニメーションや表示を工夫してスムーズにクレジットカード情報の入力ができ...
Distortion Hover Effect - マウスオーバーで画像を切り替え
Webページではユーザのアクションによって様々なエフェクトが可能です。ユーザ自身が分かるアクションとしては文字入力やクリックなどになりますが、他にもウィンドウサイズを変えたり、スクロールでも可能です。その中で最も簡単そうな、マウスオーバー時にエフェクトを起こすのがDistortion Hover Effectです。しか...
Kashiki - OpenGLを使ったアニメーションが気持ちいいエディタ
テキストエディタはコンピュータを仕事に使う人にとっては商売道具とも言える大事なソフトウェアでしょう。そのため、手に馴染むかどうかで生産性が大きく変わってきます。ただ文字が打てれば良いという訳ではないでしょう。そこで紹介したいのがKashikiです。OpenGLを使うことで、ヌルヌルと動く面白いエディタになります。## ...
Counter - 数字を大まかな時間に換算
時間の表現として、絶対時間を使う場合と相対時間を使う場合があります。相対的な時間は、今の時刻を知らなくとも使えるので便利です。また、見る人のタイミングによって時間が異なる場合、相対時間の方が分かりやすいこともあります。例えばソーシャルメディアの投稿日時などを表現する場合です。だいたいの時間を知りたい場合、Counter...
QR-Code - 今表示しているURLのQRコードを表示
Webブラウジングしていて、そのURLをスマートフォンやタブレットで表示したいと思うことが良くあります。そんな時に便利なのがQRコードで、カメラを使ってURLが送信できます。かつてはGoogleチャートが使えたのですが、QRコードは非推奨になってしまっています。そこで使ってみたいのがQR-Codeです。Google C...
Kagura - RustだけでWebアプリケーションを開発するフレームワーク
WebAssemblyを開発する際の最も基本的な言語となるのがRustです。WebAssemblyでは元々DOMやネットワーク操作ができませんが、Rustのwasm-bindingによってWebブラウザ側のAPIを実行できるようになりました。その結果、WebAssembly活用の幅が広がったと言えます。Kaguraはそ...
Chrome Extension CLI - Google Chrome機能拡張開発を強力にサポート
Google Chrome機能拡張を使えばWebブラウザがさらに便利になります。普段物足りない、痒いところに手が届かないと感じているなら自分で機能拡張を作ってしまいましょう。しかし作り方を一から学ぶのは面倒ですよね。そこで使ってみたいのがChrome Extension CLIです。Google Chrome機能拡張作...
OpenTechCalendar - ヨーロッパ版IT勉強会カレンダー
開発者の勉強会は世界中で行われています。様々な集客サイトがあるので、情報が散らばってしまっており、自分の行きたい勉強会を探すのも大変になっているかも知れません。情報は一カ所に集約されていると便利です。そこで使えるのがOpenTechCalendarです。世界各地で行われている勉強会を一覧できます。## OpenTech...
OnRuby - Rails製のユーザグループプラットフォーム
現在Meetup.com離れが進んでいます。元々月額費用が高いと言われていましたが、最近になって参加者からも強制徴収する機能をテストしていると言われて、代替サービスを検討するユーザが増えています。そんな中の候補としてあがっていたのがOnRubyです。Ruby on Rails製のユーザグループプラットフォームです。##...
VeraCrypt - TrueCrypt後継の暗号化イメージ作成ツール
ノートPCを電車に忘れた、盗まれたといった事故が後をたちません。重要なデータが蓄積されているノートPCをなくすのは重大なインシデントであり、機密データが抜き取られる可能性もあります。今回紹介するVeraCryptはストレージを暗号化したり、暗号化イメージを作成できるソフトウェアです。## VeraCryptの使い方メイ...
TinaCMS - React製のWebサイト編集ツール
Webサイトを構築する際、見た目と作成環境がかけ離れていると、修正して結果を確認するという作業を何度も繰り返さないといけません。WYSIWYGなエディタもありますが、CMSのように決まった形ではないので複雑なデザインは作業量が増えてしまいます。今回紹介するTinaCMSはWebサイト上で使える編集機能を実現します。項目...
tinysearch - WebAssemblyを使ったWebブラウザ用全文検索
Webサイトには検索機能をつけるのが基本です。その多くの場合、サーバサイドでデータベースを検索し、その結果を返すようになっています。またはコンテンツデータをあらかじめクライアントサイドに持っておいて、JavaScriptで絞り込んだりします。今回紹介するtinysearchはクライアントサイドで検索を行います。特徴的な...
ReportBro - Web上で帳票をデザイン
レポートは生成するのも大変で、さらにそのデザインを行うのも大変です。デザインをコーディングしてしまうと、ちょっとした修正でも手間になります。その結果、専用のツールやExcelでテンプレートを作れるようにするでしょう。今回はWebブラウザ上でレポートのテンプレートが作れるReportBroを紹介します。## Report...
PlainDraggable - SVG/DOMのドラッグ&ドロップライブラリ
Webアプリケーションが多機能になるにつれて、ローカルアプリケーションライクな操作が求められるようになっています。例えばドラッグ&ドロップはローカルアプリケーションであれば良くある操作と言えます。そんなドラッグ&ドロップをスムーズに行えるライブラリがPlainDraggableです。## PlainDraggableの...
Chrome-Password-Grabber - Google Chromeに保存したパスワードをまとめて取得
Google Chromeでパスワード管理をしている人は多いでしょう。Google Chromeをメインブラウザとして使っている人であれば大抵そうでしょうし、無料で使えるのも便利です。パスワードさえ漏洩しなければ安全です。逆に言えばパスワードが漏洩すれば大惨事になる可能性もあります。Chrome-Password-Gr...
Meriyah - 最新のECMAScript仕様も使えるJavaScriptパーサー
JavaScriptが色々なプラットフォームで使われるようになっています。JavaScriptから別な言語に変換するパーサーなどを作りたいと思ったら必要なのがパーサーです。コードを解析することで、別な使い方が生まれます。今回紹介するMeriyahはJavaScriptで作られた（実際にはTypeScriptですが）Ja...