bento-starter - PWAを学ぶ、実装するのに参考にしたいスターターキット MOONGIFT
PWA（Progressive Web Apps）というキーワードに注目が集まっていますが、実際のところ何からはじめれば良いのか分からない人は多いのではないでしょうか。PWAは固有の技術を指し示すものではないので、特に分かりづらいでしょう。 そこで参考にしたいのがbento-starterです。PWAとは何か、を学ぶのにぴったりなスターターキットです。 bento-starterの使い方 こちらがそのテンプレートです。 マニフェストファイル、Service Workerもちゃんとインストールされます。 Lighthouseを使った評価はほぼパーフェクトです。 PWAの要素となるCACHE APIの利用はもちろん、アプリマニフェストやアクセシビリティもきちんと提供されています。このbento-starterをベースにしたり、ここから学べることは多数あるでしょう。Service Workerの
mo · js - Web上でモーションアニメーションを実現 MOONGIFT
Webの表現力は上がったと言われていますが、そのためのテクニックは必要です。SVGやCanvasを使いこなすのは相当難しく、専用のライブラリを使う方が手軽にアニメーションなどが実現できます。 今回紹介するmo · jsもその一つで、モーションアニメーションが実装できるライブラリです。 mo · jsの使い方 実装例です。かなり派手なアニメーションです。 クリックイベントと合わせた場合。メニューなどに使えそうです。 イラストとの連携もできます。 横から登場。 こちらもクリックイベントです。 Twitterのスターボタン風アニメーション。 mo · jsを使えば何も大きなアニメーションだけでなく、ユーザイベントをきっかけにしたアニメーションが実現できます。UXを高めるための施策に使えそうです。ちょっとしたアニメーションはユーザの目を引いたり、大事なポイントを気付かせるのに便利でしょう。 mo
Textures.js - SVGをパターンで塗りつぶし MOONGIFT
SVGはWeb上でベクターグラフィックを表現するのに適した手法です。Flashのように外部プラグインはいらないですし、拡大/縮小しても綺麗なのでどんなデバイスの画面サイズにも対応できます。 そんなSVGの表現力をあげるのに適したライブラリがTextures.jsです。多数のパターンを使って塗りつぶし処理を行います。 Textures.jsの使い方 デモです。線は素のSVG（d3.js）で描いて、その内容をTextures.jsで描いています。 ライン系。 色の変更もできます。 線を細くしたり、間隔を調整するのも簡単にできます。 サークル、ドット系。 こういう特定のパスを描くことも、自分でカスタマイズすることもできます。 SVGで描いているとついベタ塗りになってしまいがちですが、さらにその描画内容をパターンで描けるようになるとカラーだけでなく、グレースケールで表現した際にも分かりやすくなりそ
Diversity - Bootstrapで作られたシングルページアプリケーションテンプレート MOONGIFT
SPA（シングルページアプリケーション）が流行っています。通常のWebサイトと異なり、ランディングページやプロジェクトのトップページで使われることが多く、様々な情報を見やすく並べて表示する必要があります。 Diversityはそんなシングルページアプリケーションに最適なテンプレートです。しかもBootstrapベースとあってカスタマイズも容易そうです。 Diversityの使い方 こちらはデモページ。 大きな画像を使ったカルーセル。 こういう機能を並べて紹介するのもよくありますよね。 制作例を紹介したりするのに使えそうです。 背景に写真を使ってプロダクトを紹介。 こちらもカルーセル。 プランごとの機能と価格紹介。 プロジェクトメンバーの紹介。 フッター。 DiversityはまさによくあるシングルページアプリケーションをBootstrapで表現しています。ヘッダーの各メニューをクリックする
Windows8アプリを開発する際に使える？BootstrapをWindows8 Style UIに·metro-bootstrap MOONGIFT
metro-bootstrapはBoostrapをWindows8 Style UIに変更するデザインテーマです。 正直言ってWindows8はインストール以来全然使っていない筆者ですが、Windows8 Style UI（旧Metro UI）は好きです。あのすっきりとしたデザインはタブレットやWebでこそ活きるのではないかと思っています。そこで紹介したいのがmetro-bootstrapです。 タイポグラフィ。 引用やリストの表示。 コード表示もできます。 全体的に白く、塗りつぶしたようなデザインです。 各種テーブルの表示。 ボタンがWindows 8 Style UIです。 こちらはコンポーネント。 ドロップダウン系が薄いデザインになっています。 タブも何となくのっぺりした感じに。 ナビゲーションバー。すっきりとしたデザインで個人的には好きです。 パン屑リスト。 ラベル。 アラート系。
オフラインになったら操作を防ぎ通知を出すJavaScriptライブラリ·Heyoffline.js MOONGIFT
Heyoffline.jsはネットワークのオンライン/オフラインをキャッチしてアクションを実行できるJavaScriptライブラリです。 Webアプリケーションの弱点はネットワークが閉ざされると使えなくなることです。そこで致命的なエラーになる前にネットワーク状態を感知して処理できるようにしましょう。そのために使えるのがHeyoffline.jsです。 オンラインです。 オフラインにすると指定したアクションを実行できます。 Heyoffline.jsでは入力系フィールドを指定して編集無効にしたりできます。またモーダルウィンドウを表示して現在オフラインである旨も通知できます。これにより不要なアクションを防げるでしょう。 Heyoffline.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る 光ファイバーやADSLの普及によって
懐かしさの中にも鋭さを感じる柔らかい日本語フォント·やさしさゴシック MOONGIFT
やさしさゴシックはIPAゴシックやM+フォントをベースに見やすく優しい雰囲気で作られた日本語フォントです。 日本語でフリーに使えるフォントというのはごく僅かですが、それだけに貴重です。やさしさゴシックは見やすい、やさしさに溢れたゴシックフォントになります。 インストールします。見やすくて雰囲気のいいフォントです。 例。平仮名、漢字、数字など用意されています。 太さのはっきりした見やすいフォントです。 やさしさゴシックは水平な線がベースで、僅かに角丸になっています。漢字、アルファベット、記号などをM+フォント、足りない漢字はIPAゴシックから補っているとのことです。縦書きにも対応しています。現時点ではレギュラーのみですが、ボールドも作成中とのことで、できた際の連絡が欲しい方はメールマガジンに登録してほしいとのことです。 やさしさゴシックはTrueTypeフォント（おまけでMacスーツケース、
多彩な表現をご覧あれ。JavaScriptによるデータビジュアル化ライブラリ·JavaScript InfoVis Toolkit（JIT） MOONGIFT
JITはJavaScriptを使ったデータビジュアル化ライブラリです。 JavaScriptを使ってWeb上でデータを多彩にビジュアル化するライブラリがJavaScript InfoVis Toolkit（JIT）です。その多彩な表現をご覧ください。 積み上げのエリアグラフです。表示の際にはアニメーションが実行されます。 実際のコードです。 棒の積み上げグラフです。 横向き、2Dのグラフです。 関連グラフです。マウスで動かせます。 マウスオーバーで説明が表示されます。 こんなグラフもあります。 星形。格好いいです。 カスタマイズにも多様に対応しています。 容量の表示などによく利用されるツリーマップです。 こちらもパターンが色々用意されています。 グラフを組み合わせたパターンです。 こんな表現も可能です。 派生していくアニメーションが格好いいです。 円グラフです。アニメーションやマウス操作に
試そう！WindowsやLinuxで使える高度なプログラミングエディタ·medit MOONGIFT
meditはWindowsやLinuxで使えるプログラミングエディタです。様々な言語に対応していますが特にPython、C、Luaに精通しています。 meditはWindowsやLinux向けの高度なプログラミングエディタです。多彩な機能があり、プログラミングはもちろん普段のテキストエディタとしても十分利用できます。 多様なファイルのハイライト表示に対応しています。プラグインにも対応しており、Python/Lua/C向けのプラグインがデフォルトで入っています。 Pythonであれば、meditからコンソールを立ち上げたり、その場でファイルを実行する機能もあります。 縦にファイルを分割して編集できます。これは同じファイルを分割表示する形で、別なファイルを表示する訳ではないようです。 同様に横に分割することもできます。縦に二回分けることはできず、最大縦横一回の4分割画面までとなります。 ブック
JavaScriptによる開発が大規模化したらドキュメントを生成「Dox」 | MOONGIFT | オープンソース・ソフトウェア紹介を中心としたITエンジニア/Webデザイナー向けブログ
DoxはJSDocに対応したソースファイルからドキュメントを生成するライブラリ。 DoxはJavaScript/node.js製のオープンソース・ソフトウェア。JavaScriptがWebアプリケーション構築の際のメイン言語として使われるようになっている。その結果起こっているのがJavaScriptのコードの大規模化だ。 トップページ 大規模になれば当然、複数人での開発体制になる。そうなれば情報の共有やコーディングスタイルの統一などが必須になる。その一端を担うのがAPIドキュメントだ。ソースコードからドキュメントを生成するソフトウェアがDoxだ。 DoxはJSDocもサポートしたソフトウェアで、コンソールからコマンドを実行するだけでHTMLベースのドキュメントを生成する。ドキュメントにはMarkdownの記法が利用できる。システムとしてはnode.jsを使っており、npmを使ってインストー
Canvasを活用するJavaScriptライブラリ·LibCanvas MOONGIFT
LibCanvasはJavaScript製のオープンソース・ソフトウェア。JavaScriptは速度、機能ともに進化している。メールやカレンダーのようなオンラインとの親和性の高いものはもちろん、画像編集をはじめ様々なアプリケーションがWeb化している。 ソリティアデモ 今後スマートフォンなどでHTML5が積極的に取り入れられてくれば、JavaScriptの利用機会はさらに増えるはずだ。そんな時には一からJavaScriptを組むのではなく、多様なライブラリを使うことになるだろう。そこで覚えておきたいのがLibCanvasだ。 LibCanvasはCanvasタグを使うことで表現力を向上するJavaScriptライブラリだ。MooToolsをベースに開発されている。デモの中には物理エンジンのように多数のオブジェクトが関連して動作するものや、カードゲームのデモもある。 アステロイドのデモ ソリ
JavaScriptの3Dエンジン·Three.js MOONGIFT
Three.jsはJavaScriptのオープンソース・ソフトウェア。Webブラウザが高機能化していく中で競われているのがJavaScriptエンジンの性能だ。実行速度が向上することによって、Webアプリケーションなどの利用が促進される。HTMLレンダリング性能と合わせて重要な指針だ。 マウスの動きを追従する エンジンが高機能化すれば実現できる幅が広がる。その一つが3Dレンダリングだ。JavaScriptで3Dオブジェクトが表現できるようになれば、ゲームはもちろん様々な分野で活用できるだろう。そのレンダリングエンジンとしてThree.jsを紹介しよう。 Three.jsは3Dオブジェクトをレンダリングするライブラリで、先日話題になったGoogleマップを使ったマッシュアップ「The Wilderness Downtown」もこのThree.jsを使って作られた一つだ。さらにマウスで反応する
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
