プレミアムユーザー限定記事
MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから。
- 2017/12/14
- できることを全力でやる
- 2017/11/25
- 恥ずかしさを感じないためにできること
- 2017/11/11
- プロジェクトを遅延させないコミュニケーションパス管理
Image Map Resize - イメージマップをレスポンシブに
地図や写真などで一部をクリッカブルにする際に、昔はイメージマップを使うのが一般的でした。今はJavaScriptやCanvas、SVGで処理するかも知れませんが、イメージマップもWeb標準として利用できる機能です。ただし昔の機能なので、座標の設定などで制約が多い機能でもあります。そんなイメージマップをレスポンシブにして...
Tabulator - これはすごい。HTMLテーブルを高機能に
テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くの...
NES.css - ファミコン風サイトになるCSS
コンピュータはどんどん進化しており、より繊細なグラフィックス、リアルに近づく3D、臨場感あふれるサウンドといった具合に私たちを引きつけ続けています。そんな中、初代ファミコンもまた人気を持ち続けています。8bitでレトロ、とても今のコンピュータとは比較にならない代物であるにも関わらず、今なお多くの人たちを魅了しています。...
nginxconfig.io - Web上でnginxの設定を作成
nginxをHTTPサーバに採用しているケースは増えていると思います。しかし機能も多数ある中で、ちゃんと全体を把握した上で設定できているでしょうか。バージョンアップなどに伴って、これまでなかった機能が追加されている可能性もあります。設定の取りこぼしもあるかも知れません。そんな悩めるサーバ管理者に送りたいのがnginxc...
Go wasm - Goで作ったWebAssembly版JavaScript実行環境
WebAssemblyを使うことでWebアプリケーションを高速に実行できるようになります。RustはDOMやネットワークを扱うのが困難ですが、Go1.11以降では対応しています。これによってWebAssemblyを使ったWebアプリケーションの可能性が大きく飛躍しました。そんなGoでJavaScriptを実行できる環境...
de - Go製のプログラミングエディタ
プログラミングエディタは開発者にとっての仕事道具と言えます。それだけにこだわりをもって選定しなければなりません。秀丸でもAtomでもVS Code、Vim、Emacsなどどんなエディタであっても手に馴染んで開発生産性があがるものを選ばなければいけません。今回紹介するdeは新しく登場したエディタで、Goで作られています。...
夜空ノ贈リ物 - CSS3を駆使して作られたアニメーション教本
CSS3が計算処理やアニメーション処理をサポートしたことによって、CSS3を駆使した作品が増えています。こんなことまでCSSでできるのかと驚かされるものも多いです。そんな作品を作ってみたいと思う方もいるのではないでしょうか。そんな方にぜひチェックして欲しいのが夜空ノ贈リ物です。CSS3を駆使して作られた作品であり、CS...
js-green-licenses - JavaScriptプロジェクトのライセンスをチェック
オープンソースの基本であり、肝なのがライセンスです。さらにライブラリを使っていたりすると、そのライセンスも関わってきます。ライセンスの誤った利用はビジネス上のリスクになり得ますが、それでもオープンソースを一切用いないという選択は困難になってきています。もしNode.jsをプロジェクトに採用しているならば使ってみたいのが...
Magic-Grid - ウィンドウ幅に応じてグリッドを自在に並び替え
Webページをレスポンシブに対応させようと思うとグリッドベースのデザインを採用することが多いでしょう。デバイスの幅に応じて並べるグリッドの数を増減させることで表示をカスタマイズできます。多くのUIフレームワークがグリッドに沿ったUIを提供しています。今回紹介するMagic-Gridはグリッドだけを提供するライブラリです...
エディ太郎 - 下書き専用エディタ
SlackやGitHubのIssueに投稿する際に、長文はあらかじめ別なテキストファイルに書いたりしないでしょうか。いきなり本番のサービス上で書くのは躊躇してしまうので、一旦下書きに書くという人は多いはずです。確かに下書きであれば間違って公開されることもありません。そこで使ってみたいのがエディ太郎です。下書き専用のエデ...
Current Device - デバイス判定をスタイルシートに反映
Webページにアクセスするデバイスが多様化している中、JavaScriptで各デバイスを判別して表示分けしているWebサイトも多いのではないでしょうか。こういった実装を都度行うのはとても面倒ですし、条件分岐も増えがちです。そこで使いたいのがCurrent Deviceです。デバイスに応じてスタイルシートにクラスを追加し...
WatchingU - インターネットオタクのためのRSSリーダー
オンライン上の情報を効率よく集めるのにRSS（フィード）リーダーは最適です。しかしビジネス的には難しいようで、多くの会社がフィードリーダーから撤退しています（それこそGoogleリーダーさえも）。そんな中生き残るのはむしろオープンソースなのかも知れません。今回紹介するWatchingUはWebベースのRSSリーダーで、...
Ervy - CUIで棒/円/折れ線/ゲージグラフを表示
コンソール用のアプリケーションが増えています。UIをあまり作り込まずに済み、さらに結果の出力も簡単にできます。その反面、グラフのような可視化は苦手です。テキストで出力して、別なライブラリで可視化するのではないでしょうか。そこで使ってみたいのがErvyです。ターミナル上で簡易的な可視化を実現できます。## Ervyの使い...
spacetime - JavaScriptの高機能時間ライブラリ
JavaScriptで悩ましいのが時間の扱いではないでしょうか。Webブラウザごとによって異なるタイムゾーン、年月日を表示するのにもばらばらのメソッドを実行するなど面倒な操作が多いと感じます。そこで使ってみたいのがspacetimeです。JavaScriptにおける日時関連の処理を手軽にしてくれるライブラリです。## ...
tiptap - Vue.js向けのリッチなWYSIWYGエディタ
WYSIWYGなエディタは開発者ではない人たちにコンテンツを作ってもらいたい時に活躍します。HTMLを手書きするのは困難ですし、編集している内容と結果が異なるので、結果を想像しながら作るのは慣れない人にとっては難しいでしょう。もしVue.jsを使っているならば導入したいWYSIWYGエディタがtiptapになります。多...
backer - コンテナのバックアップ/リストア
開発や運用時にコンテナを利用するのも当たり前になってきています。そんな中、誤ってコンテナを削除してしまったり、ストレージの障害でデータをロストするような問題も出てきます。そんな時には何はともあれバックアップが大事です。今回紹介するbackerはコンテナ専用のバックアップソフトウェアになります。利用用途は限られそうですが...
SQLPad - クエリを保存、可視化するSQL実行環境
社内でエンジニア以外の人たち（特にマーケター）にSQLを覚えてもらうと業務効率が良くなるという話をよく聞きます。データを様々な角度から取り出したいと思う人たちは自分でやってもらう方が早いのです。そんなSQLを実行したり、保存できるのがSQLPadです。re:dash
model-viewer - Webコンポーネントの3D/ARビューワー
HTML5の機能が追加されている中で、Web上でできることが増えています。その一つとして注目したいのがWebVRであったり、AR技術です。これまでは専用のソフトウェアがなければ実現できなかったことがWeb標準の技術で実現できます。そんなAR/VRを簡単に表示、操作できるライブラリがmodel-viewerです。## m...
virtual-scroller - 長大なリストもサポートするスクロールライブラリ
Webページは縦に長く伸びがちです。特にリスト状に情報を載せる際にデータ量をシステムからの出力で動的に変化させている場合、間違って数十万件のデータを一気に表示しようとしてDOMレンダリングが終わらなくなったりします。そういった時に使ってみたいのがvirtual-scrollerです。縦横を含めたスクロールをスムーズにし...
slack-filesave - Slackにアップロードしたファイルを一括ダウンロード
Slackをビジネス、プライベート双方で使っている人は多いでしょう。単なるテキストのやりとりだけでなく、写真をはじめとして様々なデータをアップロードしているはずです。それらは残り続けますが、ふと思い立った時に探すのは大変です。そこで使ってみたいのがslack-filesaveです。Slack上にアップロードされたファイ...