Maggie - 画像アップロード前のチェックを簡単に実装
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5になって、ファイル選択した際にファイルの内容を取得したり、サイズや画像の種別をチェックしたりできるようになりました。しかしその実装については面倒というイメージがあります。 そこで使ってみたいのがMaggieです。指定された画像ファイルを柔軟に扱えるようになります。 Maggieの使い方 使い方です。getInfoという関数を使います。 getInfo('#my-input', info => { const preview = document.getElementById('img-preview'); preview.src = info.src; }); infoという変数の内容は次のようになっています。 srcをそのまま画像のsrcプロパティに当てはめて使えたり、
Barba.js - ページ遷移をアニメーションで実行 MOONGIFT
Webページは一般的にリンクをクリックするとURLが変わってページ全体が再読み込みされます。ページのローディングも時間がかかりますし、ユーザビリティとしてイケてるとは言いがたいでしょう。 そこで使ってみたいのがBarba.jsです。URLをクリックした時のページ遷移をアニメーションをまじえつつ行ってくれます。 Barba.jsの使い方 デモです。クリックすると写真が拡大されます。これはすべて別なHTMLです。 こちらはスライド的なページ遷移です。スマートフォンアプリの画面遷移に近いかも知れません。 さらにアイコンにしたパターン。ページを遷移する際には一旦ページの一番上にスクロールしてからコンテンツが表示されます。 Barba.jsはSPA（シングルページアプリケーション）を構築する際に使えそうなソフトウェアです。一つのHTMLで管理しているとメンテナンスが大変になりますのでBarba.js
native-css - スタイルシートをReact用オブジェクトに変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Reactではスタイルシートをファイルのまま使うよりも、JavaScriptからスタイル要素に直接指定する方法が好まれます。ただ、その際に問題になるのは通常のスタイルシートと書き方が全く異なるということでしょう。 数年前まではデザイナーとエンジニアの作業分担が言われていたのですが、Reactではうまくいきません。そこで代替手段としてnative-cssを使ってみましょう。 native-cssの使い方 native-cssは以下のようにスタイルシートを指定して実行します。 $ native-css input.css output.js --react 元々のスタイルシートは次のようになっていたとします。 .taxi { background-color: #F8F8F8; col
embed.js - 各種サイトの埋め込み表示をサポート MOONGIFT
今は数多くのサービスが埋め込み表示に対応しています。外部サイトに埋め込んでもらうことで閲覧数を増やしたり、結果としてバイラルしていくきっかけになります。とはいえ、各サイトによって埋め込み方が違うのでいちいち覚えるのが面倒です。 そこで使ってみたいのがembed.jsです。embed.jsを読み込むだけで多くのサイトの埋め込みを自動処理してくれます。 embed.jsの使い方 Markdownコンテンツの埋め込み。HTMLにしてくれますし、絵文字も展開しています。 Instagram。 Flickr。 Googleマップ。 SoundCloud。 ビデオタグ Video.jsのサポート。 Vine。 YouTube。 Twitter。 GitHubのGist。 CodePen。 このようにembed.jsを使えば簡単にコンテンツの埋め込み表示ができるようになります。サイトによっては埋め込むコ
Grav·PHP製、データベース不要なCMS MOONGIFT
CMS（コンテンツマネジメントシステム）というとつい大げさなものを思い浮かべてしまいます。PHPやRuby、Python、Perl、nodeなどのサーバサイドの言語、さらにMySQLやPostgreSQLといったデータベースなどです。環境整備だけで面倒になってしまいます。 そこで紹介したいのがGravです。データベース不要で手軽にセットアップ、利用ができるCMSとなっています。 Gravの使い方 GravはPHP 5.4以上で動作します。データベースは不要なので使えるWebサーバは多いと思います。基本の画面は次のようになります。 ファイル構成は次のようになっています。PHPファイルでMarkdownファイルを読み込んで表示する仕組みになっています。 コンテンツはMarkdownで作成します。 新しいページはファイルを追加するだけです。 フラットなファイル管理なのでGitやDropboxなど
ai2html – IllustratorのAIファイルをHTML化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webサイトのデザインをする際にPhotoshopまたはIllustratorを使う人に分かれるかと思います（Fireworks派もいますが）。どちらのツールを使ったとしても、できあがったデザインに対してHTML化をするのは一苦労します。 そこでベースをプログラマブルに生成してしまうのはいかがでしょう。そのためのツールがai2htmlです。Illustratorファイルを読み込んでHTML化します。 ai2htmlの使い方 ai2htmlはIlustrator CCで使えるスクリプトになります。Windows、Mac OSXのどちらでも動くようです。設置するパスは /Applications/Adobe Illustrator CC 2014/Presets/en_US/Scrip
Loaders.css·スタイルシートだけで作られたローディングアイコン MOONGIFT
WebアプリケーションなどではAjaxを使って通信を行うのが一般的です。そのため、ユーザが処理を待っている間は処理中である旨表示が求められます。そうしないと反応がないと思ってしまって何度もボタンをクリックしたり、ウィンドウを閉じてしまいます。 そこで使ってみたいのがLoaders.cssです。スタイルシートだけで作られたローディングアイコンです。 Loaders.cssの使い方 Loaders.cssでは多数のパターンのローディングアイコンが用意されています。以下はその一覧です。 最後のパックマン風はかなり派手ですね（2つも必要ですし）。その他、好みに応じて選択できるかと思います。スタイルシートであれば色を変えるのも容易でしょう。 使い方としては、 <div class="loader-inner ball-pulse"></div> のようにクラス指定するだけです。 Loaders.cs
Handsontable - WebでExcel並のテーブル機能を実現
Webアプリケーションで必ず要望にあがるのがテーブル表示の表計算ソフトウェア並の機能ではないでしょうか。たとえばヘッダーの固定であったり、ソート、インライン編集といった機能があげられます。 そんな要望の大半をこなせそうなのがHandsontableです。Handsontableを組み込むとグリッドの表示、編集がまさにExcel並になるはずです。 Handsontableの使い方 Handsontableでは表計算ソフトウェアでは実装されているような多数の機能を実現しています。データの保存処理については別途実装がいりますが、表示はHandsontableにお任せです。業務システムのデータ表示に使ってみてはいかがでしょう。 HandsontableはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 Handsontable - jQuery gri
PaperTester·SIer感涙。テスト画面のスクリーンショットをExcelに貼付 MOONGIFT
SIerなどで良く聞かれる話で、テストを行う際には1画面ずつスクリーンショットを撮ることが要求されます。中小企業のシステム開発会社からすると信じがたいのですが、テストを行ったという確認にもなるのであながり無意味ではないのかも知れません（それをダブルチェックしているかは不明ですが）。 そんなSIerの方にぜひ使っていただきたいのがPaperTester、IE×Excel連携のテストツールになります。 PaperTesterの使い方 こちらはテスト仕様書です。動作コマンドとかあるのでかなりプログラム的ではあるのですが。 実行中。ブラウザが立ち上がって文字が入力されます。 そして結果のExcel。スクリーンショットが貼付けられていて作業内容が分かるようになっています！ これはSIerに限ったものではなく、スクリーンショットがあることでエラー部分が分かったり、Excelベースなのでテスト仕様書が書
DarkroomJS – JavaScriptで画像切り抜き
画像加工を行うと言えばローカルで画像編集ソフトウェアを使うのが思い浮かびますが、最近では随分Webベースで行えるようになっています。複雑な加工はまだまだですが、ちょっとした加工であればWeb上で行う方が手軽だったりします。 今回はその一つ、DarkroomJSを紹介します。位置を決めて切り抜きするという加工をシンプルに手早くできるようになります。 DarkroomJSの使い方 DarkroomJSはCanvasタグを使って画像加工を行います。加工後はそのまま切り抜かれた形で保存もできるようになっています。今は写真コンテンツも大きくなっているので、それをユーザサイドで加工してもらうための方法として使ってみるのが良さそうです。 DarkroomJSはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 DarkroomJS MattKetmo/darkroomjs
GitBook Editor·マルチプラットフォームで使えるGitBook専用エディタ MOONGIFT
先日紹介した電子書籍作成環境GitBookですが、基本はコマンドラインを使ってGruntで自動生成するのが基本になります。しかしGUIのエディタを使って作成したいと思う方は大勢いるでしょう。 そんな方に使ってみて欲しいのがGitBook Editorです。GitBookに対応したマルチプラットフォームで動作するエディタです。 GitBook Editorの使い方 メイン画面です。左がMarkdownファイルの一覧で、見出しが並びます。中央がエディタ、右がプレビューになります。 ツールバーを使って自動入力でどんどん書いていけます。 HTMLでプレビューもできます。 メニューを表示したり隠したりできます。 GitBook EditorはGitBookをラッピングしてnode-webkitでGUIアプリケーションにしたものと思われます。GitBook自体がnodeなのでラッピングは難しくなさそう
Pure CSS Components - CSSだけで作られた各種コンポーネント
Webアプリケーションでは表現力をあげるために各種コンポーネントが作られていますが、通常その手のライブラリはJavaScriptとスタイルシートの組み合わせによって実現しています。そうなるとJavaScriptの互換性やそもそも有効にしていない場合に使えません。 そこで考えだされたのがPure CSS Components、スタイルシートだけで作られたコンポーネント集です。 Pure CSS Componentsの使い方 よく使われそうな表示がすべてスタイルシートだけで実現しています。JavaScriptを使った時に比べるとアニメーションが少ないなど若干物足りない部分もありますが、JavaScriptをオフにしても動くのは魅力的です。 何でもJavaScriptではなく、テクニックをこらすことで実現してしまうのがすごいですね。 Pure CSS Componentsはスタイルシート製、MI
Scroll Depth - ページ内スクロールの深さを記録
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました どこまで読まれているかは大事ですね！ Webサイトの人気はPVで見られることが多いです。そのため単純にファーストビューが表示されたかどうかが重要になっており、実際のコンテンツが読まれたかがどうかは軽視されがちです。しかし本来であればそちらのが大事でしょう。 そこで使ってみたいのがScroll Depthです。スクロールを感知してAnalyticsに記録してくれるライブラリです。 Scroll Depthの使い方 jQueryプラグインなので、そのまま実行するだけです。 <script src="jquery.scrolldepth.min.js"></script> <script> $(function() { $.scrollDepth(); }); </script> こうす
Zed - Atom対抗馬なるか。Google Chromeアプリのプログラミングエディタ MOONGIFT
おお、これは格好いい！ GitHubの作ったプログラミングエディタAtomに注目が集まっていますが、それに対抗するかのようなオープンソース・ソフトウェアが登場しました。それがZed、Google Chromeアプリとして動作するプログラミングエディタです。 Zedのインストール ZedはChrome ウェブストアで公開されていますので簡単にインストールできます。 インストールはワンクリックで。 Chromeアプリなのでランチャーに入ります。 Zedの使い方 Zedを立ち上げました。Dropboxまたはローカルのフォルダを指定します。 開きました。基本2ペインですが、さらに分割もできます。 コマンド+EまたはCtrl+Eでフォルダ以下のファイルをインクリメンタル検索します。 Markdownファイルであればプレビューも可能です。 各種プログラミング言語に対応したハイライター。 ノートという機
UIkit - コンポーネントがたくさんある軽量HTML5デザインフレームワーク MOONGIFT
これだけ色々出てくるとどれを使おうか迷ってしまいますね！ UIkitはHTML5向けのフロントエンドフレームワークです。いわゆるBootstrapやFoundationと同じようにWebインタフェースを手軽に作れるようにしてくれるフレームワークです。Bootstrap臭を嫌う方はチェックしてみてはいかがでしょう。 UIkitのスクリーンショット 今回はとにかくスクリーンショット満載です。隅々まで見て、自分のニーズにマッチしているか確認してください。まずは様々な部品を組み合わせたレイアウト例から。 トップページ風デザイン。 画像とテキストの配置。この隙間の空き方がいい感じじゃないかと。 ポートフォリオ風。 マウスオーバーで拡大するための虫眼鏡表示。 モーダルもあります。 ブログ風。 ドキュメント表示。 コンタクトやチームメンバーの表示。このレイアウトいいですね！ フォーム付き。もちろんメンバ
morris.js - SVGで手軽に綺麗なグラフを描くJavaScriptライブラリ MOONGIFT
管理画面などに格好いいグラフがあるとテンションがあがりますよね。とは言えグラフを表示するというのは意外と面倒で、ついつい後回しになってしまいがちです。 そこで手軽に格好いいグラフを描けるライブラリとしてmorris.jsを紹介します。 morris.jsの使い方 morris.jsはまずJavaScript/スタイルシートを読み込みます。 <link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-m
psdiff - GitHub上でPSDファイルの差分表示を可能にするスクリプト MOONGIFT
デザイナーの方は覚えておくと便利そうですよ！ GitHubでは様々なファイルの差分表示が行えます。その一つに画像があります。PNGやJPEGといった画像の差分をWebブラウザ上で行えます。これはデザイナーの方にとってかなり便利な機能ではないでしょうか。 しかしデザイナーであればなんとしても対応して欲しいと思うのがPhotoshopのPSDではないでしょうか。GitHubではPSDをサポートしていませんが、それを可能にするライブラリがpsdiffです。 psdiffのインストール インストールは簡単で、一行のスクリプトで完了します。これは差分チェックを行いたいGitリポジトリ上で行います。 $ bash <(curl -sSL https://raw.github.com/filp/psdiff/master/install.sh) Damn, the 'psd' gem is not in
Boombox.js·HTML5のオーディオ系APIを一つに集約 MOONGIFT
HTML5は多彩な機能をWebにもたらしてくれますが、機能が多彩でブラウザによってサポートされている機能が異なるなどまだまだ課題も多いのが実情です。しかしその課題こそプログラミングによって解決できる余地がある部分でもあります。 今回はオーディオ系APIを一つにまとめて提供してくれるライブラリBoombox.jsを紹介します。 Boombox.jsのデモ 実行中です。 Boombox.jsはHTMLAudio/WebAudio/HTMLVideoの3つのAPIを透過的にサポートするライブラリです。さらにブラウザが非アクティブな時には音を消したり、同時に複数の音を鳴らすのもサポートしています。 ミックスもサポートされています。 単純な再生、停止はもちろんのこと途中から再生したりループ再生、ボリュームの調整もできます。フィルタリングもサポートされています。サポートブラウザとしてはiOS/Andr
jQuery Notebook - 見ているWebページをそのままに編集 MOONGIFT
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました まさにWYSIWYG！ 一般的にCMSを構築した場合、訪問者の見る画面と管理者の画面は分かれています。管理上、その方が分かりやすいのですが、管理者にとっては編集した内容がどのように表示されるかが掴みづらいのが難点です。 そこで最近では訪問者の見たままにWebサイトを編集できるCMSが増えていますが、同じような機能を独自のシステムにも追加できるのがjQuery Notebookです。 jQuery Notebookの使い方 jQueryプラグインだけあって使い方は簡単です。 <div class="my-editor"></div> $(document).ready(function(){ $('.my-editor').notebook(); }); これで完了です。続いてデモを
WOW.js - JavaScript/CSS3でスクロール連動型アニメーション MOONGIFT
最近Webサイトでアニメーションしながら表示される所が増えています。かといってかつてあったFlashのようにスプラッシュ的なものではなく、表示構成要素がさりげなくアニメーションしながら配置されていくといった感じです。 それはCSS3のアニメーションで作られているのですが、スクロールと組み合わせて容易に実現してくれるのがWOW.jsです。 何はともあれ動画を見てもらうのが良いと思います。 犬や猫のアイコンがアニメーションしながら表示されていきます。スクロールの感知はJavaScriptで行っていますが、実際のアニメーションはCSSアニメーションによるものです。 実用的にどうなの、と思ったのですが以下のサイト（利用例）を見るとかなりいけてることが分かります。 さりげないアニメーションで表示されます。 1640 iOS7 Icons for designers & Developers | St
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
