SketchCode - オフラインで使えるJSFiddle/CodePen/JSBin代替 MOONGIFT
JSFiddleやCodePenなど、オンライン上でHTML/JavaScript/CSSを書いた結果をすぐに確認できるサービスがあります。非常に便利なサービスなのですが、インターネットに繋がっていないと使えないという欠点があります。 そこで使ってみたいのがSketchCodeです。ローカルで利用でき、さらにGUIアプリケーションというWebコードスニペット実行環境です。 SketchCodeの使い方 メイン画面です。 編集画面です。上からHTML/CSS/JavaScriptとなっています。外部ライブラリを読み込む場合はHTML上に記述する必要があります。 結果は右側のプレビューで確認できます。 保存しておけば幾つも作れます。 SketchCodeはオフラインで使えるので、いつでもどこでも開発できます。ちょっとしたコードを試したり、動作確認ができるでしょう。できあがったコードはオンライン
Lottery - 何が当たるかな。Webベースの抽選マシーン MOONGIFT
みんな大好き抽選会。何かいいものが当たらないかとわくわくしながら待っていることでしょう。主催者側にとっては、そのワクワク感をさらに盛り上げるための工夫が必要になります。 今回はLotteryを紹介します。見た目の演出も楽しい、抽選マシーンです。 Lotteryの使い方 実際に動いているところです。 顔写真のアイコンが並んでいるので、社内であったり、カンファレンスの内容をTwitterでシェアした人限定などとすると面白いかも知れません。自分のところにフォーカスが当たると、もしかしたら選ばれるかもと思ってしまいますね。 LotteryはHTML5/JavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 Lottery meetmore/lottery.js: ? A simple javascript lottery app
p5.js - Processingライクに使えるグラフィックスライブラリ MOONGIFT
Processingといえばグラフィカルなアート作品を生み出す言語として知られています（またはArduinoで使える言語として知っている方も多いでしょう）。しかし専用の言語を覚えないといけないという点において利用を躊躇してしまっている方も多いはずです。 そんな方に使ってみて欲しいのがp5.jsです。グラフィックス、インタラクティブな体験を生み出すJavaScriptライブラリです。 p5.jsの使い方 単純に線が上がってくるだけの例。 上のデモコードは次のようになります。setupとdrawで構成されます。非常に分かりやすいです。 var y = 100; function setup() { createCanvas(720, 400); stroke(255); frameRate(30); } function draw() { background(0); y = y - 1; i
Sirius UI - Bootstrap/Vue.jsを組み合わせたUIデザインテンプレート MOONGIFT
UIライブラリは幾つ知っておいても役立つものです。Webサイトの雰囲気に合わせてピックアップしたり、機能によって差別化もできるでしょう。すべての要件を一つのUIフレームワークで達成できる訳ではありませんので、色々知っておくとぴたりと当てはまる場面があるはずです。 今回はSirius UIというUIフレームワークを紹介します。多数のUIコンポーネントが提供されています。 Sirius UIの使い方 スクリーンショット多めで紹介します。まずはボタン、ラベル、バッジ、フォーム、アラートなど。 ナビゲーション、ドロップダウン、テーブル、ページネーションなどが提供されています。 ログインのモーダル実装例。 タブとイメージ、カルーセル。 トップページ風レイアウト。 機能一覧風。 フッター。 Sirius UIのベースはBootstrapとなっており、さらにFlexboxとVue.jsを組み合わせていま
Propeller - レスポンシブ/マテリアルデザイン対応の管理画面テンプレート MOONGIFT
最近のWebデザインのトレンドはどんどんアプリ風に、複雑になっています。レスポンシブWebデザインによって、画面幅を意識したデザインになり、さらにマテリアルデザインによってユーザのアクションを意識するようになっています。これをすべて実装したサイトのデザインはとても難しいでしょう。 そこで使ってみたいのがPropellerです。管理画面のデザインに特化したレスポンシブ/マテリアルデザインなフレームワークです。 Propellerの使い方 スクリーンショット多めで紹介します。まずはダッシュボード。 リスト。アイコン付きもあります。 タイポグラフィ。 アイコン。 影。 アコーディオン。 アラート。 バッジ。 ボタン。 モーダル。 ドロップダウン。 リスト。 ナビゲーションバー。 ポップオーバー。 プログレスバー。 タブ。 ツールチップ。 カード。 フローティングアクションボタン。 フォーム。 デ
codepan - オフラインでも動作するJSFiddle/CodePenクローン MOONGIFT
JSFiddleやCodePenといったサービスはとても便利です。Web上の基本要素であるHTML/CSS/JavaScriptを書いて、その場ですぐに実行できます。そのまま残しておけるので、動くデモを人に見せるのが簡単です。 しかし問題はオンラインサービスゆえにインターネット接続が必要ということです。そこで使ってみたいのがcodepanです。 codepanの使い方 最初の表示です。HTML/JavaScriptを記述すると結果が表示されます。 npmライブラリを追加できます。 外部ライブラリを使う場合はインターネット接続が必要になってしまいます。 コンソールを表示させることもできます。独自の関数を定義しているので、codepan上に表示されます。 consoleでオブジェクトの構造も確認できます。 React/Angular/Vueのテンプレートを使うこともできます。 codepanは
across-tabs - クロスオリジンをサポートしたタブ間通信ライブラリ MOONGIFT
Webシステムを開発していて、ボタンを押したりリンクをクリックしたらタブが開くようにすることは多々あります。しかし無尽蔵に開いてしまうとメモリを食いますし、ユーザに嫌がられます。 そこで使ってみたいのがacross-tabsです。タブ同士の通信を可能にするライブラリです。 across-tabsの使い方 新しいタブを開いたところです。タブ情報が取得できています。 複数開けばその分リストが更新されます。 デモです。タブを開いた後、ボタン一つで閉じられます。 across-tabsではクロスオリジンでタブ同士の通信が行えます。一つのタブに対して指令を出すことも、すべてのタブに対してまとめてメッセージを投げることもできます。使い道が色々ありそうです。 across-tabsはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 Live Demo -
BigPicture - YouTubeやVimeoにも対応した画像/動画表示ライブラリ MOONGIFT
画像や動画は見せ方が大事です。単にリンクを貼って、クリックしたら画像だけが表示される…なんてのはよくありません。最近は画像の解像度が上がっているので、サムネイルと実際の写真とをうまく見せる必要があります。 今回紹介するBigPictureはWebベースの画像、動画表示ライブラリになります。 BigPictureの使い方 デモです。クリックでモーダル表示になります。 動画でも使えます。HTML5動画、YouTubeやVimeoにも対応しています。 サムネイルと実体の大きさが異なる場合。 画像がない場合にも対応してます。 動画は各動画共有サイトによるようです。 BigPictureを使えばYouTubeなどを単に埋め込むのではなく、サムネイル表示にしてクリックしてはじめて再生するようにしたり、サムネイル画像を並べて表示できるようになります。この手のライブラリは他にもありますが、動画にも対応して
Propeller - Bootstrapベースのマテリアルデザインテンプレート
ちょっとしたWebサイトであればBootstrapをベースにすればデザインを一から作る必要がなくなっています。プロトタイプはもちろんのこと、数多あるBootstrap用テーマを使えば、十分高品質なWebサイトが作れるでしょう。 今回はそんなBootstrapのテーマを紹介します。マテリアルデザインになっているPropellerです。 Propellerの使い方 スクリーンショットを多めに紹介します。まずはタイポグラフィ。 アイコン。 影。 アコーディオン。 アラート。 バッジ。 ボタン。 モーダル。 ボタン付きのモーダル。 ドロップダウン。 フォーム。 リスト。 さらにカスタマイズしたリスト。 ナビゲーションバー。 ポップオーバー。 プログレスバー。 サイドバー。 タブ。 テーブル。 カード。 Propellerはマテリアルデザインになっていますので単純なデザインだけでなく、クリックやマウ
notella - Firebaseを使ったメモアプリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ノートアプリの類は多数に存在しますが、それでもなお新しいものが登場するのは理由があります。自分の手に馴染むものは既存のものに存在しないからです。特に開発者であれば、自分で作ってしまえるので、既存のものに感じるちょっとした違和感が嫌なのかも知れません。 今回紹介するオープンソース・ソフトウェアはnotella、Webベースのノートアプリです。 notellaの使い方 メイン画面です。すっきりしたデザインです。 メモを書くと、左側の一覧が更新されます。 テーマを変更しました。 notellaの特徴としてはクリーンなデザイン、プログレッシブWebアプリ、複数デバイス間での同期、オフライン、ホーム画面に追加を挙げています。データはFirebaseに保存しており、デスクトップやスマートフォン
swip - 体験必須！複数デバイスを簡単に連携 MOONGIFT
Googleが作成した、複数のウィンドウを連携させるChromeの実験的デモを見たことがあるでしょうか。複数のウィンドウ間でメッセージを飛ばすことでデータの位置やステータスを同期させていると思われます。 そんなデモを複数のスマートフォン、タブレットでできてしまうのがswipです。 swipの使い方 swipを使っているところです。 手前のブラウザから飛んでいったボールが別なデバイスに移っているのが分かるでしょうか。 swipではブラウザの画面同士を指でくっつけるような動作をします。それによってウィンドウの場所がつながります。さらにデバイスのインチ数を入力することで影響を受ける範囲が決定します。これは体験として非常に面白いのでぜひお試しください。 swipはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 paulsonnentag/swip:
Barba.js - ページ遷移をアニメーションで実行 MOONGIFT
Webページは一般的にリンクをクリックするとURLが変わってページ全体が再読み込みされます。ページのローディングも時間がかかりますし、ユーザビリティとしてイケてるとは言いがたいでしょう。 そこで使ってみたいのがBarba.jsです。URLをクリックした時のページ遷移をアニメーションをまじえつつ行ってくれます。 Barba.jsの使い方 デモです。クリックすると写真が拡大されます。これはすべて別なHTMLです。 こちらはスライド的なページ遷移です。スマートフォンアプリの画面遷移に近いかも知れません。 さらにアイコンにしたパターン。ページを遷移する際には一旦ページの一番上にスクロールしてからコンテンツが表示されます。 Barba.jsはSPA（シングルページアプリケーション）を構築する際に使えそうなソフトウェアです。一つのHTMLで管理しているとメンテナンスが大変になりますのでBarba.js
ZangoDB - IndexedDBをMongoDB風に操作
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5ではKVSとして IndexedDBという機能が提供されています。localStorageなどよりも多くの情報を保存したり、検索したりすることもできるので便利に使えます。しかし使い方を覚えるのが若干面倒です。 そこで使ってみたいのがZangoDBです。IndexedDBをMongoDB風のAPIで操作できるようになります。 ZangoDBの使い方 ZangoDBのサンプルコードです。 let db = new zango.Db('mydb', { people: ['age'] }); let people = db.collection('people'); let docs = [ { name: 'Frank', age: 20 }, { name: 'Thomas
Presentation Annotator - スライドのメモ、注釈を記述 MOONGIFT
プレゼンテーションのスライドは作って終わりではなく発表が大事です。何を話せば良いか忘れないように各スライドにノートを記述しておく人は多いです。筆者もいつもそうしています。Keynoteなどはそのための機能を備えていますが、単なるPDFファイルではメモ書きする場所がありません。 そんなスライドに対する指摘やメモ書きを実現できるのがPresentation Annotatorです。 Presentation Annotatorの使い方 Presentation Annotatorの画面です。スライドが表示されつつ、右側にテキストエリアがあります。 メモを書くと、それがJSONになってとれるようになります。 Presentation Annotatorではサーバに残しておくような仕組みはありませんが、その仕組みを作ってしまえば誰かの注釈を表示できるようになります。サムネイルもあるので、次のスライ
DPlayer - ニコニコ動画風弾幕動画プレーヤー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ニコニコ動画で一気に広まったのが動画の上にコメントを載せて表示するシステムです。コメントが多すぎると肝心の動画が見えなくなりますが、盛り上がっている中に自分もいるという動画を見るだけでない楽しみ方も生まれています。 そんなコメントシステム（弾幕コメント）をHTML5の動画プレイヤーとして再現するのがDPlayerになります。 DPlayerの使い方 コメントが増えるとこんな感じになります。動画の内容はもはやよく分かりません。 実際に流れている様子。まさにニコニコ動画のコメントのようです。 コメント入力欄です。 DPlayerを使えばHTML5のビデオタグを使ってニコニコ動画風にコメントが載せられるようになります。名前の通り、大量のコメントがあっても表示できます。動画サイトで使ってみ
City Generator - Web上に動かせる3D地図を表示
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JAXAが公開している細かいメッシュでの地球上の高度データを使ってどんなことができるのか。主な目的は災害対策であったり、都市計画を立てる際の基礎データになるのですが、そういった目的で使う人は限られた業界の人たちになるでしょう。 もっと面白い使い方が考えられれば、地図データの活用幅も広がります。今回はその一つ、City Generatorを紹介します。 City Generatorの使い方 表示例です。東京駅周辺の3D地図です。 ライトの位置が変わると影が濃くなったりします。 お台場。海に埋もれてますね。 東京ドーム周辺。マウスでぐりぐり動かせます。 City GeneratorではJAXAのデータを使って3Dモデルとして都市を描いています。データは実際のものなので、再現される都市も
Keen-UI - マテリアルデザインのUIコンポーネント集
デザインは徐々にシンプルな方向に進んでいます。フラットであったり、マテリアルデザインなどがそうです。しかしシンプルであるが故に空間の取り方であったり、マテリアルデザインならではのアニメーションなど実装が難しい部分も増えています。 今回はそんなマテリアルデザインに合わせた各種UIコンポーネントを提供しているKeen-UIを紹介します。 Keen-UIの使い方 スクリーンショットを多めに紹介します。まずはアラート。 入力補完。 アイコン付きの入力補完。 ボタン。 チェックボックス。 折りたたみ。 確認ダイアログ。 フローティングのボタン。 アイコンボタン。 アイコン。 メニュー。 モーダル。 ポップオーバー。 ローディング。 ラジオボタン。 ラジオグループ。 レーティング。 Keen-UIはUIコンポーネントなので、他のデザインフレームワークと組み合わせて使うのが基本になります。デザインに統一
Slate - カスタマイズできるWeb用のリッチテキストエディタ MOONGIFT
HTMLのテキストエリアのUIが貧弱なのは有名な話で、文字入力が多いサービスにおいて素のテキストエディタをそのまま提供することはなくなっています。かといってかつてのWYSIWYGエディタのように機能がてんこ盛りなのも見かけません。 もっとスマートに、もっと使いやすい形で入力してもらうべきです。今回はWeb上にリッチなエディタ機能を提供するSlateを紹介します。 Slateの使い方 Slateの画面です。ツールバーは必要最低限に提供されています。 Markdownがサポート可能で、記法をリアルタイムに変換します。 ポップオーバーによるコンテンツの装飾機能。 リンクはダイアログで入力できます。 画像の差し込み。 コードのハイライトも。 Slateはフレームワークであり、カスタマイズしやすい形になっています。自分のサイトに必要な機能だけをピックアップして実装するのが良いでしょう。なお、執筆時点
mobile-videoplayer - iOSでも自動再生できる動画プレイヤー
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました スマートフォン（特にiOS）は動画を自動再生してくれないという問題があります。また、動画再生時はフルスクリーンになってしまったり、JavaScriptから操作できないといった問題もあります。 それらを解決してくれるかも知れないのがmobile-videoplayerです。音は出ないですが、上記問題は解決できます。 mobile-videoplayerの使い方 動画の読み込み中…。この辺りでネタバレしているかも？ 再生開始しました。スムーズです。 さらに面白いのはスクロールして動画が表示されている時だけ再生してくれる機能です。 見えなくなると再生が停止します。 実際に試しているところです。停止しているのが分かるでしょうか。 種明かしをすると、これは実際には動画ではなくJPEGをつなぎ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
json.browse - 開発者ツールを使ったJSONブラウザ MOONGIFT