MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました メールサーバを立てるのはとても面倒なイメージがあります。安定して動かしておかないとメールが受信できない、なんて問題にもなりかねません。メールがビジネスの根幹を担っている場合にはなおさらです。 そこで紹介したいのがMailuです。Dockerで簡単に立ち上げられるメールサーバです。 Mailuの使い方 ログインします。 縦並びの3カラム構成です。左にボックス、中央がメール一覧、右側にメール本文が出ます。 メール作成画面です。 ファイルを添付すると右側に一覧が出ます。 設定画面です。 もちろんDockerだから安定する訳ではないですが、立ち上げが簡単なのはメリットが大きそうです。IMAPやSMTPはもちろん、Let’s encryptを使ったSSL/TLS、アンチウィルススキャナ、スパ

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web上でアニメーションを実現する方法は幾つかあります。アニメーションGIFを使う方法、CSSアニメーション、そしてSVGやJavaScriptを使うこともできるでしょう。ユーザ操作によるインタラクティブなアニメーションを実現しようとすると、JavaScriptが選択肢になります。 しかしWebブラウザ側でJavaScriptをオフにされるだけでJavaScriptベースのアニメーションは実現できなくなります。そこで参考にしたいのがSVG ANIMATIONSです。 SVG ANIMATIONSの使い方 SVG ANIMATIONSはCSSとSVGのみでアニメーションしています。JavaScriptも画像も使われていません。 複雑な幾何学模様系のアニメーションが多いです。 線が動く

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 過去に見たWebサイトにアクセスしてみたら、すでにコンテンツが消されていた…なんて経験は誰しもがあるはずです。あの時アーカイブしておけば…と後悔してもすでに遅く、思い立った時に行っておかないといけません。 そこで使ってみたいのがmonolithです。 monolithの使い方 アーカイブした例です。表示は崩れていません。 画像はdata URIを使っています。 monolithはターミナルでURLを指定して実行すれば、その内容をアーカイブしてくれます。画像やJavaScript、CSSは一つのHTML中に収めてくれます。iframeなどはダメなようですが、見たままに保存しておくとしては十分ではないでしょうか。 monolithはRust製のオープンソース・ソフトウェア（Public

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 世の中には様々なグラフ、チャートがあります。その一つとしてファイナンス系があります。FXや株などで表示されるグラフは特殊で、さらにデータをリアルタイムに処理するのが重要です。 今回紹介するTradingViewはまさにそういった用途で使われるグラフライブラリになります。 TradingViewの使い方 ローソクチャートやフォント、価格のカスタマイズなど。 透かしやキャプションを入れたり、テーマも設定できます。 グラフの幅に自動的に調整したり、ツールチップの表示だけでも様々な方法が選択できます。 移動ボタンや範囲スイッチャー、複数のグラフを同時に載せることもできます。 下に小さなグラフを載せたり、メモリを左側に載せる、縦軸を対数グラフにすることも。 かなりこだわった表示が実現できるの

HTML5で音楽ファイルを扱うことができるようになりましたが、素の状態では殆どUIが提供されていません。そんな状態で提供しても全く魅力的ではないでしょう。別途UIを作り込む必要があります。 今回紹介するオープンソースソフトウェアはAmplitude.js、HTML5のオーディオプレイヤーです。これを使えば格好良いUIで提供できるでしょう。 Amplitude.jsの使い方 上の再生部分がプレイヤーになります。 マウスオーバーで再生、停止に表示が変わります。 こんな感じです。 サムネイルだけでなく、アルバムの拡大表示もできます。 プレイリストにも対応。 SoundCloudも再生できます。 ビジュアライズも。 シンプルも良いですが、もっとリッチなプレイヤーにもできます。 Amplitude.jsを使えばリッチで使い勝手の良いHTML5のオーディオプレイヤーが簡単に提供できるようになります。も

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 印象的なひょうたん風の図形と、幾ら拡大しても幾何学的図形が繰り返されていくフラクタル画像。ついついズームを繰り返していって、いつか終わるが来るのではないかと見入ってしまう魅力があります。 そんなフラクタル画像をWeb上で実現してくれるのがFractalJSです。多くのパターンがありますのでぜひ色々試してみてください。 FractalJSの使い方 フラクタル画像と言えばこれですよね。 拡大していくと、徐々に綺麗な幾何学模様になっていきます。 すごく綺麗ですね。 他にもこんな図形もあります。 マンデルブロが複数合わさったMultibrot。 タツノオトシゴのような蛇のような図形。 フェニックス。色を変えることもできます。 細部まできめ細かくて格好良いです。 FractalJSはCanv

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました ユーザにコンテンツを作ってもらう上で欠かせないのがWYSIWYGエディタです。HTMLでの記述に慣れた人にとっては邪魔くさいかも知れませんが、そうでない人のがたくさんいます。そうした人が自由に思い通りにコンテンツが作れるWYSIWYGエディタはとても大事です。 今回紹介するSummernoteもそんなWYSIWYGエディタの一つですが、Bootstrap向けという点がポイントになっています。 Summernoteの使い方 こちらがSummernoteです。シンプルなUIなのが特徴です。 ツールバーを消すモードもあります。 テーブルも追加できます。 生成されるHTMLも綺麗です。Bootstrapに対応したクラスが割り当てられているのもポイントです。 SummernoteはDjang

最近はWebサイトにカルーセルを載せて写真をスライド表示するのを多く見かけるようになりました。大抵右から左に写真が流れていくものが多いのですが、あまり多いと見飽きてしまいます。これではせっかくの写真が印象に残りません。 より写真を強調したカルーセルを考えるならばSmoothslidesを使ってみても面白そうです。 Smoothslidesの使い方 Smoothslidesを使うと写真が単に表示されるだけでなく、上下左右にゆっくりと動きます。写真がより印象深くなるのではないでしょうか。 これはケン・バーンズ効果と呼ばれ、静止画に動きと生命を与える手法として知られています。AppleのiPhoto、iMovieなどでも実装されているものになります。写真を楽しむ上で欠かせないテクニックと言えそうです。 SmoothslidesはJavaScript製、Creative Commonsのオープンソ

Googleの提唱するマテリアルデザインはAndroidだけに止まらず広がりを見せています。特にWebデザインは相性が良いようで、フラットにしたけれどクリッカブルな場所が分からなかったり、あまりに簡素化されたデザインでかえってユーザを混乱させてしまうことがあります。 そんな時にマテリアルデザインを使うことでユーザビリティの高いサイトを構築できるでしょう。そこでベースに使ってみたいのがmaterialです。 materialの使い方 materialはフレームワークと言うよりもテンプレートに見えます。 materialはまさにGoogleでよく見られるようなデザインを作ることができます。グリッドなど、フレームワークによくある部品はありませんが、十分にこったデザインのサイトを作ることができるでしょう。 materialはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア

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

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5になって、audio/videoなどマルチメディアを操作するタグが追加されました。それによってFlashなどのプラグインを使わなくともWebブラウザだけで音楽や動画が再生できるようになっています。 問題はそれらのタグは最低限の表現しか提供しておらず、より使いやすくしようと思うと独自の実装が必要と言うことでしょう。そこで今回は一例としてVesperを紹介します。 Vesperの使い方 Vesperは以下のようなHTMLタグを書きます。 <audio id="player" src="music/sample.mp3" controlls="controlls" ontimeupdate="zTimeUpdate()"></audio> 0:00 <progress id="

Webは表現力がそれほど高くないのが常に問題視されています。特に業務系システムではグラフ/チャートを使ってデータを可視化する必要があります。最近ではビッグデータが話題にあがっており、大量のデータを効率的に描画しなければならなくなっています。 そこでEChartsを紹介します。ビッグデータモードまで用意された多種多様なパターンの用意されたチャートライブラリです。 EChartsの使い方 今回はその多様なグラフ、チャートを紹介します。 曲線のグラフ。 積み上げグラフ。 棒グラフ。 エリアグラフ。 曲線。かなり複雑です。 こちらもユニークです。途中で途切れています。 棒グラフですが、範囲が指定できています。 左右の比較グラフ。 複数グループの棒グラフ。 散布図。 こちらも散布図。 画像も合わせた表示。 散布図と色の組み合わせ。 ローソクチャート。 円グラフ。 より描画にこだわった円グラフ。 レー

テキストから意味を読み取るというのは非常に難しく、そのための専用ソフトウェアが存在するほどです。そしてテキスト解析手法の一つとして知られているのが分かち書きです。日本語であればChasenがよく知られています。 kuromoji.jsはそんな分かち書き処理をJavaScriptで行ってしまおうというソフトウェアになります。KuromojiというApache財団のオープンソース分かち書きエンジンをJavaScriptにポーティングしています。 kuromoji.jsの使い方 こちらはデモです。Webブラウザベースで動作しています。nodeでも使えます。 適当な文章をリアルタイムに分かち書きできます。 kuromoji.jsは辞書ファイルをAjaxで取得しています。そのためサイズは大きくなりますが、分かち書きの精度はとても高くなります。サーバサイドで辞書を用意したり分かち書きエンジンを用意する

最近、Webサイトの背景に大きな写真を埋め込む表示が見られるようになってきました。デザイナーのプロフィールサイトやランディングページに使うとインパクトがあります。 さらにその写真が複数あるといった時に使ってみたいのがVegasです。画像の切り替えをスタイリッシュに行ってくれるjQueryプラグインです。 Vegasの使い方 左右や上下のスライドではなく、フェードイン/アウトを効果的に使っているのに注目です。写真のトーンを統一してあると一段と格好良さそうです。 VegasはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 Vegas Background jQuery Plugin jaysalvat/vegas

アニメーションGIFは今なお人気です、というかここ数年さらに人気が高まっているのではないでしょうか。動画とは違いプラグインもCPUパワーも殆ど使わずに再生できますし、音がないのが逆に創造性を働かせてくれます。 そんなアニメーションGIFを各種リソースから生成してくれるソフトウェアがGifshotです。Yahoo! Inc.製というのがまた面白い点です。 Gifshotの使い方 一例。データソースはWebカム、動画、画像が選択できます。 動画の場合。変換処理が行われます。 速度を変えたり、文字を追加したりできます。 GifshotではアニメーションGIFのサイズや速度を指定したり、テキストを自由な場所に追加できます。Webカムから簡単に作成できますので、Vine風に使ってみたりしても面白いかも知れません。 GifshotはHTML5/JavaScript製のオープンソース・ソフトウェア（MI

Googleが開発者向けイベントで発表した新しいデザインコンセプトのMaterial Design。フラットUIをベースとしつつ、さらにアニメーションやエフェクトを通してユーザに情報を分かりやすく伝達できます。 そんなMaterial DesignをBootstrapに適用したのがBootstrap Materialです。これは多くのプロジェクトで活躍しそうです。 Bootstrap Materialの使い方 Bootstrap MaterialはフラットUIのBootstrapテーマとしてもいい感じですし、さらにMaterial Designによって情報が分かりやすくなります。デスクトップはもちろんのこと、スマートフォン/タブレット向けのデザインとしても使えることでしょう。 Bootstrap MaterialはHTML5/CSS3/JavaScript製のソフトウェア（ライセンスは独自

コンピュータには昔からエミュレータがありました。ファミコン、スーパーファミコン、ゲームボーイと各種機器をエミュレートするソフトウェアが数多く存在します。 そうしたエミュレータを探してダウンロードする時代はOpenEmuが終わらせたと言っても過言ではないでしょう。これまでの歴代のエミュレーターがOpenEmu一つに収まってしまっているのです。 最初のウィザード。わくわく。 ゲーム機器の選択。なんか色々ありますね。 メイン画面です。 使えるエミュレータはファミコン、ゲームボーイ、ゲームボーイアドバンス、ゲームギア、ネオジオポケット、任天堂DS、PCエンジン、セガサターン、メガドライブ、スーパー32X（知らなかったのですが、メガドライブ用の周辺機器らしいですね）、スーパーファミコン、バーチャルボーイ（！）となっています。 ゲーム画面。懐かしいファミコンっぽい画面です。これは有志によって作られたゲ

Webサイトのモックアップ作成をPhotoshopを使って行っているデザイナーは多いかと思います。そんな時に一から作るのではなく、ある程度のUIキットがあると作業の進めやすさが格段に違うでしょう。 手書き風やiOS 7風など様々なテーマがあると思いますが、UI KitはフラットUIに適したアプリ/Webサイトのモックアップに適したデザインになっています。 UI Kitの使い方 全体像はこのようになっています。 設定画面風。 アイコンも多数あります。 カレンダーは色々な場面で使われますよね。 プロフィール風。 UI KitはPSDファイルになっていて、大きく分けて13種類くらいのデザインが登録されています。シンプルなデザインなので、これらの部品を組み合わせることでスマートフォン向けのWebサイトやアプリのデザインがさくさく進むのではないでしょうか。 UI KitはPhotoshop用のオープ

スマートフォンのWebサイトを作ったり、HTMLと合わせたネイティブアプリ、いわゆるハイブリッドアプリを作る上でネイティブに似たUIのWebコンポーネントは欠かせません。デザインフレームワークもたくさん出ています。 その差別化になるのは、とにかく様々なコンポーネントが存在することで多彩なニーズに応えられるか否かになります。そこで今回はスマートフォン向けのUIフレームワークOnsen UI向けのCSSコンポーネント、Onsen CSS Componentsを紹介します。 Onsen CSS Componentsの使い方 Onsen CSS Componentsを使うとどのようなスマートフォンサイト、ハイブリッドアプリができるのか。それはやはりデモを見るのが一番です。 ログイン/グリッドメニュー/タイムライン。 プロフィール/ニュースフィード/イメージビュー。 登録、検索系も用意されています。

これで十分でしょ！ Bootstrapで作る管理画面は相当増えてきているようです。確かに一般ユーザ向けに提供するとBootstrap臭が出てしまいますが、管理画面であれば問題はないですよね。 ということで今回は新しいBootstrap製の管理画面テンプレートAdminLTEを紹介します。高度なウィジェットが数多く提供されていますので使い勝手良さそうですよ。 AdminLTEの画面 今回もスクリーンショット多めで紹介します。 ダッシュボード。この時点でかなりリッチ。 ボックス。これだけ多彩なパターンがあると言うのも凄いですね。 左端にはちょっとした設定を表示させています。 背景色を変えるだけでも随分印象が違います。 グラフ。 こちらもグラフ。 外部ライブラリもそつなく使いこなしています。 スパークラインも！ アラート。ちょっと飛び出しているのがいい感じです。 アイコン。 ボタン。フラット系で