docker-lambda - Dockerを使ったAWS Lambdaクローン
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました AWS Lambdaを使えばちょっとしたコードを実行して即座に終わるといった処理が簡単に作れるようになります。Webサービスのように恒常的に使うものではないけれども（API Gatewayを合わせればできますが）、コールしたらすぐに実行できるという手軽さがウリです。 そんなLambdaの開発時に使えるソフトウェアがdocker-lambdaです。Lambda風に実行できるDockerコンテナです。 docker-lambdaの使い方 例えばこんな感じのコードを書きます。 // Just a test lambda, run with: // docker run -v "$PWD":/var/task lambci/lambda exports.handler = function
Cleave.js - Web上での入力にフォーマットを指定 MOONGIFT
HTML5のinput typeはdateやtimeなどの指定によって入力できる情報が変わるようになり、UXが改善されています。しかしさらに細かい入力制御を行う場合にはJavaScriptに頼らないといけません。 よりユーザビリティの高い入力インタフェースを実現したいならばCleave.jsを使ってみるのはいかがでしょう。 Cleave.jsの使い方 よくあるクレジットカードの入力フォームです。 桁数の制御はもちろん、カードの種別も出るようになっています。 電話番号。日本の場合は特に制御はなさそうですが、数字のみ入力できます。 日付の入力です。スラッシュが自動的に入力されます。 3桁ごとにカンマが入る入力です。 指定した文字ごとにスペースを空けたり、指定した文字（ダッシュなど）を追加できます。 郵便番号や電話番号の入力でダッシュが入っているからエラーなどという酷いUIのサイトはたくさんあり
re:dash - オープンソースのデータプラットフォーム
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 世の中ではオープンデータの流れが進んでいます。企業はもちろんのこと、政府や自治体においてもデータを再利用しやすい形でオープンにしています。 そんなデータをみんなにとって使いやすい形で公開、シェアできるのがre:dashです。 re:dashの使い方 ダッシュボードです。すでに公開されているデータがたくさんあります。 グラフで描画されています。 CSVとして確認もできます。 ピボットテーブルも用意されています。 CartoDBとの連携もできます。 こんな複雑なグラフも描けます。 自分で追加もできます。データソースは一般的なデータベースはもちろん、BigQuery、Googleスプレッドシート、ElasticSearch、Amazon Redshift、Hive、InfluxDB、Tr
STF – 無数のAndroidデバイスをWebブラウザから操作
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Androidはデバイスの種類が多いのでテストするのも大変です。そのため、一人で全てのデバイスをテストするのが困難で、ついついエミュレータベースでテストしてしまいます。しかし解像度が異なる場合や機能やスペックが異なるために快適な操作が得られるかは分かりません。 そこで使ってみたいのがSTF（Smartphone Test Farm）です。Mac OSXやLinuxにつないだAndroidをWebブラウザから操作できるリモートコントローラです。 STFの使い方 STFをセットアップしたら、Webブラウザからアクセスします。そうすると接続されているAndroidデバイスが一覧表示されます。 クリックするとAndroidの画面が確認できます。この画面上から操作ができます。 アプリを立ち上
Primer - GitHub製。みんなで使えるデザインフレームワーク MOONGIFT
企業やプロジェクトによってデザインガイドラインは自ずと必要になってきます。それが社で働くデザイナーの共通認識になる訳ですが、例えばFacebookアプリを作る際にはボタンやデザインをFacebookっぽくしたくなるのではないでしょうか。つまりデザインガイドラインは社内だけでなく社外の人にとっても有益なのです。 そこで登場したのがPrimerです。PrimerはGitHubが作り、使っているデザインガイドラインになります。 Primerの使い方 スクリーンショットを多めで紹介します。まずはグリッド。 ヘッダー。h1〜6まで対応。 テキスト。若干小さめ？ インラインテキストの装飾。 ボタン。ここはGitHubっぽいですね。 ボタングループ。こういうのもGitHubで使われていますよね。 フォーム。シンプルです。 フォームグループ。縦に並べる時に使えます。 メニュー。アイコンはオプションです。
Artoo - ハードウェアプログラミングを楽しむためのRubyライブラリ MOONGIFT
IoTという単語が盛んになっています。まだキラーアプリケーションが出ていないようにも見えますが、何か一つの発見が一気に普及を後押しするかも知れません。 そんなハードウェアデバイスを共通したインタフェースで操作できるようにしてくれるライブラリがArtooです。これからハードウェアプログラミングをはじめたいと思っている方はぜひ使ってみてください。 Artooの使い方 例えばスマートウォッチのPebbleを操作する場合、次のようにライブラリをインストールします。 $ gem install artoo-pebble これとは別でPebble側にもwatchbotというアプリをインストールする必要があります。 インストールが終わったら、コードを書いてみます。 require 'artoo' connection :pebble, :adaptor => :pebble device :watch,
highlight.js - 100種類の以上の言語に対応したコードハイライター MOONGIFT
ブログやWebサイトでプログラミングコードを載せる際に必要になるのがハイライト処理です。単純にコードをそのまま載せても可読性はとても低いです。ハイライトライブラリを使って、見やすくすべきです。 個人的にはGoogleが作っているgoogle-code-prettifyをよく使っていたのですが、highlight.jsも使いやすそうです。 highlight.jsの使い方 左側のコードが表示例。テーマも用意されています。 Apacheの設定ファイルも対応しています。 CoffeeScriptにももちろん対応。 Diff。 HTTPヘッダー、iniファイルにも使えます。 Apacheがあればnginxももちろんあります。 highlight.jsは112言語、49のテーマが用意されています。HTML/JavaScript/スタイルシートのようにマルチ言語に対応したハイライトが行えます。言語も自
DevOOPS - 多数のパターンを用意したBootstrap管理画面
デザインでシステムの品質が決まるわけではありません。しかし、それでも全くデザインされていないシステムよりも見た目が整っている方が安心して使えるでしょう。それは管理画面でも同様です。 通常、管理画面は利用者が限定的なため、デザインが適当になってしまいます。そんな寂しい管理画面もDevOOPSを使えば一気に見た目が向上するでしょう。 DevOOPSの使い方 DevOOPSには多くのテンプレートが用意されています。これらを組み合わせるだけで格好良い管理画面ができあがりそうです。Bootstrapベースなので、カスタマイズもそれほど難しくはないと思います。 DevOOPSはHTML5/JavaScript製、GPL v3のオープンソース・ソフトウェアです。 devoopsme/devoops
Materialize - マテリアルデザインのためのCSSフレームワーク MOONGIFT
レスポンシブでWebデザインを組むのは当たり前、今のトレンドはマテリアルデザインにあるという時代になってきました。フラットUIを踏襲しつつ、アニメーションを効果的に使うことでさらにユーザビリティ高いデザインを可能にします。 主にモバイルアプリ用に使われていますが、Webデザインにおいても十分利用が可能です。今回はマテリアルデザインを実現するスタイルシートフレームワーク、Materializeを紹介します。 Materializeの使い方 今回はスクリーンショット多めに紹介します。 Materializeはレスポンシブかつマテリアルデザインのフレームワークになっています。開発の高速化、ユーザ体験重視、ドキュメントとサンプルを多めにして学習コストを低くするといった特徴があります。 MaterializeはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア（MIT Lic
Octotree·GitHub利用者は必見！GitHubでツリー表示 MOONGIFT
GitHubのUIは先進的で、かなり見やすいものです。初心者にも分かりやすく使いやすいのですが、毎日のようにGitHubを使っている人たちにすればもっと素早くファイルを見ていけるようにしたいと思うでしょう。 そこで使ってみたいブラウザ機能拡張がOctotreeです。ブラウザ画面の左側にファイルブラウザ機能が追加されます。 Octotreeの使い方 OctotreeはGoogle Chrome、Firefox、Safari向けに機能拡張/アドオンが提供されます。 インストールされた状態で任意のリポジトリに行くと、このようにファイルツリーが左側に表示されるようになります。 フォルダを開いてより深い階層のファイルへも素早くアクセスできます。 左側の表示ではブランチを切り替えられませんが、通常のGitHub側でブランチを切り替えると左側のツリーもそれに伴ったものに変更されます。また、プライベートリ
BootstrapベースのWebアプリケーションウィザード·Bootstrap Application Wizard MOONGIFT
Bootstrap Application WizardはBootstrap用のアプリケーションウィザードフローを提供するライブラリです。 Bootstrapを使ってWebサービスを提供するサイトが多くなってきました。今回はその一つ、Bootstrapを使ってウィザード風の流れを実現してくれるライブラリ、Bootstrap Application Wizardを紹介します。 フローティングでウィザードが表示されます。 次へを押して順番に進めていきます。 左下のステータスバーが徐々に進んでいます。 完了しました！ Bootstrap Application Wizardではwizardというメソッドを使って一つ一つをスライド風に切り替えながら処理を選べるようになります。入力チェックも内蔵されています。そして最後にデータが飛んでくるのでサーバ側で処理して返却すれば良いだけです。とても手軽です。
OAuth認証を一手に行うOAuth.ioのJavaScriptクライアント·oauth-js MOONGIFT
oauth-jsはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 ソーシャルなサービスが増えるのに伴ってOAuthプロバイダーはどんどん増えています。OpenIDと違って、同じ仕様で全てがこなせないのが辛いところです。そこで使ってみたいのがOAuthをまとめてくれるOAuth.ioで、さらにそれを簡単にしてくれるのがoauth-jsです。 デモの画面です。70を越えるプロバイダが利用できます。 ポップアップ版による実装です。 ウィンドウが閉じるとデモの画面でトークンが表示できています。 GitHubなどもポップアップにできます。 プロバイダによって多少のデータフォーマットの違いはありますが、概ね同じ形のようです。 oauth-jsを使うとリダイレクト方式とポップアップ方式を簡単に切り替えて使えます。いずれの形にしてもサーバサイド
Bootstrapベースの管理画面用テンプレート·Charisma MOONGIFT
CharismaはHTML5/JavaScript製のオープンソース・ソフトウェア（Apache Licnese 2.0）です。 Webシステム開発において意外と不遇なのが管理画面です。内部の人が使うものなので適当に作られるケースが多くなります。そこで使ってみたいのがCharismaです。リッチな管理画面をBoostrapをベースに作り上げる事ができます。 ウィジェットがついた、リッチな管理画面です。ここまで恵まれているケースは早々ないでしょう。 ドラッグ&ドロップによる配置変更もサポート。 折り畳んで隠す事もできます。 グリッドは細かくサポートされています。 カレンダー。システム内部のデータをマッピングすると見通しが良くなりそうです。 メンバー一覧。検索やラベルもあって便利そうです。 ギャラリー。サムネイル写真をきれいに並べています。 タイポグラフィ。様々なタグをサポートしているので奇麗
Bootstrap Admin Theme - Bootstrap3に対応した管理画面テンプレート
これは知っておいて損はないでしょう！ Bootstrapの便利な使いどころとして管理画面があります。管理画面は限られた関係者しか使いませんのでBootstrap臭がしても気にすることはありません。それなりの表示がすぐに実現できるのは使い勝手を向上します。 しかしそんな適当な範囲を超えて実用性のある管理画面を実現できるBootstrapテンプレートがBootstrap Admin Themeです。Bootstarp 3系に対応していますので最新のウィジェットもばりばり使えるでしょう。 Bootstrap Admin Themeの主なページとしては、 ログイン ダッシュボード カレンダー グラフ ボタン/アイコン WYSIWYGエディタ フォーム/ウィザード テーブル その他ウィジェット が用意されています。これだけあれば後は組み合わせるだけで（Bootstrap本来の機能も使いつつ）リッチな
Alasql.js - オンメモリで動作するJavaScriptデータベース MOONGIFT
JavaScriptを活用したWebアプリケーションを開発している際に、一時的に保存したいデータをどのように扱うかは大きな問題です。何となく変数や配列、ハッシュに保存してしまいがちですが、そのデータの取り出しや更新が面倒だったりします。 そこで使ってみたいのがAlasql.jsです。JavaScriptだけで作られたクライアントサイド向けのSQLデータベースになります。 Alasql.jsの使い方 使い方の例。データを配列で放り込んで、SQLで取り出せます。 デーブルの作成を含めてSQLが書けます。 データはlocalStrageに保存することもできるので、再読込時に復元も可能です。 Alasql.jsはHTML5仕様の中で検討されていたWeb SQLとは異なる実装で、オンメモリで動きます。高速で動作し、かつデータはlocalStrageに保存しておくこともできるので容量は小さいながらも永
kuromoji.js - Webブラウザ上で分かち書き！ MOONGIFT
テキストから意味を読み取るというのは非常に難しく、そのための専用ソフトウェアが存在するほどです。そしてテキスト解析手法の一つとして知られているのが分かち書きです。日本語であればChasenがよく知られています。 kuromoji.jsはそんな分かち書き処理をJavaScriptで行ってしまおうというソフトウェアになります。KuromojiというApache財団のオープンソース分かち書きエンジンをJavaScriptにポーティングしています。 kuromoji.jsの使い方 こちらはデモです。Webブラウザベースで動作しています。nodeでも使えます。 適当な文章をリアルタイムに分かち書きできます。 kuromoji.jsは辞書ファイルをAjaxで取得しています。そのためサイズは大きくなりますが、分かち書きの精度はとても高くなります。サーバサイドで辞書を用意したり分かち書きエンジンを用意する
Hound·もの凄く簡単に使えるソースコード検索エンジン MOONGIFT
ソースコードを検索する際には何を使っていますか。GitHubの検索を使う人もいるでしょうし、grepで検索する人もいます。しかし好みの条件がつけられなくて不便に感じることも多いでしょう。 そこで使ってみたいのがソースコード検索エンジンです。Houndはもの凄く手軽に使えて高機能な検索エンジンとなっています。 Houndの使い方 インストールは以下のような手順となっています。 git clone git@github.com:etsy/Hound.git export GOPATH=`pwd` go run src/hound/cmds/houndd/main.go 実際にはrunを実行する前にconfig-example.jsonを編集してconfig.jsonとします。内容は以下の通りです。 { "dbpath" : "data", "repos" : { "SomeRepo" : {
rails-dev-box - VagrantでRails開発環境を作るならこれ！ MOONGIFT
最近は開発環境を個々人のコンピュータ上には構築せず、仮想環境を使うようになってきました。そうすることでローカルコンピュータの環境に左右されず、複数プロジェクトによってライブラリバージョンがコンフリクトすることもありません。もちろん多少遅くなりますが、十分許容範囲になっています。 ということでこれからRailsのプロジェクトをはじめるのであればベースに使ってみたいのがrails-dev-boxです。Vagrant向けにRuby on Rails環境を整えてくれます。 rails-dev-boxの使い方 Vagrantを使いますので、Vagrant自体はもちろんVirtualBoxのインストールが必要です。 終わったらGitリポジトリをクローンします。 $ git clone https://github.com/rails/rails-dev-box.git 後はVagrantを起動するだけ
Gumby - Bootstrapの強力なライバルになるか！？シンプルかつ強力なCSS3フレームワーク MOONGIFT
CSS3フレームワークは数多くなってきたのでその特徴をちゃんと掴んでおかないといけないですね。 GumbyはSassを使ったCSS3フレームワークです。他のフレームワークと同じようにレスポンシブ、モバイルフレンドリーになっています。その特徴を見ていきましょう。 まずデスクトップからです。 ヘッダーバー。フラットだったり、幅が固定だったりと色々な形式が想定されています。 タイポグラフィ。可読性高いです。 リストだけでも黒丸、白丸、ドット、数字など多数用意されています。さらに定義リストまで！ ボタン。サイズ、色、形が様々です。片方だけ丸い、なんて便利そうですね。 インジケーターやラベル、アラート。こういうのもよく使いますよね。 フォーム。基本的にplaceholderを使った表示になっているようです。 テーブル。角丸サポートです。 タブ。幅が設定できます。 縦のタブもあります。 ドロワー。クリ
これはnode.jsの時代が来るか！？全て揃ったnode.jsフレームワーク·Tower.js MOONGIFT
Tower.jsはフルスタックのnode.js用Webアプリケーションフレームワークです。 こ、これはやばい…。ついにnode.jsの時代が来るかもしれない、そう感じさせるWebアプリケーションフレームワークがTower.jsです。 インストールはnpmで簡単にできます。 まず新しいアプリケーションを作成します。 Scaffoldで簡単にコントローラ、モデル、ビューを生成。 生成された際の構成はこんな感じです。 towerコマンドのオプションです。 Webサーバを立ち上げ場合です。 Tower.jsはMongoDBをデータベースに、Redisはバックグランドジョブ、CoffeeScriptをメインの記述に使いつつ、Jasmineをテストフレームワーク、jQueryも使えるフレームワークです。メール、マイグレーション、MVC、RailsばりのO/Rマッピング、バリデーション、ルーティング、B
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
