プレミアムユーザー限定記事
MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから。
- 2017/12/14
- できることを全力でやる
- 2017/11/25
- 恥ずかしさを感じないためにできること
- 2017/11/11
- プロジェクトを遅延させないコミュニケーションパス管理
RMConnecter - iTunes Connectによるアップロード作業を効率化
iOSアプリを公開する際にはiTunes Connectを使います。その際には各種メタデータを設定したり、説明書きやアップデート情報などを記述します。それらの内容によって、ダウンロード数は大きく変わってくるでしょう。そんなiTunes Connectでのワークフローを改善してくれるのがRMConnecterになります。...
Facebook Gist Viewer - FacebookでGistをタイムラインに表示
FacebookではリンクのOpenGraphを表示してくれます。しかし、これでは内容が分からないサイトはたくさんあります。その結果として、クリックして外部サイトを表示しなければならず、面倒な思いをすることでしょう。今回はGistのリンクについて、コードをインライン展開してくれるFacebook Gist Viewer...
StackEdit - ブラウザ用WYSIWYGなMarkdownエディタ
個人的に良いと思うMarkdownエディタは、記法の形は残しつつもWYSIWYGに表示が確認できるものです。二ペイン型は使い慣れた方にとってはいいですが、初級者には敷居が高いでしょう。今回紹介するStackEditは二ペイン型ながらも記法がある程度エディタ部にも反映されるMarkdownエディタになります。## Sta...
HLS Downloader - HTTPライブストリーミングをダウンロードするGoogle Chrome機能拡張
HTTPライブストリーミングはAppleが開発したストリーミングプロトコルで、HTTPの上に流れるので利用する敷居が低いのが魅力です。もちろんストリーミングなので途中から再生したり、バッファをためつつ再生もできます。そんなHTTPライブストリーミングは通常の方法ではダウンロードできませんが、HLS Downloader...
mdopen - MarkdownファイルをWebブラウザで閲覧するコマンド
Markdownビューワーは多数あります。自分で編集するながらプレビュー付きのエディタが便利ですが、閲覧するだけの場合は何を使うのが良いでしょうか。閲覧のためだけにエディタを立ち上げるのは面倒です。そこで使ってみたいのがmdopenです。CUIからMarkdownファイルをHTMLへ変換してWebブラウザで表示できます...
layerJS - レイヤーを使ったUIコンポーネントフレームワーク
Webアプリケーション化が進んでいく中で、画面遷移にも気を配る必要があります。従来のように全体を読み込み直すのではなく、アプリのように滑らかな画面遷移が求められます。もちろん、そういった動きの中でも履歴管理はきちんとしていなければなりません。今回紹介するlayerJSは表示部をレイヤーとして構成することで画面遷移やパラ...
LoginCritter - ユーザビリティの高いログインフォーム
ユーザビリティを高める一つの施策として、レスポンスがあります。ユーザは自分が行っているアクションに対して、リアルタイムのレスポンスが欲しいのです。特にデジタルの世界では五感に対する反応が薄いので重要になります。そこで参考にしたいのがLoginCritterです。こんなログインフォームがあったら、ムダに何度もログインして...
MediumEditor - Medium風に文字装飾を行う
Markdownを開発者が使うのは問題ないでしょう。今やほぼすべての開発者に対して普及した記法と言えます。しかし、開発者以外の方が使いこなすには、まだ若干問題がある状態です。そこで使ってみたいのがMediumEditorです。Mediumのエディタを模したツールバーです。## MediumEditorの使い方ツールバー...
pico.js - わずか200行の顔認識プログラム
画像の中から抽出される情報として、最も多いのは人の顔ではないでしょうか。セルフィはもちろん、集合写真であったり、友達や家族と撮影した写真には必ず顔が存在します。顔を見つけることで、様々な情報と結びつけられるでしょう。今回紹介するpico.jsは、Webカメラから取り込んで人の顔を認識するコードをわずか200行で実現して...
editableCell - 表計算のようにセル毎に編集/集計
Webの業務システムなど、データを一覧表示する機会は多いです。そうやって表示されたデータに対する要望として、その場で編集したいというニーズが出てきます。もちろん、そう簡単なものではありません。そこで使ってみたいのがeditableCellです。セルごとの編集に加えて、データの集計も行うライブラリです。## editab...
text2svg - 任意のフォント/テキストをSVG化
コピーされたくない文字があった時、これまでは画像化するのが一般的でした。しかしデバイスの解像度によっては汚く見えてしまったり、変更が面倒と言った欠点があります。そこで使ってみたいのがtext2svgです。任意のフォント、テキストでSVGが生成できます。## text2svgの使い方生成した例です。インスペクタで見ると、...
Read Ruby - レベルに応じて英単語の意味を表示
英語のサイトを見ている時に、分からない単語があると都度調べたりしないでしょうか。その手間が嫌になって読むのを止めてしまうことも少なくありません。かといって、自動翻訳はまだ十分とは言えない品質でしょう。そこで使ってみたいのがRead Rubyです。読み手のレベルに応じて単語の意味をルビとして振ってくれるGoogle Ch...
jKanban - Vanilla JSプラグインのカンバン
カンバンは見た目に分かりやすく、機能が限定的です。そのため、かつてのWikiのようにコンセプトを真似したソフトウェアが作られています。フロントエンドエンジニアであれば、一度は作ってみたいと思ったことがあるのではないでしょうか。今回はVanilla JS
Mouthful - Go製のDisqusクローン
世の中の流れとして静的サイトが好まれるようになっています。運用も簡単ですし、セキュリティ上のリスクもごくわずかです。しかし、そうやって作ったサイトにちょっとした動的機能を追加したくなることがあります。その最たるものがコメント機能でしょう。今回はMouthfulを紹介します。## Mouthfulの使い方実際に使っている...
Fontmin - サブセットフォントを使ってアジア圏のWebFontを使いやすく
Web上での表現力を高める施策としてWebFontが使われる機会が増えています。多くはアイコンフォントであったり、欧米のフォントになるでしょう。日本語や中国語など、アジア圏のフォントは文字数も多く、サイズが大きくなりがちです。そこで使ってみたいのがFontminです。使われていない文字を削ることで軽量なサブセットフォン...
Slate markdown editor - ホットキーが用意されたMarkdownエディタ
Markdownエディタは数多く存在します。多くは二画面形式になっており、左側がエディタ、右側がプレビューになっています。しかし、この場合は編集している内容とその結果の両方を逐次確認しないといけません。Slate markdown editorはそういった手間なく、その場で表示に反映されるので初心者にも分かりやすい仕組...
Mailtrain - node製のMailchimpクローン
お知らせなどをメール配信するサービスとしてMailchimpがよく使われています。しかし、自社データとミックスしたい、一つのサービスにマーケティングの根幹を掴まれるのが怖いなどといった企業もあるでしょう。そこで使ってみたいのがMailtrainです。自前で立てられるニュースレターシステムです。## Mailtrainの...
Isolate - 写真をPinterest風に表示
撮りためた写真を見るのに、一枚一枚見てもいいですが、大量にあると時間がいくらあっても足りません。一覧でざざっと眺めたいと思うこともあるはずです。しかし、せっかくの写真が画一的に整列して表示されるのは何となく味気ないですよね。そこで使ってみたいのがIsolateです。ディレクトリにある写真を読み込んでPiterest風に...
Irvue-Screensaver - Unsplashの綺麗な写真を使ったスクリーンセーバー
仕事をしているとストレスが溜まることもあるでしょう。そんな時にはストレスを解消してくれる存在が必要です。運動や散歩などもいいですし、精神的にリラックスしたいという方もいるでしょう。綺麗な写真が好き、という方であればUnsplashはきっとご存じのはず。そんな方にお勧めなスクリーンセーバーがIrvue-Screensav...
VuePress - Vueを使った静的サイトジェネレータ
静的Webサイトを生成するツールは多数存在します。多くはHTMLを吐き出すので、それをアップロードします。しかし静的ファイルを使うのでは前時代的なWebサイトと何ら変わりません。そこで使ってみたいのがVuePressです。Vueを使って静的サイトを構築するソフトウェアです。## VuePressの使い方サンプルです。!