Fluidity – たった115 bytesでHTMLのレスポンシブ対応率を高める
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました レスポンシブWebデザインを考え始めるとメディアクエリーや細かな表示の制御など考えるべきところがたくさんあって、厄介な印象が強くなる訳ですが、もっとシンプルに考えて良いんじゃないと訴えかけてくるのがFluidityになります。 HTMLは元々素の状態でも“ほぼ”100%レスポンシブであると言います。そしてそのほぼから外れた部分を補正してくれるのがFluidityになります。しかもたった115 bytesで。 Fluidityのスクリーンショット Fluidityの使い方 使い方は簡単でスタイルシートを読み込めば良いだけです。 <link rel="stylesheet" href="css/fluidity.min.css"> 115 bytesな訳で特別なことはしていないのですが
AdminLTE·ここまで多ければ何でもできそう。多機能なBootstrapベースの管理画面テンプレート MOONGIFT
これで十分でしょ！ Bootstrapで作る管理画面は相当増えてきているようです。確かに一般ユーザ向けに提供するとBootstrap臭が出てしまいますが、管理画面であれば問題はないですよね。 ということで今回は新しいBootstrap製の管理画面テンプレートAdminLTEを紹介します。高度なウィジェットが数多く提供されていますので使い勝手良さそうですよ。 AdminLTEの画面 今回もスクリーンショット多めで紹介します。 ダッシュボード。この時点でかなりリッチ。 ボックス。これだけ多彩なパターンがあると言うのも凄いですね。 左端にはちょっとした設定を表示させています。 背景色を変えるだけでも随分印象が違います。 グラフ。 こちらもグラフ。 外部ライブラリもそつなく使いこなしています。 スパークラインも！ アラート。ちょっと飛び出しているのがいい感じです。 アイコン。 ボタン。フラット系で
kindle-highlights - Kindleで付けたハイライト部分をスクレイピングを使って取得 MOONGIFT
Kindle使いには朗報なアプリケーションですよ。 電子書籍を読むのに最適なリーダーの一つがKindleではないかと思います。その中で提供される機能の一つがテキストを選択して保存するハイライトです。Kindleの中で確認はできますが、再利用性が低いのが難点です。そこで自分のハイライトしたデータをダウンロードできるのがkindle-highlightsです。 現在は残念ながらAPIは公開されていないとのことで、kindle-highlightsはスクレイピングによって目的を達成します。 インストールはRubygemsで簡単にできます。 $ gem install kindle-highlights 使い方もシンプルで、AmazonのID、パスワードを使って実行します。 require 'kindle_highlights' # pass in your Amazon credentials.
Bootstrapベースの管理画面用テンプレート·Charisma MOONGIFT
CharismaはHTML5/JavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 Webシステム開発において意外と不遇なのが管理画面です。内部の人が使うものなので適当に作られるケースが多くなります。そこで使ってみたいのがCharismaです。リッチな管理画面をBoostrapをベースに作り上げる事ができます。 ウィジェットがついた、リッチな管理画面です。ここまで恵まれているケースは早々ないでしょう。 ドラッグ&ドロップによる配置変更もサポート。 折り畳んで隠す事もできます。 グリッドは細かくサポートされています。 カレンダー。システム内部のデータをマッピングすると見通しが良くなりそうです。 メンバー一覧。検索やラベルもあって便利そうです。 ギャラリー。サムネイル写真をきれいに並べています。 タイポグラフィ。様々なタグをサポートしているので奇麗
JavaScriptとObjective-Cを連携させるハイブリッドアプリ解発に·HybridKit-JS MOONGIFT
HybridKit-JSはObjective-C/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 最近のスマートフォンアプリ開発では必要に応じてJavaScriptとネイティブを組み合わハイブリッドアプリが増えています。そこで紹介したいのがHybridKit-JSです。 デモアプリです。この画面はHTMLで出来ています。 HybridKit.runCommandで予め登録されているコマンドを実行します。 アラートを表示するデモです。 Open URLを使ってMobile Safariを使ったURLを開く操作もサポート。 set_titleを使うとタイトルバーのラベルを変更できます。 背景色を変更する機能もあります。 HTMLはこのようになっています。 HybridKit-JSではJavaScriptからネイティブの機能を呼び出す形で連携できるようになっ
高度なファイルアップロード機能を提供·Fine Uploader MOONGIFT
Fine UploaderはJavaScript製、GPL v3のオープンソース・ソフトウェアです。 HTML5になってファイルのアップロード処理は大幅に改善されました。特にドラッグ&ドロップによるファイルアップロードは便利です。そんな機能をさらに便利にしてくれるライブラリがFine Uploaderです。 デモです。ファイルの選択またはドラッグ&ドロップでリストに追加できます。追加後、即アップデートが開始されます。 デザインの拡張性は高いです。 エラーのキャッチもできます。 拡張子によるテストにも対応しています。 画像のサムネイルビューもあります。 アップロード上限の制限に対応しています。 Fine Uploaderを使えばファイルアップロードにおける大抵のニーズには対応できるのではないでしょうか。JavaScriptで細かくカスタマイズしたり、コールバックを使って独自の仕組みを組み込む
BootsrapをGoogle+風に·Bootplus MOONGIFT
BootplusはHTML5/JavaScript/CSS製のオープンソース・ソフトウェア（Apache License 2.0）です。 最近のWebデザインはフラットなスタイルが人気です。そのデザインはGoogleのサービスでも広く取り入れられています。そんなUIを自分のWebサービスでも実現したい、そう考える人に使ってみて欲しいのがBootplusです。 Bootstrapがベースになっていますが、デザインは白色系をベースにしたフラットになっています。 かなり思い切って色をカットしています。 こちらは黒地部分が大きく目立ちます。 メニューなどのウィジェットはもちろんBootstrapをベースにして構築されています。 カード形式のウィジェット。 プロフィールなどの表示に便利そうな表示です。 何となくGoogle+っぽい感じです。 ベースはBootstrapなので多彩なウィジェットやコンポ
データの追記読み込みに対応するテーブル·StreamTable.js MOONGIFT
StreamTable.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 業務システムなどではデータの表示の際にテーブル組で表示する事が多々あります。そのような時に一気に表示しようとするとレンダリングに時間がかかります。そこで使ってみたいのがデータを取得しながら表示を行っていくStreamTable.jsです。 テーブルは既に表示されていますが、データは徐々に取得されていきます。例えばこの場合は20%までデータを取っています。 ページネーションもどんどん増えていきます。 検索ボックスを使って予めフィルタリングする事もできます。マッチするデータだけが追加されていきます。 仕組みとしてはAjaxでデータを取得しています。 StreamTable.jsではデータのストリームベースでの取得に加えて、検索によるデータ絞り込みとページネーションに対応しています
iOSの開発効率化に。高機能デバッガー·SuperDB MOONGIFT
SuperDBはiOS/Mac OSX用のオープンソース・ソフトウェア（BSD License）です。 iOSのデバッグや、ちょっとした調整をしてはコンパイルし直して確認する…といった開発で苦労した覚えはないでしょうか。そこで今回はiOSアプリのインタラクティブなデバッガーSuperDBを紹介します。 Mac OSXアプリをコンパイルすると、iOSシミュレータで立ち上がっているアプリ名が表示されます。ダブルクリックして接続します。 そうするとコンソールが開くので、例えばselfと打ちます。 こちらはiOSアプリの画面です。 角に丸みをつけました。これはコンソールから実行するのみで、iOSアプリは立ち上げたままになっています。 この44という部分が丸み指定場所で、マウスでドラッグして数値を変更できるのがユニークです。 SuperDBはiOSアプリの操作をF-Scriptのようなシンタックスで
面白い！自分のサイトに高度な画像編集機能を提供する·jquery.deviantartmuro MOONGIFT
jquery.deviantartmuroはWeb画像編集サービスのdeviantART muroを埋め込みサービスとして呼び出すjQueryプラグインです。 Webブラウザ上でできることは多岐に渡る訳ですが、ペイントですらWebベースで行う時代になっています。その高機能ペイントサービスとして知られるdeviantART muroを自分のWebサイトに埋め込んで使えるのがjquery.deviantartmuroです。 この画像を自由に編集できます。 もはや普通のペイントアプリです。 レイヤーにも対応。 エクスポートできます。 拡大も可能。 囲い込みでの範囲指定も。これがWebアプリケーションとはすごい時代になったものです。 jquery.deviantartmuroはペイントソフトウェアとしての機能を提供する訳ではなく、あくまでもdeviantART muroの機能を埋め込みで提供してい
複数台のmemcachedを運用しているなら·memcache-top MOONGIFT
memcache-topはPerl製のmemcachedインスタンスのステータス可視化ソフトウェアです。 Webサイトの高速化においてmemcahedは外せない選択肢になります。複数のmemcahedインスタンスを立ち上げている規模になったら使ってみたいのがmemcache-topです。 実行中です。一つしかないとちょっと微妙ですが…。 memcache-topはPerlスクリプトであり、ダウンロードしたらすぐに実行するだけで使えます。利用量、ヒット率、コネクション、読み込み、書き込みなどのステータスが一目で分かるようになっています。キーの一覧などは分からず、インスタンスごとのサマリーが分かる形になります。 memcache-topはPerl製のオープンソース・ソフトウェア（New BSD License）になります。 MOONGIFTはこう見る Webアクセスを高速化する最も簡単な方法は
Google ChromeでJavaScriptのデバッグをする際にはぜひインストールを！·JS Runtime Inspector MOONGIFT
JS Runtime InspectorはGoogle ChromeのJavaScriptデバッグを強力にサポートしてくれるソフトウェアです。 最近はJavaScriptを徹底的に活用したWebアプリケーションも増えてきました。そんな中デバッグは非常に困難になってきています。そこで使ってみたいのがJS Runtime Inspectorです。 インスペクタにJS検索フィールドが追加されます。 検索結果です。 そこから定義されている場所に簡単に飛べます。 利用例。 JS Runtime Inspectorを使えばJavaScriptを掘り下げて調べるのがとても簡単になります。関数名の他、値でも検索できるので目的の処理を見つけるのが簡単になるはずです。 JS Runtime InspectorはGoogle Chrome用、MIT Licenseのオープンソース・ソフトウェアです。 MOONG
二つのJSONの異なる部分をハイライト·JsonDiffPatch MOONGIFT
JsonDiffPatchはJSONフォーマットを比較し、パッチファイル形式の差分を表示するソフトウェアです。 Web APIなどでJSONフォーマットを扱うことが増えています。そこで今回は二つのJSONデータの差分を抽出するライブラリJsonDiffPatchを紹介します。 左と右を比較してその差分をパッチとして表示しています。 Diffも表示できます。 JsonDiffPatchはデータの差分を細かくチェックしてパッチデータとして表示できます。さらにビジュアル処理で色分けも可能です。構造のチェックも可能で、データの入力、更新チェックにも使えるのではないでしょうか。Webブラウザ、node.js双方で動作します。 JsonDiffPatchはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る データの差分を表示する技術というのは
自炊した電子書籍を読むのに使えるWebベースのZipリーダー·Mark It Now! MOONGIFT
Mark It Now!はiPadやデスクトップブラウザで使えるWebベースのZipリーダーです。電子書籍を管理、閲覧するソフトウェアです。 Mark It Now!はWebブラウザ上で動作するZipリーダーです。Zipで作成された電子書籍をWebブラウザで読み進めるのを目的としています。 最初にログインをします。 本当はここで書籍の一覧が出るはず…。でも登録方法などが分からず挫折しました。 デモ動画です。きちんとセットアップするとこうなります。 Mark It Now!はスワイプ操作でページ切り替えができたり、しおり情報もオンラインで管理されるのでマルチデバイスで共有されます。容量の少ないスマートフォンなどでも書籍データ全てを持ち歩かなくても良いので手軽に読めるようになるでしょう。 Mark It Now!はRuby/Ruby on Rails製、GNU Affero General P
サイドバイサイド/インライン表示に対応したJavaScriptテキスト差分表示ライブラリ·jsdifflib MOONGIFT
jsdifflibはJavaScript製のテキスト差分表示ライブラリです。 テキストを扱うWebアプリケーションで便利そうなライブラリがjsdifflibです。JavaScriptを使って二つのテキストの差分を表示してくれます。 デモです。二つのテキストエリアにテキストを入力しました。 Diffボタンを押すと差分が表示されます。サイドバイサイドのビューです。 行の内容が違う場合は表示色が異なります。 インラインで差分表示もできます。 jsdifflibはPython製のdifflibと互換性のあるライブラリとのことで、差分解析をサーバサイドで行って結果を描画することもできます。表示色などはCSSで自由に編集可能です。 jsdifflibはJavaScript製、BSD Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る Webサービスの基本はテキストコンテンツ
無茶しやがる…JavaScriptだけでZipファイルを生成、ダウンロード·JSZip MOONGIFT
JSZipはWebブラウザ上、クライアントサイドだけでJavaScriptを使ってZipファイルを生成するソフトウェアです。 JavaScriptでできることがどんどん増えています。そんな中、注目したいのがJSZipです。なんとJavaScriptだけでZipファイルを作ってしまうというとんでもないソフトウェアです。 デモページです。コードを見て分かる通り、テキストファイルと画像をZip圧縮しています。 実際ダウンロードされたZipファイルを解凍すると確かにフォルダやファイルが入っています。テキストの内容を変えればダウンロードされたファイルの中身も変わっていました。 JSZipが面白いのは動的にZipファイルを作成できることではないでしょうか。ユーザにコンテンツをダウンロードさせたいという時にその場の内容をそのまま圧縮して送れるようになります。アイディア次第で色々な使い方ができそうなソフト
これは便利！Mac OSX/Linuxで動くIE7〜9のVirtualBox用仮想イメージを作成·ievms MOONGIFT
ievmsはMicrosoftが提供するIE動作検証用Virutal PC向け仮想イメージをVirutalBox向けに変換するソフトウェアです。 IEで見たWebサイトの確認をしたいと思ったらWindows機が必要です。さらにIE7/8/9と各バージョンを用意しなければなりません。そんなのは面倒だ！というMac OSX/Linuxユーザの方は今すぐievmsを実行しましょう。ievmsはIE7〜9のVirtualBox用の仮想イメージを作成してくれるソフトウェアです。 インストール中です。数GB以上あるものばかりでかなりの時間を要します。 とりあえずIE7とIE8の仮想イメージができあがりました。VirtualBoxで確認できます。早速起動してみます。 Windows7が使われています。なお最初の起動時にライセンスが切れていましたがオンライン認証で通りました。 アクティベート後、再起動すれ
Mac OSXのFinder風に動くドリルダウン式選択コンポーネント·jcvl MOONGIFT
ドロップダウンリストでカテゴリとサブカテゴリが連動したりする表示はよくあります。しかしあまり使いやすいとは言えません。そこでjcvlを使ってみましょう。ドリルダウン式、さらに複数選択もできる使いやすそうなコンポーネントです。 デモです。カラムは左からドリルダウンしていきます。選択すると、その結果が下にタグ上になって表示されます。 中央のカラムの選択を変更すれば、その右側のリストが変化します。 一段階のドリルダウンをした場合の表示です。この場合は三段目のカラムは表示されていません。子要素がない場合は「●」が表示されません。 コードです。リストを組み合わせたシンプルな作りになっています。 jcvlはリストを使うだけでドリルダウン式の（Mac OSXのFinder風の）UIを実現できる点にあります。Ajaxでコンテンツを取得しないので表示も高速です。カテゴリやタグなどの記入補助に使えそうです。
複数アカウントを切り替えるときに便利なGoogle Chrome機能拡張·Chrome Cookie Switcher MOONGIFT
Chrome Cookie SwitcherはGoogle ChromeでCookie内容を切り替えるGoogle Chrome機能拡張です。 Googleの各種サービスではアカウントスイッチ機能が提供されています。これで複数のアカウントを切り替えつつサービスが使えるようになっています。そんなアカウントスイッチを任意のWebサイトで実現するのがChrome Cookie Switcherです。 インストールするとアドレスバーの端にアイコンが出るようになります。 まず現状のプロファイルを作成します。このとき、Cookieデータがプロファイルに入ります。 後は別なアカウントでログインしたときに別なプロファイルを作成します。これで準備は完了です。 プロファイルをロードした後、再読み込みするとCookie情報が上書きされます。Chrome Cookie SwitcherはWebサイト単位に設定でき
使われているコードのチェックもできる！Google製のJavaScriptカバレッジツール·ScriptCover MOONGIFT
ScriptCoverはGoogle製のJavaScriptカバレッジテストツールです。任意のWebサイトに対してテストできます。 Googleが開発したJavaScriptのカバレッジツールがScriptCoverです。Google Chrome機能拡張としてインストールすることで任意のWebサイトにおけるJavaScriptカバレッジ率が分かります。 インストールしたところです。パッケージは提供されていないようなので自分でコンパイルしてインストールする必要があります。 任意のWebページを見るとこうやってカバレッジ率が出ます。 クリックすると分析開始です。しばらく待ちます。 完了しました。JavaScriptなので実行状況によってカバレッジ率も変化するようです。 さらに詳細なスクリプト単位でのカバレッジ率も見られます。 See full coverage reportをクリックするとス
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
