プレミアムユーザー限定記事
MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから。
- 2017/12/14
- できることを全力でやる
- 2017/11/25
- 恥ずかしさを感じないためにできること
- 2017/11/11
- プロジェクトを遅延させないコミュニケーションパス管理
Vandal - Web Archiveを使って過去のサイトへアクセス
Webサイトは常に恒久的に存在し、変化しない訳ではありません。コンテンツは日々追加され、突然閉鎖されることもあります。そんな時に過去のWebサイトを見られるサービスが便利です。日本ではウェブ魚拓がよく知られていますが、世界で見ればWeb Archiveが有名でしょう。そんなWeb Archiveを素早く使えて、まるでタ...
Trombone.js - Web上で奏でるトロンボーン
HTML5のAPIには音楽を奏でるものもあります。Web上でピアノを演奏したり、MIDIを解析するサービスが作られ、将来的にはWebブラウザだけで曲も作られていくかも知れません。今回紹介するTrombone.jsは名前の通り、Web上で奏でるトロンボーンです。## Trombone.jsの使い方トップページです。トロン...
lightGallery - 画像、動画に対応したギャラリーライブラリ
スマートフォンやデジカメで撮影した写真を活かす方法として、Webサイトなどで公開している人は多いでしょう。しかし、単に写真へのリンクを並べるだけでは面白くありません。サムネイルを作ったり、見せ方も工夫すべきです。今回紹介するlightGalleryは写真をサムネイル表示し、クリックで拡大表示するギャラリーライブラリです...
Spearmint - React/Redux/アクセシビリティのテストを実行管理
ソフトウェアにはテストが付き物です。しかしテスト環境を整えるのは意外と面倒だったりします。ユニットテストならまだしも、Webブラウザを使ったようなテストだと、プロジェクトごとに環境を整えるのが大変です。そこで使ってみたいのがSpearmintです。ユーザビリティテストをはじめ、Webブラウザのテストを管理するGUIアプ...
Bibliogram - Instagramフロントエンド代替
Instagramを見る際には専用のアプリを使うのが基本です。Webからも使えますが、広告が表示されたり、アクセス元などの個人の情報が取られているかも知れません。彼らのメインビジネスなので致し方ありませんが、閲覧だけで情報が抜き取られるのは良い気がしません。そこで使ってみたいのがBibliogramです。Instagr...
Dataflow - JavaScriptが実行できるノートブック
データが幾ら集まっていても、ただ集めているだけでは意味がありません。そこから何からの価値を見出すためには、データを可視化しなければならないでしょう。しかし可視化するのにも工夫が必要です。今回紹介するDataflowはPythonを使ってデータをビジュアル化するソフトウェアです。## Dataflowの使い方Wikipe...
F2 - ターミナルで使えるリネーマ
ファイル名を変更する際に、ExplorerやFinderで行っているでしょうか。数個のファイルであればいいですが、100や200ものファイル名を変更するのは面倒です。macOSでは連番付けてファイル名をバッチ変更もできますが、対象を絞り込む際にはマウスで選択しなければなりません。今回紹介するF2はターミナルで使えるファ...
<file-attachment> element - GitHub製のWebアップロードコンポーネント
最近のWebアプリケーションではファイルをWebブラウザにドラッグ&ドロップしてアップロードすることが良くあります。開発するのはさほど難しい訳ではありませんが、ちょっと面倒だったります。かといって、ファイルアップロードライブラリを使うと、周りのデザインと合っていないことも良くあります。今回紹介する elementはシン...
Editable React Table - React用の編集できるテーブルコンポーネント
業務システムでは常に一覧表示が求められます。一覧化されたデータは一気に内容を確認できるので便利ですが、次にはデータのソートや絞り込みが必要になるでしょう。さらにインラインで編集したいと要望されるかも知れません。今回紹介するEditable React TableはReactの中で使える編集可能なテーブルコンポーネントで...
Beat of the Day - みんなで音楽を作ろう
音楽界隈ではマッシュアップという文化があります。音楽同士を組み合わせたり、カスタマイズして新しい音楽を生み出していきます。DJによる楽曲の操作もマッシュアップの一つです。今回紹介するBeat of the Dayはそんなマッシュアップを加速させそうなWebサービスになります。## Beat of the Dayの使い方...
Color Calendar - シンプルなカレンダーライブラリ
Webサイト上でカレンダーを表示したい機会は意外と多いです。そんな時には機能面だったり、デザイン面で選択が決まるでしょう。複雑なHTMLを記述するようなものは避けたいはずです。今回紹介するColor Calendarはシンプルなカレンダーライブラリです。日付と、日付に基づいたイベントを一覧表示します。## Color ...
sqliteviz - オフラインでも使えるWebベースのデータビジュアライズ
データのビジュアライズを行う際に、Excelなどの表計算ソフトウェアを使っていないでしょうか。全データを対象とするなら良いですが、絞り込んだ上でグラフ化するのはちょっと面倒です。そこで使ってみたいのがsqlitevizです。Webブラウザで使えるデータビジュアルツールです。## sqlitevizの使い方CSVやSQl...
Animate - 画面に表示されたタイミングを管理するJavaScriptライブラリ
最近、スクロールと連動するアニメーションを行うWebサイトが増えています。主にLPのような広告系のところに多いですが、スクロールに合わせて制御するのはとても大変です。今回紹介するAnimateはDOMが表示されたタイミングで発火するイベントを追加できるJavaScriptライブラリです。## Animateの使い方利用...
party.js - ビジュアルエフェクトでユーザ体験を向上させよう
Webサイトの中に、ちょっとしたギミックを組み込みたいと思ったことはないでしょうか。他のWebサイトでは見られない仕組みを入れると、訪問者の目を引くはずです。それはアニメーションのような動きがあるものが良いでしょう。今回紹介するparty.jsはクリックイベントに伴うビジュアルエフェクトを実現するライブラリです。## ...
WinBox.js - Webアプリ用のウィンドウ管理
Webアプリケーションが次々と登場しており、複雑な画面を持ったものも増えています。Gmailなどはメールは個別のウィンドウで作成でき、複数のメールを開いて編集できます。こうしたウィンドウ管理がWebアプリケーションのレベルを引き上げることでしょう。今回紹介するWinBox.jsはWeb向けのウィンドウ管理ライブラリにな...
GitEdit - Git専用エディタ
Gitでコメントを書く際には何かエディタを使っているでしょうか。VS Codeなどのエディタを設定している人もいるでしょうが、ちょっと大げさです（常に立ち上げているなら良いですが）。かといってターミナルやコマンドプロンプト上で日本語入力するのは面倒そうです。そこで使ってみたいのがGitEditです。Git専用のテキスト...
jquery.graphviz.svg - GraphvizのSVGデータを表示/機能追加するjQueryプラグイン
チャートやネットワーク図などを描くのに使われるのがGraphvizです。多くの場合PNGなどの画像で出力して利用しますが、SVGへのエクスポートも可能です。Web向けであれば、画像よりも使い勝手が良いでしょう。そんなGraphvizで出力したSVGを表示するのがjquery.graphviz.svgです。## jque...
Getbook - コマンド一つでURLからePubを生成
電子書籍を作ろうと思うと、専用のエディタを使わないといけないと思うでしょうか。もっと手軽に、ブログを書くように作成できると手軽ですよね。WebもePubは両方ともHTMLをベースにしているので、フォーマットは流用できるはずです。今回紹介するGetbookはWebサイトのフィードや記事URLから電子書籍を生成するソフトウ...
Eva.js - Web向けのJavaScript製ゲームエンジン
ゲーム開発を行う際に一から作ることは多くありません。ゲームに関わる多くの機能を提供するゲームエンジンを選択するのが基本でしょう。モバイルアプリであればUnityやUnreal、WebであればPixiJSなどが有名です。今回紹介するEva.jsもWeb向けのゲームエンジンになります。Canvasベースのパフォーマンスに優...
What Time Today? - 空いている日程を素早く確認
リモートワークになってミーティングが増えたと感じている人は多そうです。そんな時に、参加者の時間調整をするのが一番面倒だったりします。空いている時間を見つけるのはとても大変です。そこで使ってみたいのがWhat Time Today?です。カレンダーから選ぶだけで空いている時間をリストアップできます。## What Tim...