ThetaViewer.js - RICOH THETAの画像をアニメーションGIF化 MOONGIFT
全天球写真、動画は大きな可能性を秘めていると思っています。その可能性を感じさせてくれるデバイスの一つがRICOH THETAです。最新機種では1080pに対応し、高画質な動画を作成できるようになっています。 そんなRICOH THETAで撮影した写真をアニメーションGIFで楽しめるのがThetaViewer.jsです。つまり全天球アニメーションGIFです。 ThetaViewer.jsの使い方 ThetaViewer.jsのデモサイトです。アニメーションGIFなので刻々と移り変わります。さらにマウスでぐりぐりと動かせます。 動かしているところです。全天球なのが面白いです。 RICOH THETAであれば動画が録画できるのですが、アニメーションGIFもまた違った面白さがあります。ぜひデモサイトで試してみてください。 ThetaViewer.jsはHTML5/JavaScript製のオープンソ
GitUp - Mac OSX用の軽量なGitクライアント
Gitは誕生して10年になろうとしているそうです。そして現在、GitHubを筆頭として多くのエンジニアがGitを使っています。しかしGitの使い方について、日々多くのエンジニアが悩んでいるのではないでしょうか。 そこで作られたのがGitUpです。分かりやすくGitを使えるようにしたいと考えているクライアントソフトウェアです。 GitUpの使い方 GitUpを立ち上げるとまず、リポジトリを選択するウィンドウが表示されます。 リポジトリを開くとグラフが表示されます。 ブランチなども見やすいです。 コミットメッセージも見られます。 修正した場所も分かります。ここからコミットもできます。 GitUpでは操作の殆どがundo/redo可能であり、タイムマシーンさながらに指定したリポジトリの状態に戻すのも簡単にできます。UIはとてもシンプルですが、GitUpを使うことで普段のGit運用がとても楽になる
ScreenTime – 作業風景を自動で動画化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました デジタルな時代になって面白いのが、単に作品だけでなく、その作品を作る過程も簡単に残せるようになったことです。デジタルな作品は簡単に複製できてしまうので評価が難しいですが、作品の制作過程は一度きりしかできないので価値が高いと考えられます。 そんな何かを作っている様子を残せるのがScreenTimeです。デザインに限らず、プログラミングしているところを残すのも良いでしょう。 ScreenTimeの使い方 ScreenTimeはメニューバー常駐型のソフトウェアです。 そして1分ごとにスクリーンショットを撮影、保存します。さらに1時間ごとにたまったスクリーンショットを動画にします。そして1日ごとの動画も作成します。ScreenTimeは複数ディスプレイにも対応しています。 作業者は単にSc
Dynamics.js - 物理系アニメーションライブラリ MOONGIFT
アニメーションは何の意味もなく動かしても面白くありません。一回転させたり、ひっくり返ったりと現実世界を投影するような動きは目を引きやすく、表現としても分かりやすいです。 そこで使ってみたいのがDynamics.jsです。物理系の動きを再現するJavaScript/CSSアニメーションライブラリになります。 Dynamics.jsの使い方 Dynamics.jsには多数のパターンで動きが作られています。 スプリングという名前のアニメーションです。 バウンド。 強い重力。 この他にもいくつものパターンでアニメーションが作られています。さらにパラメータを変更することで動きを調整できるようになっています。Dynamics.jsを使ってリアルな物体感を感じさせるアニメーションを実現してください。 Dynamics.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです
Evil Icons – すっきりしたデザインのSVGアイコン集
Web Fontが人気です。フォントを読み込めばかなり昔のブラウザであってもカスタムフォントが利用できます（IEにおいてはIE4から使えます）。難点としては作り手のスキルが必要ということでしょうか。 もう少し手軽に画像ではないアイコンを使いたければSVGを使ってみるのはいかがでしょう。今回はその一つEvil Iconsを紹介します。 Evil Iconsの使い方 Evil IconsはRails/Sinatraそしてnodeと組み合わせて使えるようになっています。その他、Gruntで使うこともできます。Gulpはまもなくのサポートとのことです。SVGはベクターなのでサイズも色も自由に変更できるのが利点ですね。 Evil IconsはSVG製、MIT Licenseのオープンソース・ソフトウェアです。 Evil Icons outpunk/evil-icons
Web上のデータを使って人工無脳を実現する·Web AI MOONGIFT
Web AIはWebデータの解析および取得を通じて人工無脳を実現する。 MOONGIFTはこう見る 人工無脳というと使えないプログラムと言うイメージがあるが、実際には人工無脳とは人工知能には遠く及ばないものの、色々なアルゴリズムを使ってコンピュータと会話をなせるシステムのことだ。インターネットを使うとさらに情報量が増え、より人工無脳が有能になる。 デモを見ても分かる通り、使い道は色々と考えられるのではないだろうか。各ライブラリは単独で使うこともできるので、文章解析系で用いると応用が利くのではないかと思われる。 Web AIはJavaScript製のオープンソース・ソフトウェア。昔からコンピュータの世界では人工無脳の人気が高い。人工知能という程ではないため、無脳と名付けられている。様々なアルゴリズムを使い、それらしい答えを返したりする面白いプログラムだ。 GIGAZINE風に記事を生成するC
hello.js·各種ソーシャルプロバイダの認証をまとめるJavaScriptライブラリ MOONGIFT
今はソーシャルサービス全盛とあって、FacebookやTwitterなどと連携してサービスを提供するのが一般的です。しかし各プロバイダーの接続を一元化したりするのはちょっと面倒に感じていることでしょう。 そこで使ってみたいのがhello.jsです。多数のソーシャルプロバイダーをひとまとめにしてくれるJavaScriptライブラリです。 hello.jsの使い方 hello.jsの良いところはJavaScriptベースということでしょう。 こんなに多くのソーシャルプロバイダーに対応しています。 例えばFacebookでログインした場合。 アイコンや名前が取得できています。 他のサービスでも同様です。 Facebookの場合はJavaScript向けのAPIが公開されていますので、それを使っています。対してTwitterなどの場合はプロキシサーバを立てて、そこでキーを生成するようになっています
markdown2bootstrap - MarkdownをBootstrapと組み合わせてHTML化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました MarkdownでHTMLが出力できるのは良く知られていますが、生成されるのは素のHTMLタグとなっています。このまま表示に使いたいと思うことは殆どないでしょう。必要なのは多少なりともデザインです。 そこで使ってみたいのがmarkdown2bootstrapです。MarkdownからHTMLを生成し、それに合わせたBootstrapデザインを提供してくれます。 markdown2bootstrapの使い方 markdown2bootstrapのインストールはnpmで行えます。 $ npm install -g markdown2bootstrap 終わったらMarkdownファイルのあるディレクトリで実行するだけです。 $ markdown2bootstrap README.md
md2docx – MarkdownをMS Wordに変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownは主にHTMLへ変換されますが、それ以外でもPDFやePubへの変換など色々と用途が広がっています。パーサーも多く、シンプルなフォーマットなので自分のよく使っているファイル形式へのコンバートもさほど難しくなさそうです。 ということで今回はmd2docxを紹介します。名前の通り、MarkdownファイルからMS Wordファイルへ変換するソフトウェアです。 md2docxの使い方 md2docxは一気に変換するのではなく、行ごとにMS Wordに追記しながら進んでいきます。その様子が面白いです。PowerShellを使っています。対応しているのは見出し、表題/副題（専用記法）、リスト、画像、テーブル、改ページ（独自記法）などとなっています。 さらにマクロが記述できるよ
uilang - UI操作を記述するWeb用DSL
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近はUIだけではなく、アクションによって起こるアニメーション技術にも注目が集まっています。Googleの提唱するMaterial Designでも単にタップするだけでなく、その後のアニメーションまで含めてデザインしています。 そんなアニメーションを含めたデザインを行うためのDSLとしてuilangが登場しました。全く新しい言語としてとても面白そうですよ。 uilangの使い方 <code> clicking on ".hide" adds class "hidden" on "#notification" </code> こちらが肝です。ボタンをクリックするとhiddenを追加するというのを文章として定義できます。 この場合は以下のようになります。 <div id=switch>
GitBook·Markdownで書いて電子書籍/HTMLを生成 MOONGIFT
電子書籍を作るのは大変というイメージがあります。ePub自体は単なるZipファイルですが、その内容がXML/XHTMLなのが若干面倒さを感じさせます。専用のエディタもありますが、書き慣れたエディタの方が筆も進むというものです。 そんな訳で使ってみたいのがGitBookです。Markdownで書いて、ePub/PDFに変換するGit/GitHub連動型電子書籍作成ツールです。 GitBookの使い方 早速サンプルの電子書籍を見てみましょう。HTMLにも変換できます。 JavaScriptの勉強です。左側に目次、右側にコンテンツという形式になります。 ページ切り替えは矢印キーでもできます。ページの内容が1画面に収まっているのがいい感じです。 目次を隠すことが出来ます。 検索はインタラクティブにできます。 JavaScriptをWeb上で実行できます。今後、RubyやPythonにも対応させる予
Cinematico - 動画をアピールしたい人のためのCMS
Webサイトを作る目的は人それぞれです。写真家であれば自分のポートフォリオサイトを作りたいと思うでしょう。さらにインターネットと言う点で考えれば、静的な写真だけでなく動画も十分ポートフォリオとしての役割を果たしてくれます。 そこで使ってみたいのがCinematicoです。YouTube/Vimeoを使って動画を並べたWebサイトを作ってくれます。 Cinematicoの使い方 Cinematicoは動画を効果的に見せてくれるポートフォリオサイトが簡単に作成できます。自分の動画だけでなく、キーワードに合わせてソースを作成することもできるので、特定ジャンルの動画を集めたサイトを作るのも簡単にできそうです。 CinematicoはPHP製、MIT Licenseのオープンソース・ソフトウェアです。 Cinematico | Create an exceptional website for yo
mdr – ターミナルでもMarkdownを読みやすく
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownフォーマットがどこでも使われるようになっています。それだけ普及したこともあって、専用のエディタや各種エディタでのMarkdownフォーマットのハイライトサポートが当たり前になっています。 そこでターミナルでも同じようにMarkdownの可読性をあげてくれるのがmdrです。一度使うと意外と手放せない存在になりそうです。 mdrの使い方 インストールはnpmを使います。 $ npm install -g mdr 面白いのはローカル、オンラインのどちらでも読み込めることでしょう。 mdr # Show README.md from current directory mdr foo.md -i # Use dark-on-light style mdr http://ex
Knowledge Base - node製のナレッジベース
Webサービスを使う上で質問があったり、ドキュメントが必要になることは多々あります。そんな時に使えるのがナレッジベースです。APIドキュメントやFAQなど色々な用途で使われています。 今回はDOBTというサイトで使われているナレッジベース、Knowledge Baseを紹介します。シンプルで見やすいドキュメントビューワーになっています。 Knowledge Baseの使い方 Knowledge Baseは文書はMarkdownで記述します。それをKnowledge BaseがHTMLに変換しています。さらに検索機能が提供される形です。様々なコンテンツに対して適用できるのではないでしょうか。社内で使っても良さそうですね。 Knowledge Baseはnode/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 DOBT Knowledge Base dobt
Classy·デザインがさくさく進みそう。スタイルシート for iOS MOONGIFT
Webの世界ではスタイルシートが当たり前です。デザインとHTML構造がある程度分離できるようになったことでメンテナンス性が向上したり、修正が一括で適用されるようになったりします。 それと同じ世界をiOSアプリでも目指そうというのがClassyになります。スタイルシートに似た構文で画面デザインができるようになります。 Classyの使い方 例えばこんな構文です。 $main-color = #e1e1e1; MYCustomView { background-color: $main-color; title-insets: 5, 10, 5, 10; > UIProgressView.tinted { progress-tint-color: black; track-tint-color: yellow; } } ^UIButton.warning, UIView.warning ^UI
Open Source Email Templates – オープンソースなHTMLメールテンプレート集
HTMLメールの認知度は十分にあがってきていると思います。かつてのようにセキュリティリスクはなくなってきたのではないでしょうか。ただ、それでもなかなか使われないのは、作成が難しいということがあるかと思います。 特にスマートフォンやタブレットを想定したレスポンシブなHTMLメールはまだまだ知見が少ないように思います。そこで使ってみたいのがOpen Source Email Templatesです。 Open Source Email Templatesの使い方 Open Source Email Templatesでは多数のHTMLメールテンプレートが用意されています。 HTMLメールとあって、コンテンツ部分を大事にデザインはシンプルなものが多いようです。これらをベースに、カスタマイズして使うようにすれば各デバイスで表示しても崩れることなく送信できるようになるでしょう。 Open Sourc
Dbignore·これは便利！Dropbox版.gitignore MOONGIFT
Dropboxは手軽で便利に使えるのですが、細かいカスタマイズには対応していないので融通が利かないなと思ってしまうこともあります。例えば同期しないフォルダの指定はできますが、ファイル単位で指定したいという場合もあるのではないでしょうか。 そんな時に使えるのがDbignoreです。.gitignoreと同じフォーマットを使って同期しないファイルを指定できます。 Dbignoreの使い方 インストールは次のように行います。 $ ./install ++ dirname ./install + BUILD_DIR=. + cp ./dropbox_inj.dylib /Applications/Dropbox.app/Contents + grep -Fxq DYLD_INSERT_LIBRARIES /Applications/Dropbox.app/Contents/Info.plist 例
Heart.css - シングルページアプリケーションに。スマートフォン/タブレット向けデザインフレームワーク MOONGIFT
最近、CSSフレームワークが多く出てきましたよね。Bootstrapもいいですが、目的やデバイスに応じて選択しても良いのかも知れません。また、あまり多機能なフレームワークは逆に束縛になる可能性もあるので注意が必要です。 スマートフォンやタブレット向けにサイトを作るならばHeart.cssをベースにしても良さそうです。必要最低限の機能に止めつつ自由度を維持してくれているCSSフレームワークです。 Heart.cssの使い方 デモのアドレス帳。これはタブレット向けと言えるデザイン構成の場合です。 こんな感じのモーダルもサポートされています。 編集時の画面。ちょっと表示が違います。 こちらはスマートフォンの場合。 デザインはレスポンシブです。 こちらはAndroid風。タブレットサイズです。 こちらは同じデザインのスマートフォン版。 メニュー表示もサポートされています。 Heart.cssは実用
amazon-url-modifier – Amazonの長ったらしいURLを最低限に短縮
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました AmazonのURLって長いですよね。SEO上の理由だと思うのですが、書籍のタイトルなどがそのまま日本語で入っているのでコピペした時に思い切り長くなって分かりづらいものになります。 そこで使ってみたいのがamazon-url-modifierです。Amazonにアクセスした時に自動的にURLを短くしてくれます。 amazon-url-modifierの使い方 amazon-url-modifierはGoogle Chrome機能拡張で、インストールすれば後は自動で有効になります。 例えば http://www.amazon.co.jp/MOONGIFT-%E7%89%B9%E9%9B%86%E3%80%8C%E3%82%AA%E3%83%BC%E3%83%97%E3%83%B3%E
Webix·多彩なウィジェットを提供するHTML5デザインフレームワーク MOONGIFT
開発者にとってデザインは大きな関門です。だからBootstrapのようなフレームワークに人気が集まります。デザインを気にせずさくさくとWebアプリケーションが開発できれば、もっとプロダクトは増えていくはずです。 そこで今回紹介するのがWebixです。HTML5のウィジェットフレームワークで、アプリ開発に大いに役立つはずです。 Webixの使い方 テーブル。セルの結合やスクロール部分の指定などかなりこだわった表示ができます。 ツリービュー。 ナビゲーション。 動画アップロード。ステータス表示機能付きです。 レイアウト。かなり細かく指定できます。 リスト。 ウィンドウ。ポップアップ。 フォーム。 カレンダー。 テーブル&ツリー。 データビュー。 グラフ。 より作り込まれたデモです。 グラフと表の組み合わせです。 地図、国のリストなど。 ファイルマネージャ。メールでも使えそうですね。 Webix
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
