Dawn - フロントエンド/node開発のビルドツール MOONGIFT
フロントエンド開発はどんどん進化しています。その結果として様々なツールを組み合わせなければならなくなったり、手順が増えてしまっています。これでは手軽に開発できなくなってしまいます。 そこで紹介したいのがDawnです。軽量なタスク管理を備えたフロントエンドの開発、ビルドツールです。 Dawnの使い方 使っている場面です。こちらはAPIサーバのフロントです。 こちらはフロントエンドです。二つのサーバが同時に立ち上がっています。 APIを作ったりすることもできます。 技術的にはWebPackなども使われており、独自技術で固まっている訳ではありません。しかしDawnを使うことで初期テンプレート生成やテスト、ビルドなどが一手にできます。複数タスクを同時に実行したり、ミドルウェアにも対応しており、幅広い開発に利用できそうです。 Dawnはnode/JavaScript製のオープンソース・ソフトウェア（
smoothState.js - 滑らかな画面遷移を提供 MOONGIFT
スマートフォン向けのWebサイトなどでは画面遷移が大事です。普通のURLを遷移するような動きではUXがよくありません。新しいコンテンツがスライドしてきたり、前の画面と滑らかに入れ替わることでユーザの意識を切らさずに操作を継続できるようになります。 そうした動きをサポートしてくれるライブラリがsmoothState.jsです。履歴管理も行ってくれるライブラリです。 smoothState.jsの使い方 デモです。クリック時にコンテンツがスムーズに表示されます。 アニメーションのされ方も複数あります。 メニューで使うパターンです。 smoothState.jsを使うと画面遷移はもちろん、履歴管理も行ってくれます。スマートフォンはもちろんデスクトップブラウザでも利用できるでしょう。多くのフレームワークでは同様の機能がありますが、大げさになってしまいます。遷移機能だけ欲しい時に良さそうです。 sm
Chrome Calendar Groups - Googleカレンダーをグルーピングして簡単に切り替え MOONGIFT
Googleカレンダーを使っている方は多いでしょう。基本のカレンダーは一つですが、プライベートとビジネスで使い分けたり、さらに共有で他の人やプロジェクトごとにカレンダーを分けたりします。そうしているとカレンダーが予定だらけになってしまい、必要に応じて表示/非表示を使い分けるようになります。 そうなったら入れておきたいのがChrome Calendar Groupsです。カレンダーをグルーピングしてくれるChrome機能拡張です。 Chrome Calendar Groupsの使い方 まず最初にグループを作ります。 こんな感じでカレンダーを指定していきます。 後はグループを選択するだけでカレンダーの選択状態が変わります。 Chrome Calendar GroupsはちゃんとGoogleカレンダーのOAuthを取得して処理されます（JavaScriptで手軽に処理する訳ではないようです）。G
tScroll - 多彩なテキストアニメーションライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 単なるテキストだと見過ごされてしまうかも知れません。そこで必要になるのが目立たせるための工夫です。文字の色を変えたり、フォントを変えたりすることもできますが、ちょっと安っぽくなってしまうこともあります。 そこで使ってみたいのがtScrollです。文字をアニメーションさせることで印象づけるテクニックが使えます。 tScrollの使い方 デモです。アニメーションGIFではちょっと分かりづらいですが、手前から降ってくるような感じです。 下から出てくるアニメーション。 右からスライド。 こちらも下から。 回転しながら。 横回転。 手前に迫ってくる感じ。 tScrollでは様々なアニメーションがあらかじめ登録されているので、それらを指定するだけでインパクトある表示が実現します。JavaScr
Mocka - モックアップの作成に使えそうなplaceholder
Webサイトのデザインを行う際などにとりあえずアテの画像が必要になることは多々あります。画像だけでなくテキストも必要でしょう。そうした時、あまり適当な文字だと実感がわきませんし、かといって作り込みすぎるのもよくありません。 そこで使ってみたいのがMockaです。Mockaはシンプルで格好良いplaceholderを提供します。 Mockaの使い方 実際に使う時のHTMLです。 <div class="mocka-container"> <span class="mocka-media"></span> <span class="mocka-heading"></span> <span class="mocka-text"></span> </div> こうすると表示が次のようになります。 四角いグレーの枠ですが、なんとなくそれっぽく表示されているのが分かります。画像部分はアニメーションしな
PathFinding.js - 様々なアルゴリズムで最適な経路を探索 MOONGIFT
ある点からある点までの最短距離を調べるアルゴリズムがあります。簡単なものであれば人間の目で見た方が早いですが、込み入った図になると最短距離を見つけるのも容易ではありません。 そこで使ってみたいのがPathFinding.jsです。最短経路の調査を様々なアルゴリズムを用いて検証できます。 PathFinding.jsの使い方 緑のドットから赤のドットへ移動する経路を発見します。 この場合は直線で簡単です。 壁を作っても最終的にはゴールに到着します。 別なアルゴリズムでは探索方法が全く異なります。 ちょっと壁を増やすと最適な経路も変わってきます。 一例です。 こちらは別なアルゴリズム。時間が大幅にかかっています。 こちらは早いです。 アルゴリズムによって最短経路を見つけるまでの時間が大幅に変わってきます。もちろん障害物の置き方によっても変わってくるでしょう。アルゴリズムの違いによる探索方法がビ
svgbob - アスキーアートをSVGに変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました READMEなどテキストファイルには罫線を駆使したアスキーアートが載ることが多々あります。一度だけであれば良いのですが、メンテナンスもしづらいですし、見やすいものではありません。 しかし技術者としてはドローソフトウェアでいちいち描いたりするのも面倒です。そこで使ってみたいのがsvgbobです。 svgbobの使い方 一例です。左側のテキストがSVGに変換されています。 工夫すれば日本語も使えます。 こんな複雑なイラストも。 ____[] | ___ | || || device ||___|| loads | ooo |----------------------------------------------------------. | ooo | | | | | ooo |
Shop.js - Eコマース用のUIコンポーネント MOONGIFT
Webデザインフレームワークは多数ありますが、多機能なものほど縛りが強く、自分の思うようにデザインできないことがあります。そんな中、最近ではWeb Componentという概念によって、一つのコンポーネント単位でのUIも出てきています。 今回紹介するShop.jsはECサイトで使われる要素を小さなUIコンポーネントとしてまとめたライブラリになります。 Shop.jsの使い方 cartというタグがこのように表示されます。 洋服の数量を変えれば金額もアップデートされます。 checkoutタグで決済UIが出ます。 横から出てくるタイプのカート。 モーダル型の決済UI。 Shop.jsを使うことで商品一覧やカート、決済機能だけを手軽に組み込めるようになります。大量の商品がある中では利用が難しそうですが、数点の商品だけを厳選して扱うショップであれば良さそうです。 Shop.jsはHTML5/Jav
YouPHPTube - PHP製のYouTubeクローン
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました YouTubeを使えば動画の配信がとても簡単にできる一方、動画は自分たちのコントロール下で配信したいと考える企業も多くあります。ネットワークリソースなどが潤沢であれば、もちろんそういった選択肢もありでしょう。 そんな時に使えるのがYouPHPTubeです。PHPで作られたYouTubeクローンになります。 YouPHPTubeの使い方 動画閲覧画面です。広告にも対応しています。 動画の下にはシェアやコメント機能があります。 管理画面ももちろんあります。こちらはユーザ一覧。 動画の管理もできます。 Webサイトの設定画面です。 動画配信を不特定多数のユーザに開放すると様々な問題が起こりそうですが（著作権や帯域など）、自分たちだけが動画を登録するのであれば問題ないでしょう。動画配信にも
FireEdit - Firebaseを使ったリアルタイム同期エディタ
リアルタイムに同期してくれるエディタは意外と便利です。会社で議事録を取っている場合、ペアプログラミング、ちょっとしたメモであっても同じディスプレイを見ずに共有できていると情報伝達が素早くなります。 今回はFirebaseを用いることでサーバレスでリアルタイム同期できるエディタ環境を提供するFireEditを紹介します。 FireEditの使い方 エディタ画面です。カラーテーマの変更もできます。 日本語を入力しても問題なく同期されます。 Firebaseはデータのリアルタイム同期が売りのサービスなので、この手の利用には向いています。ただしFireEditではデータが一つしかないので全員で共有になります。複数メモに対応するようなカスタマイズは必要かも知れません。 FireEditはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 Fireedit
Aerial - Apple TVの空撮スクリーンセーバをWindowsにも
普段スクリーンセーバは使わない人であっても、美しい映像であれば流してみたいと思うのではないでしょうか。特に最近の大型のディスプレイであれば迫力もあり、ただ流しておくだけでも気分が良くなります。その一つとしてApple TVの空撮スクリーンセーバがあります。 今回紹介するAerialはそんなApple TVのスクリーンセーバをWindowsに移植したソフトウェアになります。 Aerialの使い方 Aerialの例です。実行する度に内容が変わります。とても美しい映像です。 映像はゆっくりと動いています。 別な映像。 普段の殺伐とした開発作業を一旦止めて、Aerialの映像を眺めているだけで癒やされるのではないでしょうか。macOS向けの移植版もありますが、オフィスではまだまだWindowsが圧倒的なシェアになります。Aerialをインストールしてしばし映像に浸ってみると良いでしょう。 Aeri
maildown - Markdownを日本企業で使えるメール文面に変換 MOONGIFT
Markdownが便利な記法であってもすべてに使える訳ではありません。まだまだ個人間でやり取りされるメールはテキストが一般的で、HTMLメールが使われることはほぼありません。となるとMarkdownの出番がありません。 そこで作られたのがmaildownです。Markdownで書かれた文章を日本企業で使われるメール風の体裁にしてくれます。 maildownの使い方 左側が元文章、右側が変換された内容です。 リストなどに特徴があります。 maildownではリストの他、罫線を使ったテーブル表示、見出しの処理、80文字で改行などと細かな部分を日本企業風に仕立ててくれます。また、下には変換された部分やタイポなどの指摘がされるようになっています。日本風と言わずともメール用のMarkdownコンバータとして便利なソフトウェアです。 maildownはnode/JavaScript製のオープンソース・
Bemuse - ハマらないよう注意。Webベースの音ゲー MOONGIFT
音ゲーは根強い人気のあるゲームジャンルです。やり方も手を使ったりバチを使う、足で行うなど様々な種類があります。手で行うものであればパソコンで再現されたソフトウェアも数多く存在します。好きな方はハマってしまうことでしょう。 そんな音ゲーをWebブラウザベースで楽しめるのがBemuseです。HTML5で作られているので幅広いブラウザで遊べます。 Bemuseの使い方 ゲーム開始前です。 最初はチュートリアルも含みつつ進みます。 え、何これ難しい…。 圧倒的に無理でした…。 Bemuseはキーボード（SDFJKLとスペースキー）を使って操作します。チュートリアルレベルであってもかなり難しいと感じられるはずです。キータイピングの練習にはならないと思われますが、それでも速い指裁きが求められるのは確かでしょう。 技術的にはReact/Reduxを使っています。そういった点でも興味深いソフトウェアです。
besticon - Faviconを取得、フォーマット変換 MOONGIFT
Webサイトで使われているFavionは昔からあまり変わっていません。icoという拡張子のファイルが使われ、サイズもごくごく小さいものでした。スマートフォンが増えてきてようやくPNGや独自の大きなサイズの画像が求められるようになりました。 そんなFaviconを生成、取得するのに便利なのがbesticonです。 besticonの使い方 besticonではURLを指定するだけでFavicon画像を取得してくれます。 画像フォーマットはICO、PNG、GIFが指定できます。 画像のサイズも調整できます。 besticonを使えば幾つか存在するFaviconを作成できます。対応しているのはfavicon.icoまたはapple-touch-icon.pngです。自分たちのものではないサービスのFaviconを取得したり、扱いやすいPNG画像に変換したりもできます。Faviconを取得する際に
csv2md - CSVファイルをMarkdownのテーブル化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownは見た目と結果が同じように書けるので文書を書くのが簡単です。しかし一つ面倒な記法があります。それはテーブルです（デフォルトの記法にはありませんが）。罫線を使って作るのは意外と面倒です。 そこで使ってみたいのがcsv2mdです。CSVファイルをそのままMarkdownのテーブル記法に展開してくれます。 csv2mdの使い方 例えば以下のようなCSVがあったとします。 $ cat foo.csv Name,Title,Email Address Jane Atler,CEO,jane@acme.com John Doherty,CTO,john@acme.com csv2mdコマンドを実行すると綺麗に整形されたMarkdownのテーブル記法になります。 $ csv2md
Vertical Timeline - 縦型年表を作成するjQueryプラグイン
情報を時系列に沿って表現する際には年表表示が便利です。教科書などでは横型の年表が使われますが、Webにおいては横スクロールは一般的ではないため、縦型のスクロールをしながら表示されることが多くなっています。 そんな縦型年表を容易に作成できるのがVertical Timelineになります。 Vertical Timelineの使い方 デフォルトの表示です。 日付を表示するデモ。 開始を右側からに。 左寄せ。吹き出しなし。 レスポンシブデザインも対応しています。 Vertical Timelineを使えばサービスの遍歴など、過去の歴史を振り返るような表示が簡単に作れるようになります。普段から使うようなデザインではないので、メモリアル的な部分に用いると良さそうです。 Vertical TimelineはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）で
Code Snipper - コード（スニペット）を画像化 MOONGIFT
GitHub Gistのようにオンラインでコードを書いておけるサービスはあります。しかし、埋め込みコードが自分のサイトでは使えないというケースは多々あります。JavaScriptタグを危険なものとして全般的に不可としてしまっているケースです。 そこで使ってみたいのがCode Snipperです。コードを画像にしてくれるソフトウェアです。 Code Snipperの使い方 サンプルです。 日本語も使えます。 Code Snipperは画像化したいコードをHTML上に表示し、それをWebブラウザのスクリーンショットツールで撮影するという方法をとっています。そのため日本語も使えますし、フォントや文字サイズを細かく指定したりすることもできます。テーマも変更可能です。画像ならば問題なくブログなどで使えるでしょう。 Code Snipperはnode/JavaScript製のオープンソース・ソフトウェ
Let it snow - CSSでWebサイトに雪を降らせよう
Webサイトに雪を降らせるような効果をみせるライブラリは幾つか存在します。多くはJavaScriptを使ってごりごりと実装するのですが、あまりスマートなやり方とは言えません。 今回紹介するのはLet it snow、スタイルシートを活用した降雪効果を見せるライブラリです。 Let it snowの使い方 デモのWebサイトです。 しばらく経ったところ。DOMの上に雪が積もっているのが分かるでしょうか。 アニメーションです。ちょっとずつ積もっているのが分かります。 Let it snowをずっと放置し続けてもどんどん積もるわけではありません。雪は消えたりしています。また、ピュアなCSSアプローチとありますが、一部でJavaScriptも使われているようです。 Let it snowはCSS3製のオープンソース・ソフトウェア（MIT License）です。 Let it snow trevan
per-word-action - 単語や行ごとにデザインを変える
最近のWebサイトは多数のデバイス、多数の幅に合わせたレスポンシブデザインが求められてます。しかし幅が変わるとデザイナーの意図した描画にできない場合もあります。特にテキスト量に依存した処理は行数が変わると面倒です。 一例として使えるのがper-word-actionです。行ごとにデザインを変えることができるライブラリです。 per-word-actionの使い方 デモです。幅を変えて文字の配置が変わると、それに合わせて文字の色が変わっています。 per-word-actionは行または単語単位で処理をできるようにするライブラリです。すべての単語はpwa-wordというクラスが追加され、各行ごとにpwa-line要素に行数が入ります。後はCSSなどでデザインすれば良いでしょう。 per-word-actionはjQuery/JavaScript製のオープンソース・ソフトウェア（ISC Lic
OpenLara - トゥームレイダー風のゲームエンジン
トゥームレイダーと言えば映画化もされたくらい人気のゲームです。3Dポリゴンがまだまだ粗い時代からあり、ゲームをやらない人でもその名前くらいは知っているのではないでしょうか。 そんなトゥームレイダーをWebベースで再現したのがOpenLaraになります。ララはトゥームレイダーの主人公の名前になります。 OpenLaraの使い方 こちらがメイン画面です。3Dが意外と綺麗です。 武器を構えたり撃ったりすることもできます。 武器は数種類装備しています。 オオカミはショットガンで。 意外と強いのがコウモリ。群れで襲ってきます。 やられてしまいました…。 OpenLaraはクラシックなトゥームレイダーエンジンとあるので、OpenLaraをベースに自分なりのトゥームレイダーが作れるということでしょう。道を変えたり、アイテムを変えたりするのは楽しそうです。しかもWebで動くのが良いですね。 OpenLar
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
