DevTools Timeline Viewer - 開発者ツールのパフォーマンス結果を共有/閲覧 MOONGIFT
Webページを表示するまでには様々な処理が行われています。DOM構築、HTMLのレンダリング、JavaScriptなど様々な処理が行われた結果、一つの画面を表示します。さらにWebアプリケーションであれば、その画面のまま要素が変化します。 そうした中でパフォーマンスを測定する機能がGoogle Chromeにありますが、その結果をみんなで共有できるのがDevTools Timeline Viewerです。 DevTools Timeline Viewerの使い方 開発者ツールのパフォーマンスタブで測定します。その結果ファイルをDropboxやGoogle Driveに置きます。 DevTools Timeline Viewerでファイル指定することで、そのパフォーマンス測定結果をみんなで閲覧できます。 パフォーマンスの問題が何らかの環境に依存していた場合、別な人が自分の環境で実行しても再現
pptx-template - PowerPointをテンプレートから生成
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 業務の中でパワーポイントが使われることは少なくありません。グラフィカルでインパクトあるスライドばかりならいいですが、中には同じような見栄えの資料を繰り返し提示しないといけないといった場合もあるでしょう。クライアントごとにデータが異なるスライドなどもそうです。 そんな時に一つ一つ手作りするのは面倒です。pptx-templateを使って一気に仕上げましょう。 pptx-templateの使い方 例です。まずパワーポイントのテンプレートファイル（pptx）を用意します。波括弧で囲まれた部分がテンプレートになります。 こちらが変換後。文字が置き換わっています。 グラフも同様に。こちらはテンプレートです。 出力するとグラフのデータも代わっています。 pptx-templateはデータリソー
Git-todos - TodoをGit管理
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Todoの良くないところは消し込んだ後にデータが見えなくなってしまうことです。そうなるとただ消化するのが目的になってしまい、後で振り返るのが難しくなります。本来はレポーティングこそが大事なはずです。 そこで使ってみたいのがGit-todosです。TodoをGitを使って管理するソフトウェアです。 Git-todosの使い方 Git-todosはGitリポジトリの中で実行します。 $ git-todos add ? Title (Required) テストのタスク ? Description 説明文 ✔ A Todo has been added ✔ You rock! ? listコマンドでタスクの一覧が表示できます。 $ git-todos list 1) テストのタスク 2)
detect.location - iOSの写真を地図に紐付け MOONGIFT
iOSではプライバシーの都合上、位置情報へのアクセスにはユーザの許可が必要になっています。しかし他にも位置情報を取る方法があります。それは写真です。写真にはEXIFとして位置情報が埋め込まれているので、そこから様々な情報にアクセスできます。 それを可視化してくれるのがdetect.locationです。面白い情報がたくさん取れます。 detect.locationの使い方 まず最初に写真ライブラリへのアクセス権が必要です。 これまでに撮影した場所にピンが立ちます。 さらにルートを出す機能もあります。これは位置情報と時間を使っています。 さらに飛行機、電車、車での移動だけをピックアップ。 確かにバイク（トゥクトゥク）に載っています。 さらに移動速度の速い順でリストアップします。 一番速いのは飛行機のようです。 detect.locationでは写真から取得したメタ情報を基に、様々な表現をして
Tudu - Todoistクローン
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました MOONGIFTではタスク管理にTodoistを採用しています。かれこれ4年くらいずっと使い続けています。最近ではGoogleカレンダーとの連携機能も追加され、手放せないツールになっています。 しかし企業によっては導入できないケースもあるでしょう。そこで試してみたいのがTudu、Todoistクローンです。 Tuduの使い方 メイン画面です。Todoistの画面に非常によく似ています。 ちゃんとタスクの追加もできます。 #でカテゴリが入力できるのもオリジナルと同様です。 @でラベルが付けられます。 Tuduと本家のTodoistではもちろん機能差があります。有効期限や優先度、担当者の割り当てなどはできません。アクティビティログのような機能もありません。とは言え、UIだけクローンのも
GIFit! - Google Chrome上でYouTube動画をアニメーションGIF化
世にあるアニメーションGIFはとても面白いものが多いです。動画のハイライトシーンだけを切り出して、さらにそれを何度も繰り返し見せることで面白さが増幅します。しかし自分で作ろうと思ったら意外と面倒です。 そこで使ってみたいのがGIFit!です。Google Chrome上で動き、動画はYouTubeを使います。 GIFit!の使い方 インストールすると動画にアイコンが追加されます。それをクリックするとメニューが表示されます。 設定を行ったら画像を生成します。 できあがったら保存します。 例えばこんな感じ。 GIFit!を使うと自分が面白いと思ったYouTube動画から簡単にアニメーションGIFが作成できます。実際の手順としては一秒一秒動画を止めつつ、そのスクリーンショットをつなぎ合わせているようです。 GIFit!はGoogle Chrome用のオープンソース・ソフトウェア（MIT Lice
Timegrid - PHP製の予約管理システム
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました リアルとネットを繋ぐサービスの一つが予約システムではないでしょうか。レストラン、病院、アクティビティ、旅行…多数の予約システムがオンラインにつながり、ネット上から予約できるようになっています。 そんな予約システムを導入したかったらTimegridを検討してみてはいかがでしょう。PHPですぐに導入できそうです。 Timegridの使い方 ログインした後は予約する側か、予約を提供する側かを選択します。 予約を提供する場合、単位時間や提供する曜日を設定します。 ダッシュボードです。この画面上でアポイントメントを管理します。 逆に予約を取る画面ではウィザードに沿って進めていくだけです。 サービスを選択します。複数用意できます。 メールアドレスを入れて完了です。 Timegridは単位時間が
Open API designer - Open API/SwaggerドキュメントをWeb上で作成 MOONGIFT
Swaggerをベースに現在策定が進められているのがOpen APIです。策定されれば多くのソフトウェアがそのフォーマットに対応することでしょう。そうなればAPIエコノミーがさらに広がっていくはずです。 今回紹介するOpen API designerはOpen APIのWebブラウザ上でデザインできるソフトウェアです。 Open API designerの使い方 まだ仕様が定まっていないこともあり、バージョンはSwagger 2.0となっています。 Schemes、Consumes、Produces、Pathsなどをそれぞれ追加できます。 追加した後は表示された項目に合わせて入力していきます。そうすると右側のJSONも更新されます。 複雑なOpen APIドキュメントもさくさくと作れるでしょう。 Swaggerドキュメントの多くはシステムから自動生成されるものです。しかし、時に手作業で書か
Materia Designer - Web APIも設計できるWebアプリケーション開発環境
Webアプリケーションの多くはデータベースと組み合わせます。そしてサーバサイドでHTMLをレンダリングするのではなく、Web APIを使ってコンテンツを取得してJavaScriptで表示します。 そういった最近のよくある開発スタイルを簡単に使えるようにするのがMateria Designerです。 Materia Designerの使い方 ウィザードに沿ってアプリケーションのベースを作っていきます。 データベースを選択します。今はMySQLに対応していませんが近々対応するようです。 エンティティはテーブルです。 テーブルはビジュアル化されて表示されます。 複数のテーブルはカラムをドロップしてリレーションが作成できます。 次はURLを決めてWeb APIを作ります。 表示する情報を設定します。 さらにCRUDを指定して実行します。データのメンテナンスもMateria Designer上ででき
DomainMOD - Webベースのドメイン/証明書管理 MOONGIFT
新しいサービスを作る時に必ずといって良いほど必要になるのがドメインです。広告代理店などではクライアントのキャンペーンサイトを管理するために毎日のように新しいドメインを取得してたりします。その管理は煩雑になりやすいものです。 そこで使ってみたいのがDomainMODです。Webベースのドメイン管理ソフトウェアです。 DomainMODの使い方 DomainMODのデモです。まずログインします。 ログインしました。ダッシュボードで状況が把握できます。 ドメインの一覧です。管理しているサービスや料金、有効期限などが分かります。 編集画面です。 証明書の管理もできます。 証明書の編集です。 ドメイン登録サービスの一覧です。 バルクでドメイン登録する機能もあります。 レポート。SSL登録料金レポートです。 設定画面です。 DomainMODを使えば数多くのドメインおよび証明書が一覧で管理できるように
Helpy.io - Rails製のヘルプデスクサービス MOONGIFT
サービス利用者向けのヘルプデスクは必須の存在です。最近はQ&A形式が増えていますが、全くサービスを知らない人や初学者にとってはFAQの方が使い勝手が良いかもしれません。 そんなヘルプデスク、ヘルプセンターを作成できるソフトウェアがHelpy.ioです。 Helpy.ioの使い方 ユーザ向けのトップページです。よくある形式ですよね。検索もあります。 カテゴリを入ったところです。トピックが並んでいます。 ヘルプの詳細。コードのハイライトにも対応しています。 一番下にディスカッションがあるのが特徴的です。 コメントする場合はユーザ登録が必要です。GitHubがあるのが開発者向けといった感じがします。 続いて管理画面です。まずダッシュボード。 質問の一覧。 質問の詳細。ここで答えられます。 メインコンテンツ。各国語向けにコンテンツが作れるようになっています。 Helpy.ioはよく知られているFA
Rebass - Reactで使えるUIコンポーネント集
ユーザ向けに使うライブラリを使いたいと思うかどうかは、UIが優れているかどうかに大きく左右されます。特にBootstrapが出てきてから、その傾向が強くなっているように感じます。 今回はReactと組み合わせて使うUIライブラリRebassを紹介します。実に57種類（執筆時点）もある、UIライブラリです。 Rebassの使い方 スクリーンショットを多めに、主立ったUIコンポーネントを紹介します。まずはアロー。 アバター。 ラベル。 ブロック。 引用。 パンくず。 ボタン。 丸形ボタン。 ドーナッツ型。 YouTubeの埋め込み。 フォームもあります。インプット。 パネル。 プログレスバー。 レーティング。 ウィザード風に。 スイッチ。 テーブル。 ツールチップ。 Rebassはこの他にもたくさんのUIコンポーネントが揃っています。これだけあれば、Webサイトを自由に作成できることでしょう。
Mobility - スマートフォン用Web/ハイブリッドアプリ向けUIフレームワーク MOONGIFT
スマートフォン向けにWebサイトであったり、Cordovaを使ったハイブリッドアプリを作る場合にはデスクトップ向けとは異なるUIフレームワークを使うのがお勧めです。UIはもちろん、スワイプ操作などのUXも専用の方がユーザビリティが高いでしょう。 今回紹介するのはMobility、軽量なスマートフォンブラウザ向けUIフレームワークです。Bootstrapベースなのでカスタマイズもしやすくなっています。 Mobilityの使い方 Mobilityの主な画面です。まずはトップページ。 ハンバーガーアイコンをタップしてメニューが表示されます。 画面下にはタブバーがあり、画面上部でもメニューに分けた表示ができます。 リスト。画像付きです。 コードも表示できます。 フォーム。 チェックボックスだけでもこんなに多種多様です。 MobilityはスマートフォンネイティブなUIに似たデザインではないので、W
Portia - DOMで指定できるスクレイピングエンジン
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web APIがどれだけ広まろうともスクレイピングの需要はなかなかなくなりません。特にWebサイトがシステム化されるのに合わせて、画面構成が一定のテンプレートに沿って出力されるようになったので、より定型で情報が取得できるようになっています。 今回紹介するPortiaはスクレイピングの基本である取得場所の設定をビジュアル的に行えるソフトウェアです。 Portiaの使い方 PortiaはScrapingHubというWebサービスの中で一機能として提供されています。 こちらがメイン画面です。蜘蛛がモチーフです。 任意のWebサイトを表示します。 そして欲しい情報があるDOMを選択します。 重なって取得もできます。例えばタイトルとリンクといった具合です。 右側に設定が一覧表示されます。 テ
Elemental UI - React用のUIフレームワーク
Reactを使うと、デザイナとプログラマの分業が難しくなります。そこは致し方ない部分もあるのですが、デザインが面倒に感じられてしまいます。 そこでReactで使えるUIフレームワークを使いましょう。今回はElemental UIを紹介します。 Elemental UIの使い方 スクリーンショットを多めに紹介します。まずはタイポグラフィ。 テーブル。 グリッド。 グリッドの形は自由に決められます。 レスポンシブなグリッド。 ボタン。 ドロップダウン型のボタンも。 アイコン。 フォーム。 水平なフォーム。 スピナー。 モーダル。 アラート。 カード。 ページネーション。 ラベル。 Webアプリケーション開発がBootstrapによって一気に伸びたのと同様に、Elemental UIによってReactベースの開発が増えるかもしれませんね。 Elemental UIはReact用のオープンソース・
Ryakuzu - RailsのDBマイグレーションをWeb上で
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Ruby on Railsには便利な機能がたくさんありますが、特に有名なのがデータベースのマイグレーションではないでしょうか。それまでのデータベース管理はとても煩雑なものでしたが、コードでバージョン管理できるのはとても新鮮なものだったと言えます。 今回はそんなマイグレーションをビジュアル化するRyakuzuを紹介します。 Ryakuzuの使い方 Ruby on Railsのプロジェクトに組み込んで使います。インストールすると、 http://localhost:3000/ryakuzu というURLでRyakuzuにアクセスできます。 カラムを増やしたりリネームしたりして、実際にマイグレーションを実行するとところまでWeb上でできます。 現在のデータベース構造をCSVに出力できます
Infinit - クラウド&ローカルを統合するP2Pストレージ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 仕事の中でもクラウドストレージを使うケースは増えています。しかしそれだけで十分ではなく、SSDやファイルサーバなども並行して使われているでしょう。 そんなストレージをまとめて管理できるのがInfinitです。P2Pでストレージをネットワーク化する、そんな仕組みです。 Infinitの使い方 InfinitではAmazon S3、Google Cloud Storage、ローカルディスク、ファイルサーバなどのストレージを結びつけることができます。以下のようなコマンドを打ち、独自のユーザ管理も備えています。 $ INFINIT_DATA_HOME=$PWD/share/infinit/filesystem/test/home/ ./bin/infinit-volume --mount
excel2js - ExcelシートをWeb化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 日本にはExcel職人と呼ばれる人たちがたくさんいます。彼らにかかればどんなドキュメントであってもExcelで作られ、多くの業務システムがExcel VBAを駆使して作られます。 今回はその最高峰とも言える、Excelで作るWebアプリケーションを紹介します。それがexcel2jsです。 excel2jsの使い方 excel2jsはExcelで作られたシートをHTML/JavaScriptにしてくれるソフトウェアです。下の画像は元ファイルになるExcelファイルです。式も埋め込まれています。 それがこんな感じにWebブラウザ上で動くようになります。 Excelで動くものになりますので、サーバサイドと連携するなどというのは難しいでしょう。しかしちょっとした計算処理を行うものであればe
radicast - radikoをPodcasting化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました radikoはそれまでラジオをほとんど聞かなかった人も利用するようになっており、スマートフォンを使って朝夕に聞いている人も多いのではないでしょうか。 そんなradikoはその時しか番組を聞けないのですが、後で振り返って聞きたいと思う人も多いでしょう。そこで使ってみたいのがradicast、radikoをPodcasting化するソフトウェアです。 radicastの使い方 radicastを試す一番簡単な方法はDockerを使うものです。 $ docker run --rm -p 3355:3355 -v `pwd`:/workspace soh335/radicast:latest --config /workspace/config.json --output /workspa
MailSlurper - Web管理画面を備えた開発用メールサーバ
システム開発中においてもメール送信をテストしたいと思うことがあります。さらに本番環境のSMTPサーバを設置していたりすると、ミスした時にとんでもない事態になる可能性があります。十分な注意をしなければならないのがメールシステムの問題です。 そこで使ってみたいのがMailSlurperです。ローカルで動作する、開発用のメールサーバです。 MailSlurperの使い方 MailSlurperを実行すると、Webブラウザ向けの管理画面と開発用のメールサーバが立ち上がります。 メールを送るとWeb管理画面で内容が確認できます。実際には送信されていません。日本語はデコードされないようです。 設定画面です。 MailSlurperを立ち上げておいて、メールを送信するようにすればメールアドレスの確認メールやパスワードリマインダーなどのメールについてもテストしやすくなるでしょう。何より実際には送信されない
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
