Webにおける日本語はちょっとした工夫が読みやすくなります。例えば日本語と英単語の間には半角スペースを空けた方が良いでしょう。また、全角括弧を使うと間が空きすぎてあまり良くないのですが、半角では詰まりすぎるといった具合です。 そうした日本語の文章におけるちょっとした問題を解決してくれるのがMojikです。和文の文字組を上手にコントロールしてくれます。 Mojikの使い方 適用前と適用後の文章です。括弧が連続した時に隙間を狭めています。 別な例。英数字の前にスペースが空いているのが分かるでしょうか。 小さな隙間を使うことで可読性がぐっと向上します。書籍や雑誌では文字組は微妙に調整しますが、Webの場合はデフォルトのまま使われがちです。Mojikを使えば改善できるでしょう。 MojikはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 Mojik terke

Mac OSXやiOSで使えるAirDropは便利で、近くにいる人（デバイス）と簡単にファイルを送りあうことができます。AndroidやWindowsなど、他のデバイスでも同じことがしたいと思うケースは多々あります。 擬似的に似たようなことができるアプリもあるのですが、Snapdropはなんとアプリのインストール不要で使えます。 Snapdropの使い方 Snapdropのサイトを表示したところです。 iOS側でも開いていると、こんな感じで相手が表示されます。 ファイルをドラッグ&ドロップすれば相手にダウンロード表示が出ます。 ファイルを受け取れば開いたり、保存できます。 blobで渡されています。 逆にiOSから送ることもできます。 ファイルが渡せました。 さらにテキストも送れます。 iOS側で受け取ったところです。 Snapdropを使えばWebブラウザを通じて各デバイスとのデータ送受

JavaScriptは徐々に進化していますが、それでもRubyやPythonに比べると冗長的で書きづらいと感じる人も多いのではないでしょうか。しかしReactが面白いので嫌々ながらもJavaScriptを使っている、なんて方もいるはずです。 そんな方に試して欲しいのがimbaです。RubyとReactを使いこなす方向けに生まれた新しいプログラミング言語です。 imbaの使い方 imbaのコード例です。タスク管理になります。 実際に試したり、コードの変更もできます。 こんな感じのコードで時計が表現できたります。時差をCSS3の回転で表現しているのが面白いです。 JavaScriptに変換して実行されます。実際のコードはこんな感じで、可読性も悪くありません。 Canvasを使ったサンプルです。 imbaはRubyっぽい構文にReactを組み合わせた言語（記法？）になっています。JavaScri

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました jQuery、便利ですよね。すぐに使ってしまうのですが、サイズは肥大化していますし、実際に使うのはそのごく一部でしかなかったりします。 そこで参考にしたいのがYou-Dont-Need-jQueryです。その名の通り、jQueryを使わない標準的な記法を教えてくれるプロジェクトです。 You-Dont-Need-jQueryの使い方 You-Dont-Need-jQueryはソフトウェアというわけではなく、READMEの中で説明をしてくれます。例えばセレクタの書き方。 $('selector'); // ↓ document.querySelectorAll('selector'); クラスを指定する書き方。 $('.class'); // ↓ document.querySele

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました マーケターの人たちはアンケートフォームを数多く作成します。そんな時に一回一回プログラマに依頼して作成してもらうのでは時間もかかりますし面倒です。 そこで使ってみたいのがjQuery formBuilderです。jQuery formBuilderを使えば自由にフォームが作れるので、後はそのデータを保存できるようにすればいいだけです。 jQuery formBuilderの使い方 jQuery formBuilderのデモサイトです。項目は自由にドラッグ&ドロップできます。 編集で細かいところを直せます。 リストなどは項目を設定できます。 実際のレンダリング結果を確認できます。 jQuery formBuilderは汎用的なフォームができますので、後はそのデータをJSONなりでまとめ

ついにSwiftがオープンソース化されました。これによって起こる変化といえば、Mac OSX以外のプラットフォームでも活用できるようになることであったり、iOS/Mac OSX以外の環境での実行が可能になることでしょう。 その一つの形式として早速出てきたのがPerfectです。サーバサイドのPerfect実行環境です。 Perfectの使い方 Perfectには幾つかのデモアプリが入っています。Swiftで作られたHTTPサーバで動きます。 iOSアプリと連動するデモもあります。PerfectはMac OSXとLinuxで動作するとのことです。また、データベースはMySQL/PostgreSQL/SQLite/MongoDBがサポートされています。 まだまだプロジェクトははじまったばかりですが、iOSアプリとサーバサイドが同じ言語で書けるのは魅力的です。今後に期待したいプロジェクトでしょう

システム開発中においてもメール送信をテストしたいと思うことがあります。さらに本番環境のSMTPサーバを設置していたりすると、ミスした時にとんでもない事態になる可能性があります。十分な注意をしなければならないのがメールシステムの問題です。 そこで使ってみたいのがMailSlurperです。ローカルで動作する、開発用のメールサーバです。 MailSlurperの使い方 MailSlurperを実行すると、Webブラウザ向けの管理画面と開発用のメールサーバが立ち上がります。 メールを送るとWeb管理画面で内容が確認できます。実際には送信されていません。日本語はデコードされないようです。 設定画面です。 MailSlurperを立ち上げておいて、メールを送信するようにすればメールアドレスの確認メールやパスワードリマインダーなどのメールについてもテストしやすくなるでしょう。何より実際には送信されない

ブログやオンラインメディア、Webサービスを運営している人にとって無視できない存在なのが広告ブロックではないでしょうか。昔からある技術ですが、iOS9での対応によって一気に注目を浴びるようになりました。 一般ユーザの視点からすれば表示速度向上やネットワーク帯域の削減に寄与するとあって歓迎の動きですが、サイト運営者は反対している人が多いでしょう。そこでサイト運営者が使いたいライブラリがAdi.jsです。 Adi.jsの使い方 Adi.jsは他にも幾つかあるアドブロック検知ライブラリです。アドブロックを使っている場合は次のように表示されます。 閉じた時のコールバックが受け取れるようになっているので、その場合はこんな嫌そうなアニメーションGIFが流れます。 アドブロックを停止している場合はいいねって感じのアニメーションGIF。 Adi.jsはJavaScriptで動きますので、JavaScrip

Reactへの注目がどんどん高まっています。Webのビューライブラリという枠を越えて、React Nativeによってスマートフォンアプリ開発にも使えるようになっています。特にコンセプトであるLearn once, run everywhere（一度覚えればどこでも動く）が素晴らしい考えと言えます。 そんなReactを次のターゲットとしてデスクトップでも動くようにしたのがReact Desktopです。Mac OSX/Windowsに対応しています。 React Desktopの使い方 React Desktopのデモです。Webでも表示できるのがすごいです。 コントロールもちゃんと動きます。 そしてWindows 10でも使えます。 フォームもまさにWindows 10といった感じです。 メニューを隠すこともできます。 ElectronはHTML5を使ってデスクトップアプリを作ることがで

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました iOS9で注目され、かつ色々な議論を生み出しているのがアドブロック機能ではないでしょうか。個人的にはポジティブなイメージがあります。広告は良きも悪くも氾濫しつつあり、ユーザビリティを悪化させているからです。 そんな広告ブロック機能ですが、お金をもらって広告ブロックを外すなど不穏な動きも見られたりします。そこでAdblock Plus Safari iOSを使って自分で作ってしまうのはいかがでしょう。 Adblock Plus Safari iOSの使い方 立ち上げたところです。設定の仕方が説明されています。 設定画面です。許容する広告を設定できたりします。 未設定の場合。バナー広告が出ています。 設定アプリで有効にしてみます。 バナーが非表示になりました！ Adblock Plus

iOSアプリはSwift以外の選択肢もあります。昔であればCordova（PhoneGap）、Titaniumなどがあり、最近ではReact Nativeが選択肢として知られています。他にもCocos2dやUnityもあります。 その一つとして今回はenCloseを紹介します。HTML5/JavaScriptをラッピングし、iOS/Mac OSX向けアプリが作れるフレームワークです。 enCloseの使い方 enCloseを使ったデモです。UIはWeb技術で作られています。 ボタンをタップするとログが表示されます。これはSwift側と通信した結果です。 Xcode側にタップイベントのログが表示されます。 enCloseはCordova(PhoneGap)によく似た技術と言えます。ただしenClose開発者に言わせるとCordovaは複雑であり、その割にできることが限定的であると言います。e

Markdownが簡易的なマークアップ言語としてシェアを維持するのに合わせて、多くのソフトウェアが出てきています。それがさらにMarkdownを魅力的にし、シェアを伸ばすのにつながっているかと思います。 今回はMadoko、オンラインのMarkdownエディタを紹介します。HTMLはもちろん、PDF出力もサポートした高機能なMarkdownエディタです。 Madokoの使い方 Madokoは2ペイン型のMarkdownエディタです。左側の編集内容が右側に即座に反映されます。 日本語での編集にも対応しています。 数式埋め込みにも対応。 テーブルのような拡張記法も使えます。 PDF出力もできますが日本語は表示されませんでした。 MadokoはDropbox、GitHub、Onedriveへの保存機能やプレゼンテーションテンプレート、さらにWebページとして公開（Azureを利用）もサポートされ

ちょっと前までヘッダーをスクロールしても上部に残し続けるのが流行っていましたが、最近はさらに最初はヘッダーを大きく表示して、スクロールするとヘッダーサイズを小さくすると言うタイプが多く見られるようになっています。 実装は面倒なイメージがありますが、jquery.cb-slideheader.jsを使えば簡単に実現できます。 jquery.cb-slideheader.jsの使い方 jquery.cb-slideheader.jsにはいくつものメソッドが用意されていますので、それを使うことで多彩な表現が実現します。まずはスクロールするとヘッダーが表示されるもの。 スクロールでヘッダーが変わるもの。 スクロールでヘッダーを非表示に。ただしパララックス風です。 スクロールによってコンテンツを変更するのはパララックスエフェクトをはじめ、最近人気の効果です。jquery.cb-slideheader

写真はそれ単体で載せるだけでなく、写真に合わせてコンテンツの雰囲気を変えたりするとより際だって表現力が高くなります。そのためには写真の解析が欠かせませんが、これは意外と難しいです。 そこで使ってみたいのがVibrant.jsです。写真を解析し、主立ったカラーパレットを抽出してくれるライブラリです。 Vibrant.jsの使い方 Vibrant.jsを使って解析された画像の背景にメインカラーを当てています。 必ずしも一番多い色ではなく、その写真の中で一番目立っているところを使っているのが分かります。 この手のライブラリは幾つかありますが、どの色をピックアップするか、さらにどれを優先するかはアルゴリズムによって違って面白いです。写真を元にしたカラーリストの作成やデザインのインスピレーションを得るのにぴったりではないでしょうか。 Vibrant.jsはJavaScript製のオープンソース・ソフ

企業やプロジェクトによってデザインガイドラインは自ずと必要になってきます。それが社で働くデザイナーの共通認識になる訳ですが、例えばFacebookアプリを作る際にはボタンやデザインをFacebookっぽくしたくなるのではないでしょうか。つまりデザインガイドラインは社内だけでなく社外の人にとっても有益なのです。 そこで登場したのがPrimerです。PrimerはGitHubが作り、使っているデザインガイドラインになります。 Primerの使い方 スクリーンショットを多めで紹介します。まずはグリッド。 ヘッダー。h1〜6まで対応。 テキスト。若干小さめ？ インラインテキストの装飾。 ボタン。ここはGitHubっぽいですね。 ボタングループ。こういうのもGitHubで使われていますよね。 フォーム。シンプルです。 フォームグループ。縦に並べる時に使えます。 メニュー。アイコンはオプションです。

Web上で音楽を楽しむ環境は整いつつあります。SoundCloudにアップしている人も多いですし、YouTube上にある音楽を聴く人も多いでしょう。そんな音楽メディアに欲しい情報として波形があります。 wavesurfer.jsは音楽ファイルを読み込み、波形を表示してくれるJavaScriptライブラリです。JavaScriptだけで作られているのが特徴になります。 wavesurfer.jsの使い方 例えばこんな感じです。 再生済みの部分は色が濃くなっています。 ドラッグ&ドロップで任意の音楽ファイルを解析できます。 wavesurfer.jsは数MBある音楽ファイルもすぐに解析することができます。そして波形を表示して、そのまま再生ができます。YouTubeのように動画がない場合、音楽メディアの見た目の楽しさとして表示すると良さそうです。サビ部分が一目で分かるのも良さそうです。 wave

FirefoxのUIは徐々に変更されており、現在はGoogle Chromeにかなり感じになっています。それが特に悪いことはなく、操作性において迷いがなくなるので相互にブラウザを変更しても違和感なく使えるようになりそうです。 そんなFirefoxのUIをHTMLで再現したのがFirefox.htmlです。元々ネイティブのコンポーネントで作られているUIですが、Webブラウザでも同じくらいの水準で再現できています。 Firefox.htmlの使い方 こちらがそのUI。まるでブラウザそのままですね。 外部サイトへのアクセスも可能です。 検索も使えます。もちろん検索エンジンはYahoo。 画面はHTMLなのでスタイルシートで変更もできます。ただしメニューは使えません。 今後FirefoxのUIが変更される議論があっても、HTMLベースであればすぐに変更して議論すると言った目的にも使えそうです。F

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webアプリケーション化が進み、Ajaxを使ってデータを取得したりJavaScriptで画面を再描画するようになると、その処理途中にユーザに触って欲しくないことが増えます。特にフォーム送信の二重処理は厄介です。 そこでボタンを一時的に無効にしたり、処理中である旨を通知する必要が出てきます。そのためのライブラリがwhirlです。 whirlの使い方 whirlには様々なデザインが用意されています。 whirlの良いところは画像ではなくCSSだけでアニメーションを表現しているという点です。わざわざ画像をアップロードする必要もないのでwhirlだけで素早くローディングアニメーションが実現できます。 使い方としてもクラスを追加したり、表示するだけで使えますので手軽です。 <div clas

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JavaScriptは何となく書きづらい言語です。コールバックを多用したりしてネストが深くなってしまったり、prototypeで拡張して却って分かりづらくなったり…なんて経験はないでしょうか。筆者はそれがありすぎてCoffeeScriptに飛びついた派なのですが。 素のJavaScriptを記述している方にお勧めしたいのがJSCSです。JavaScriptファイルのコードスタイルをチェックしてくれます。 JSCSの使い方 JSCSのインストールはnpmで行えます。 $ npm install jscs -g 後は標準出力で渡すだけです。 $ cat test.js | jscs --preset=jquery --reporter=console Invalid quote mar