gtfspy-webviz - GTFSを地図上で可視化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 様々な情報がオープンデータ化し、さらにそれらのデータを共通フォーマット化する動きがあります。共通フォーマットになることで再利用性が高まり、異なる企業や国、自治体同士のデータを連係させられるようになります。 今回はgtfspy-webvizを紹介します。GTFS（General Transit Feed Specification）という公共交通機関の時刻表と地理情報を共通フォーマットにしたデータを可視化するソフトウェアです。 gtfspy-webvizの使い方 例えばこんな感じ。バスが地図上に描かれています。 時系列に沿ってバスが動いているのが分かります。 拡大もできます。色が違うものは遅延でしょうか（すみません、分かっていません）。 データを可視化すると見えてくるものがあります。
React Desktop - Reactを使ってMac OSX/Windowsアプリを開発 MOONGIFT
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を使ってデスクトップアプリを作ることがで
Toggle css bookmarklet·スタイルシートがない状態を確認できるブックマークレット MOONGIFT
SEOはまず文書構造を考える必要があります。スタイルシートで表示はカスタマイズできますが、それはクローラーには理解できませんし、スクリーンリーダーのようなアクセシビリティを考える際にも文書構造はとても大事です。 そこでWebサイトがスタイルシートを解除するとどう見えるのか、それを体験できるのがToggle css bookmarkletです。ブックマークレットなので扱いは簡単です。 Toggle css bookmarkletの使い方 こちらは元のサイト。 ブックマークレットを実行するとこうなります。 トグル、とついている通り再実行すると元に戻ります。 スタイルシートがない状態を確認するにはスタイルシートを無効にして再読込する必要がありましたが、Toggle css bookmarkletを使えばすぐその場で外したり、逆に戻すことができます。便利なツールではないでしょうか。 Toggle
Centrifugo - Go製のリアルタイムメッセージングサーバ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました チャットや通知など、Webブラウザなどとリアルタイムでコミュニケーションしたいと考える場面はたくさんあります。しかし多くのクライアントとリアルタイム通信するための基盤を作るのはとても大変です。 そこで使ってみたいのがCentrifugoです。Goで作られたWebSocketを使ったリアルタイムタイムメッセージングサーバです。 Centrifugoの使い方 まずシステムにログインします。 ダッシュボードです。ノードは一つ動作しています。 メッセージを飛ばします。メッセージはJSON形式で送信します。 受信側ではJSONフォーマットで受け取ります。 元々はCentrifugeという名前で、それをGoで書き換えることでCentrifugoとなったようです。ライブラリはPython/PHP
markdown-pdf - MarkdownをPDFに変換
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Markdownのシェアが増えるのに従って、とりあえずメモはMarkdownでしておくという人も多いでしょう。しかし業務で提出する資料や公開資料などはHTMLではなく、PDFベースでの提出を求められることが多いです。 Webブラウザに出して、それをPDFに変換しても良いですが、それならばmarkdown-pdfを使ってみましょう。markdown-pdfはその名の通り、MarkdownファイルをPDFに変換するソフトウェアです。 markdown-pdfの使い方 markdown-pdfはnpmを使ってインストールできます。 npm install -g markdown-pdf 使い方は以下の通りです。 $ markdown-pdf Usage: markdown-pdf [op
Caddy - HTTP/2対応の開発用HTTPサーバ MOONGIFT
ユーザ向けではなく、開発用途などでHTTPサーバが必要になる機会は多いかと思います。ブログのテーマを編集していたり、静的サイトのデザインをする場合もあるでしょう。そんな時、ぱぱっと使えるHTTPサーバがあると便利です。 RubyやPythonなどでHTTPサーバを立てることもできますが、Caddyを使えばバイナリファイル一つで済みます。しかもHTTP/2サポートです。 Caddyの使い方 CaddyはWindows、Mac OSX、Linux向けにバイナリが提供されています。新しい機能をふんだんに取り入れたHTTPサーバとなっています。実行は簡単で、バイナリをそのままを実行するだけです。 $ ./caddy_darwin_amd64 0.0.0.0:2015 デフォルトで2015番ポート（年数）というのが良い感じです。ヘルプは次のようになっています。 $ ./caddy_darwin_am
DroidKaigi color keynote - マテリアルデザインのKeynoteテンプレート
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました AndroidのUIトレンドといえばマテリアルデザインです。アプリはもちろんのこと、そのアプリのプロジェクトページもマテリアルデザインにしているサイトも多いです。そうすることで全体の統一感が出るでしょう。 そこで勉強会やセミナーなどで使うスライドはDroidKaigi color keynoteを使って作ってみましょう。マテリアルデザインのKeynoteテンプレートです。 DroidKaigi color keynoteの使い方 DroidKaigi color keynoteを開いてみます。DroidKaigiで使われたとあってAndroidカラーです。 多くのマスターが登録されています。 例えばセクションを切り替えるのに使えそうなデザインです。 DroidKaigi color
material - マテリアルデザインを行うベースにどうぞ
Googleの提唱するマテリアルデザインはAndroidだけに止まらず広がりを見せています。特にWebデザインは相性が良いようで、フラットにしたけれどクリッカブルな場所が分からなかったり、あまりに簡素化されたデザインでかえってユーザを混乱させてしまうことがあります。 そんな時にマテリアルデザインを使うことでユーザビリティの高いサイトを構築できるでしょう。そこでベースに使ってみたいのがmaterialです。 materialの使い方 materialはフレームワークと言うよりもテンプレートに見えます。 materialはまさにGoogleでよく見られるようなデザインを作ることができます。グリッドなど、フレームワークによくある部品はありませんが、十分にこったデザインのサイトを作ることができるでしょう。 materialはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア
Jdoc - JSON SchemaからAPIドキュメントを生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました JSONがWeb APIのデータ送受信フォーマットとして活用されるようになると、受け取る側と発信する側でその内容が適切であるかどうか検証する手段が必要になります。それがJSON Schemaです。 2009年頃に登場したようですが、当時は面倒がってあまり使われてきませんでしたが、JSONの普及ともとに注目が集まっています。そんなJSON Schemaを開発者にも優しいフォーマットに変換してくれるのがJdocです。 Jdocの使い方 JdocはRubygemsからインストールできます。 $ gem install jdoc 使い方としてはjdocコマンドにスキーマのパスを渡すだけです。 $ jdoc spec/fixtures/schema.yml # Example API * [
Notify.js·HTML5のデスクトップ通知を手軽に実装できるJavaScriptライブラリ MOONGIFT
HTML5の新しい機能の一つにデスクトップ通知があります。ブラウザ上だけでなく、デスクトップに通知が出せるのでメッセージやチャット、お知らせを配信するのにぴったりです。とは言え実装方法が面倒そうで手を出していないという人も多いでしょう。 そこで使ってみたいのがNotify.jsです。各ブラウザのデスクトップ通知をラッピングし、手軽に扱えるようにしたライブラリです。 Notify.jsの使い方 Notify.jsを使っている場合、以下のようなコードを書きます。 var myNotification = new Notify('Yo dawg!', { body: 'This is an awesome notification', notifyShow: onNotifyShow }); function onNotifyShow() { console.log('notification
Gitonomy – PHP製のGit管理サーバ
おお、これは企業で使えそうですよ！ 企業によっては外部にソースコードを預けられないため、自社でGitサーバを構えているところも多いでしょう。しかしそうなると管理画面が欲しくなります。GitHubの管理画面は優秀で、ああいったWebブラウザ上でリポジトリの情報を見たいと思うはずです。 そこで使ってみて欲しいのがGitonomyです。デザインの格好いい、Gitリポジトリマネージャです。 Gitonomyの使い方 GitonomyはPHP + Symfonyの組み合わせで作られていて、Webブラウザ上でGitリポジトリの操作が一通りできるようになっています。ユーザはプロジェクト単位にグループに入り、そこで権限管理される仕組みです。 ソーシャル機能はありませんが、企業ユースであれば十分ではないでしょうか。社内でGitサーバを立てている場合はぜひ導入を検討してみてください。 GitonomyはPHP
Stylo - 体験必須！Webアプリケーションデザインツール MOONGIFT
デモがありますのでぜひ実際触ってみるべき！ Webのオーサリングツールと言えば長らくDreamweaverが中心でした。それ以外になると一気に手打ちになってしまったりします。最近ではCSSフレームワークを用いることも多いので、それでもさして不便ではありません。 とは言えWebアプリケーションのような複雑なUIを考えた場合、やはりオーサリングツールが欲しいところです。さらに言えばDreamweaverよりも柔軟にデザインができるものが。そんなツールを願っている方に見て欲しいのがStyloです。 これが画面です。Webベースだと思えないほど充実した機能を備えています。 大きさを変えたり、文字を入力したり。 オブジェクトをドラッグした時に隣接するオブジェクトの上辺や中心にスナップする補助線が出てくれるのが格好いいです。 色の変更はピッカーを使って。透明度まで決められるのがいい感じですね。 半透明
Bootstrapベースの管理画面用テンプレート·Charisma MOONGIFT
CharismaはHTML5/JavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 Webシステム開発において意外と不遇なのが管理画面です。内部の人が使うものなので適当に作られるケースが多くなります。そこで使ってみたいのがCharismaです。リッチな管理画面をBoostrapをベースに作り上げる事ができます。 ウィジェットがついた、リッチな管理画面です。ここまで恵まれているケースは早々ないでしょう。 ドラッグ&ドロップによる配置変更もサポート。 折り畳んで隠す事もできます。 グリッドは細かくサポートされています。 カレンダー。システム内部のデータをマッピングすると見通しが良くなりそうです。 メンバー一覧。検索やラベルもあって便利そうです。 ギャラリー。サムネイル写真をきれいに並べています。 タイポグラフィ。様々なタグをサポートしているので奇麗
Titaniumアプリにも素敵なフラットUIを·TiFlatUIKit MOONGIFT
TiFlatUIKitはTitanium用、Objective-C製のオープンソース・ソフトウェア（MIT License）です。 iOS7ではフラットなUIが導入されます（とはいえ独自のフラットさですが）。それは今後新規で作られるアプリ全体に言えることで、Titaniumも同じです。しかしいち早くフラットUIを取り込んでいきたい方はTiFlatUIKitを使ってみましょう。 緑、赤、オレンジ、黄色、青、白とはっきりとした色合いになっています。 トグルスイッチをはじめ、各コンポーネントはきちんと動きます。 ローディングは自動で動き続けています。 アラートです。こちらも色調がはっきりとしています。 TiFlatUIKitを使い、TiFlatUIKitでコンポーネントを呼び出すとフラットUIなデザインを実現できます。ボタン、スイッチ、ステッパー、タブバー、スライダー、アラートビュー、プログレス
node.jsを組み込んでローカルアプリケーション風に動作·node-webkit MOONGIFT
node-webkitはWindows/Mac OSX/Linux用のオープンソース・ソフトウェア（MIT License）です。 nodeは一般的にサーバサイドの技術で、サーバを立ててその上で実行されます。しかしnode.jsを使ってクライアント向けのアプリケーションが作れたらとても便利そうです。そんな夢を実現してくれるのがnode-webkitです。 こちらはデモアプリ。ブラウザはChroniumになります。 こんな感じでHTML/JavaScript/CSSで作ったアプリケーションを実行できます。 実行結果です。面白いのはJavaScriptではなく、node.jsのライブラリを組み込めることでしょう。 node-webkitはnpmで組み込む類のソフトウェアではありません。Chroniumをベースにnodeを動かせるように組み込んだソフトウェアです。Windows/Mac OSX/
Bootstrapで物足りなく感じているウィジェットをまとめて提供·Fuel UX MOONGIFT
Fuel UXはBootstrap用、JavaScript/CSS製のオープンソース・ソフトウェア（MIT License）です。 Bootstrapを使ってWebアプリケーションを開発していると、どうしても足りないコンポーネントが出てきます。ネットで探せば見つかるのですが、組み合わせている内にバランスが悪くなってしまいます。そこで使ってみたいのがFuel UXです。 様々なウィジェットが提供されています。まずチェックボックス。 コンボボックス。選択した情報が取得しやすいです。 データグリッド。検索でのフィルタリング、ページネーションもサポート。 検索すると右側に×ボタンが出ます。分かりやすいですね。 タグ。×ボタンも出ていて消すのも簡単です。 検索ボックス。 スピナー。上下のボタンを使って値をインクリメントできます。 ツリー。エクスプローラライクな表示が実現できます。 ウィザード。パン屑
HTML/JavaScriptを使ってAndroidモックアップアプリをさくさく作ろう！·Fries MOONGIFT
FriesはHTML/JavaScriptを使ってAndroidモックアップアプリを開発できるソフトウェアです。 Androidの普及はiOSを抜き去り、アプリもどんどん増えています。そんな中にあって必要になるのが素早くAndroidアプリを作る技術です。今回はWebブラウザを使ってモックアプリを作っていけるFriesを紹介します。 デモです。左側にAndroid端末のモックが出ています。 シンプルなタイトルを表示した例。 メニューを追加した例。 メニューアイコンをタップするとメニューが表示されます。 タブ。 ボタン。 リスト。 複数行のリスト。 iScrollにも対応しています。 Friesを使って作法に則って進めるとAndroid 4.0系のUI風モックアップアプリが簡単に作成できます。簡易的に作成できるなら、どんどん試して色々な機能を試すことができます。さらにPhoneGapなどでラ
Web上でGitの使い方をレクチャー·Learn Git Branching MOONGIFT
Learn Git BranchingはWebベースでGitの使い方を学べるソフトウェアです。 企業においてもバージョン管理にGitを利用するケースが増えてきました。しかしその機能を使いこなせていないことも多いのが事実です。そこでGitリポジトリ、特にブランチに関して学べるLearn Git Branchingを使って学習してみましょう。 トップページです。 自動的にコマンドが入力されて、右側のツリーが更新されていきます。 解決するとコミットが飛んでいきます。 ここからが本番です。 基本的にチュートリアルの通りに進んでいくのみです。 まずコミットから。 入力中は答えが見えないように隠されます。にくい演出です。 Learn Git Branchingは実際のコマンドを入力しながら、それがツリーにどういう影響を与えるかをビジュアル的に確認できます。Learn Git Branchingを通して
Windowsプログラマー向け。他のアプリケーション情報を取得·Window Detective MOONGIFT
Window DetectiveはWindows開発者用のアプリケーションスパイツールです。 Windowsのプログラミングをしている時に、他のアプリケーションを操作したり、そこから情報を読み取りたいと思うことがあります。そんな時にウィンドウハンドラを取得したり、制御する必要が出てきますが、そんな時に使えそうなのがWindow Detectiveです。 メイン画面です。 プロセスごとにするとアプリケーションをドリルダウンできます。 ウィンドウ情報がよく分かります。 プロパティを変更することもできます。 システム情報も分かります。 実行中のアプリケーションの情報を取ることもできます。 初期設定です。 ウィンドウ制御に関する情報の他に、サイズやフォント、プロセスなども取得できます。ウィンドウのメッセージをモニタリングしたり、詳細に検索したりする機能もあります。Windowsアプリケーション開発
作ろう！HTML5用Webアプリケーションフレームワーク·Brunch MOONGIFT
BrunchはHTML5によるWebアプリケーション開発を支援するnode.jsフレームワークです。 HTML5をビジネス向けに率先して使っていくのは難しいと思いますが、それでも試してみたいと考えている人は多いはずです。そこでBrunchを活用してみると良いでしょう。HTML5ベースのWebアプリケーションを開発するための仕組みをまとめて提供してくれます。 Twitterのデモアプリです。 Todoアプリのデモです。 コードの記述に際してはJavaScript/CoffeeScript/IcedCoffeeScript/Royが使えます。CSSはSassやLESSを使うこともできます。ベースを作ってくれるコマンドがあるので、それを使いつつ後は既存のデモアプリを参考に作っていくとWebアプリケーションを素早く作ることができます。 Brunchはnode.js/JavaScript製、MIT
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
