vConsole - モバイルサイト用の開発者ツール
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました スマートフォンサイトをデバッグする際にはどのように操作しているでしょうか。多くの場合、macOSをUSBで接続したり、デスクトップのGoogle Chromeでデバッグするはずです。つまりデスクトップやラップトップが必須です。 vConsoleを使えばモバイルだけでコンソールが使えるようになります。ちょっとしたデバッグなら十分そうです。 vConsoleの使い方 コンソールを開いたところです。エラーも補足されています。 システム情報も取れます。 ネットワークも使えますが、vConsoleが使えるようになって以降の情報のみです。 HTML構造です。 ストレージ情報も確認できます。 vConsoleはWeb用のブラウザに開発者ツール相当の機能を提供します。コンソールでJavaScrip
Jekyll Admin - Jekyll用のWeb管理画面
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 個人的に最近利用が多いJekyll。GitHub Pagesが標準で対応してくれていることもあって、JekyllベースでWebサイトを構築することが多いです。そんなJekyllでちょっと面倒なのが、データ管理がすべてローカルOSのファイル管理頼りなことでしょう（それが良さでもあるのですが）。 そこで使ってみたいのがJekyll Adminです。ちょっとしたデータメンテナンスであればWebブラウザから行えるようになります。 Jekyll Adminの使い方 管理画面です。ページの追加もWebから行えます。 ブログポストの一覧。 ブログ記事を書くのもWebブラウザから行えます。 静的ファイルのアップロードもできます。 データファイルのメンテナンスも可能です。 設定ファイルも修正できます
Files UWP - Explorer代替を目指すファイラー
Windows標準のファイラーであるExplorerは様々な機能が追加され、操作が重たく感じることが多いように思います。しかしダークモードをはじめ欲しい機能もまだまだあります。理想的なファイラーはどこにあるのでしょうか。 なければ自分で作るという道もあります。今回紹介するFiles UWPはExplorer代替を目指すファイラーです。 Files UWPの使い方 メイン画面です。分かりやすい表示です。 コンテクストメニューも多くありません。 タブで複数ウィンドウを管理できます。 Files UWPはシンプルな画面構成で、Explorerと大きく乖離もしていません。これまでExplorerを使ってきた人であればすぐに使えるでしょう。ダークモードが使えるのが個人的にポイント高いです。軽快に動作するファイラーが欲しい方はぜひ使ってみましょう。 Files UWPはC#製のオープンソース・ソフトウ
drawio-desktop - Electron製。draw.io公式のドローツール MOONGIFT
ElectronでWebサイトをラッピングする系統のソフトウェアはとても多いです。限定されたセキュリティ範囲で使えるのは便利ですが、結局のところ単なるガワアプリでしかないという印象があります。 そんな中、drawio-desktopは違います。draw.ioがそのままデスクトップアプリケーションになったようなソフトウェアです。 drawio-desktopの使い方 既存の図を開くのか、新規作成するのか選択します。 新規作成の場合はテンプレートから選択します。 例えばこんな図をベースにできたりします。 パーツは多数提供されています。 パーツ同士を線で結んだりできます。 UML系のパーツもあります。 回転したりするのも簡単です。 drawio-desktopで作られた図はエクスポートしたり、画像タグで埋め込んだりできます。その際にdraw.ioが使われるのかと思いきや、dataURIで出力され
ExcelMerge - Excelファイルの差分ビューワー
Excelを仕事で使っていると、メールでやり取りしたり誤った上書きを避けるためにコピーを作ったりして次第に同じようなExcelファイルに埋もれることになります。二つのExcelファイルを並べて、どこが違うのか見比べた経験は誰しもがあるのではないでしょうか。 そんな方に使ってみて欲しいのがExcelMergeです。Excelファイルの差分チェックツールです。 ExcelMergeの使い方 簡易的なExcelファイルを二つ比べています。 変更されたセル、追加された行などにジャンプできます。 設定で色や動作を変更できます。 ExcelMergeは将来的にマージ機能の実装を目指していますが、現時点では差分表示までとなっています。とは言え、差分が見える形になっているだけで作業負荷は大幅に軽減されるのではないでしょうか。Excelをよく使っている方にお勧めです。 ExcelMergeはWindows用
clipboard.js - Flashなしでも使えるクリップボード操作ライブラリ MOONGIFT
Web画面上に表示されている文字列をコピーするのは意外と面倒ですが、クリップボードの操作ができないために色々な工夫が考えられてきました。Flashを使ったものが多かったのですが、HTML5になってFlashは使われなくなってきています。 そこで代替として使ってみたいのがclipboard.jsです。Flashなしでクリップボードの操作ができるJavaScriptライブラリです。 clipboard.jsの使い方 clipboard.jsのデモです。テキストボックスの文字列をコピーします。 アイコンのクリックでコピーされました。 こちらはカットのデモ。 文字が消えてちゃんとカットされました。 こちらは表示されていない文字列をコピーします。data-clipboard-textでコピーする文字を指定しています。 clipboard.jsのタネは新しく出てきたexecCommandというAPIに
BlockAdBlock - アドブロックが使われているかどうか検知
最近広告ブロックが話題になっています。個人的にはルールが変わったのだとみるべきだと思っており、かつての地図業界におけるGoogleマップ、ガラケーとスマートフォン、雑誌、新聞、テレビ業界などと変わらないと感じてはいます。 とはいえ、配信側のサービスも広告ブロックを甘んじて受け入れる必要もありません。対抗策として考えられるのがBlockAdBlockです。 BlockAdBlockの使い方 BlockAdBlockはAdBlockが入っているかどうかを検知できるライブラリとなっています。AdBlockが有効な状態だと赤くなります。 使っていなければ緑になります。 検出できるブラウザは限定されるようですが、AdBlockが入っていると分かればコンテンツを配信しないといったような手段はとれるかと思います。 BlockAdBlockはJavaScript製のオープンソース・ソフトウェアです。 Bl
Rucksack - スタイルシートの面倒なところを簡単に
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました SassやLESSは一旦覚えてしまえば手軽に使えますが、最初の覚えるまでが面倒というイメージがあるかも知れません。また、デファクトがまだ定まっていない雰囲気もあり、どちらかだけを使っているとプロジェクトによっては別な方を選択する可能性もあります。 そこで試してみたいのがRucksackです。ほぼ素のスタイルシートながら、関数的に特定の書き方を展開してくれるツールです。 Rucksackの使い方 rucksackはいわばスタイルシート用の関数のようなものです。例えば文字サイズをレスポンシブにしたい場合は次のように記述します。 .foo { font-size: responsive; } これは次のように展開されます。 .foo { font-size: calc((12px - 4
setIframeHeight - クロスドメインで動的に高さの変わるiframe設定を実現 MOONGIFT
Webは別ドメインのコンテンツになると途端にできることが制限されます。セキュリティのためには必要なのは分かりますが、そのために回避策があれこれと考えられてしまうのも問題な気はします。 今回はiframeです。別ドメインのiframe内コンテンツはその高さが取得できません。それをsetIframeHeightを使って回避しましょう。 setIframeHeightの使い方 setIframeHeightを使うためにはまずiframe側でスクロール属性をnoにします。 <iframe scrolling="no" src="..."></iframe> そしてJavaScriptを読み込みます。 <script src="dist/set-iframe-height-parent-min.js" async></script> 次にiframeの内側のコンテンツでJavaScriptを読み込み
Kalei - コンパイルレス！JavaScriptで自動生成されるスタイルガイド MOONGIFT
うん、コンパイルレスは確かに手軽ですね。 プログラマーが複数人での開発に際してAPIドキュメントを必要とするのと同様にWebデザイナーであればスタイルガイドが必要になるでしょう。そうしないと意図した使われ方をしなかったり、変更が及ぼす影響範囲が分からなくなります。 CSSのスタイルガイドを生成するソフトウェアは幾つかありますが、通常はスタイルシートを指定してコマンドを実行し、その結果静的なHTMLを出力するものが多かったと思います。それだとWebデザイナーの方にとっては敷居が高くなってしまいます。 そこで使ってみたいのがKalei、クライアントサイドで生成するタイプのスタイルガイドです。インストールは特に不要で、Webサーバ上にKaleiを展開します。 $ git clone git://github.com/kaleistyleguide/kaleistyleguide.git Clon
jQuery Lively Layout - サイト訪問者に強烈なインパクトを残すWebサイトアニメーション MOONGIFT
これはインパクト大！が、多用は禁物なようです。 動きのあるWebサイトは目を引きます。Flashや画像を使ったアニメーションは多いですが、jQuery Lively LayoutはさらにWebサイト自体をアニメーションさせてしまうという凄いソフトウェアです。 何はともあれまずは動画を見てもらうのが良いと思います。 ということで凄さは分かってもらえたと思いますので使い方です。まずJavaScriptファイルを読み込みます。 <script type="text/javascript" src="/path/to/jquery.js"></script> <script type="text/javascript" src="/path/to/jquery.easing.js"></script> <script type="text/javascript" src="/path/to/jqu
formatter.js - ユーザストレスの軽減に。JavaScriptで入力フォーマット制御 MOONGIFT
よくある入力フォーマットに沿っていない時のエラーによるイライラが軽減しそうです。 テキストボックスを使ってユーザに入力を行ってもらうのはシンプルですが、それが指定したフォーマットに沿っているかどうかを判断するのは大変です。その結果エラーになったりするとユーザにとっても大きなストレスになります。 そこで予め決まったフォーマットに沿ってしか入力できないようにしてしまうのが良さそうです。そのためのソフトウェアがformatter.jsです。 使い方はjQueryを使う、使わないの2パターンが用意されているようです。 // jQueryを使わない方法 new Formatter(document.getElementById('credit-input'), { 'pattern': '{{9999}}-{{9999}}-{{9999}}-{{9999}}' }); // jQueryを使う方法
サイドメニューにも対応した多機能マルチデバイスHTML5フレームワーク·Lungo MOONGIFT
Lungoはマルチデバイス対応のHTML5フレームワークです。 スマートフォン向けのサービス提供を考えた場合、Webベースとアプリベースの二つが考えられます。今回はWebでサービス提供しようと考える場合に使えるクロスデバイスフレームワーク、Lungoを紹介します。 デモアプリのUIです。 サイドメニューが出てきます。 タブバーなどのレイアウトデモ。 リスト。 右側に→をつけるのも簡単。 矢印だけでなくラベルをつけることもできます。 左側に画像を表示する形。 カラーリスト。 こちらはカラーラベルを追加したものです。 フォーム。 右側に追加メニュー。 data要素を使った表示。 ローディングもdata-loadingと指定するだけです。 各種アイコン。 水平、垂直の画像スライダー。 通知。 フローティングの確認ダイアログ。 Pull to Refresh。 画像のスライダー。 環境表示。iPh
面白い！自分のサイトに高度な画像編集機能を提供する·jquery.deviantartmuro MOONGIFT
jquery.deviantartmuroはWeb画像編集サービスのdeviantART muroを埋め込みサービスとして呼び出すjQueryプラグインです。 Webブラウザ上でできることは多岐に渡る訳ですが、ペイントですらWebベースで行う時代になっています。その高機能ペイントサービスとして知られるdeviantART muroを自分のWebサイトに埋め込んで使えるのがjquery.deviantartmuroです。 この画像を自由に編集できます。 もはや普通のペイントアプリです。 レイヤーにも対応。 エクスポートできます。 拡大も可能。 囲い込みでの範囲指定も。これがWebアプリケーションとはすごい時代になったものです。 jquery.deviantartmuroはペイントソフトウェアとしての機能を提供する訳ではなく、あくまでもdeviantART muroの機能を埋め込みで提供してい
デスクトップでもタップ、スワイプアクションを·DeepTissue.js MOONGIFT
DeepTissue.jsはスマートフォン/デスクトップ双方でタップ、移動、スワイプのイベントが取れるようになるJavaScriptライブラリです。 スマートフォンではマウスなどのクリックではなく、ディスプレイのタッチによってイベントを実行します。その差異を吸収してくれるjQueryのような存在もありますが、今回は特にイベントに特化したDeepTissue.jsを紹介します。 タップ系。シングルタップ、ダブルタップそしてタップホールドがサポートされています。 移動系。タップしたままオブジェクトを移動させられます。さらに垂直、水平移動が可能です。 スワイプ。動かすとその動いた分のピクセル数が表示されます。 DeepTissue.jsを使うとスマートフォンでよくあるような操作イベントがデスクトップのブラウザでも使えるようになります。透過的に扱えれば、レスポンシブWebデザインを適用している際に
速度やサイズ、形状もカスタマイズ可能なローディングアイコン·jquery.cssloading.js MOONGIFT
jquery.cssloading.jsはCSS3/Canvasを使ってローディングアイコンを生成するライブラリです。 Ajaxなどを使っていると必ず欲しいのがローディングアイコンです。一つであれば画像でもいいかも知れませんが、背景色や大きさなどが複数考えられる場合もあります。そんな時にはjquery.cssloading.jsを使ってみましょう。 サークルを描く一般的なパターン。 背景が黒、左から右に流れていくパターン。 四角もあります。色やスピードはオプションで指定可能です。 縦に落ちていく四角のパターン。 枠を描くパターン。 こちらは複雑で、回転するごとに四角が小さくなっていきます。 アニメーションの形は円、または線、四角が選べます。色やサイズ、回転速度は自由に指定が可能です。CSS3を用いており、Canvasに対応している必要があります。主にiOSやAndroidでの利用が想定され
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
オブジェクトのドラッグ移動を実現するJavaScriptライブラリ·Pep MOONGIFT
Pepはデスクトップ/スマートフォンの両方で動作するドラッグライブラリです。 ゲームなどでWebブラウザ上のオブジェクトをドラッグアンドドロップしたりする操作はよくありますが、その操作をデスクトップとモバイル両方に対応させたのがPepです。 使い方は簡単でDOMに対してpep()を実行するだけ。 ドラッグで移動させられます。 枠の中だけでの移動もその逆もできます。 コールバック対応です。 スライダーを動かすと大きさが変わるデモ。 X軸、Y軸を固定にすることもできます。 こちらはiPhoneで試した所。動きに慣性があるのが特徴です。 Webブラウザ上のオブジェクトを動かすという操作は通常のWebサイトではあまりない動作なので面白いです。またデスクトップとスマートフォン両方に対応しているので使い勝手が良いのではないでしょうか。 PepはJavaScript製、MIT Licenseのオープンソ
他のjQueryライブラリと組み合わせよう。手軽に使える物理エンジン·box2d-jQuery MOONGIFT
box2d-jQueryはbox2dをjQueryに対応させたライブラリです。 最近は素のJavaScriptを書くことが減っているように思います。大抵jQueryを使ってしまいます。既にある他のライブラリもjQueryに対応してくれるとさらに利便性が高くなりそうです。そこで今回はbox2dをjQueryに対応させたbox2d-jQueryを紹介します。 デモ。動画が落下していきます。落下しながらも再生しています。 マウスで飛ばしたりできます。 101個のボールが落ちてくるデモ。 ぼんぼん飛びます。 使い方はシンプルで、重力の影響を与えたいDOMに対してbox2dメソッドを呼び出すだけです。その影響度合いは数値で指定が可能です。既存のコンテンツをいきなりばらばらにしたりもできる面白いライブラリです。 box2d-jQueryはjQuery/JavaScript製、zlib/libpng L
Google Analyticsをパワーアップ！·Google Analytics on Steroids MOONGIFT
Google Analytics on SteroidsはGoogle Analyticsのデータ取得をより詳細に、より多彩にしてくれるライブラリです。 Webサービスを運営する中でユーザがどう行動しているのかを把握するのはとても大事です。Google Analyticsでもある程度取得できますが、より詳細にトラッキングしたいならば使ってみたいのがGoogle Analytics on Steroidsです。 埋め込みのサンプルです。多彩なデータがトラッキングできます。 提供される機能はフォーム入力トラッキング、マックススクロール、外部リンク、ダウンロード、mailto、動画閲覧（vimeo/YouTube）などができます。さらにメタデータの追加、コマーストラッキング、HTMLの要素にトラッキング内容の追加ができます。 Google Analytics on SteroidsはJavaSc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
