Webアプリケーションの画面をさくさく作ろう。UIフレームワーク特集 MOONGIFT
今回はWebアプリケーションの画面作成に関する話です。かつて業務システムというのはエンジニア自身が画面を作ってロジックを実装して提供していました。UIがただコンポーネントを貼付ける程度だったからです。 しかしWebアプリケーションの時代になって、UIの制作が難しくなってきています。デザインの自由度が高いためです。しかし今後さらにWebアプリケーションが活用されていく中ではエンジニアもそれなりの画面を素早く開発できるようになっていかないといけない時代になっています。 そこで今回はUIフレームワーク、多彩なコンポーネントを備えたデザインフレームワークをまとめて紹介します。 iPhone/Android/Windows Phone対応のモバイルWebアプリフレームワーク「ChocolateChip」 モバイルWebサイトをネイティブ風にするUIライブラリは昔から多数存在しますが、今回はその最新版
Bootstrap Admin Theme - Bootstrap3に対応した管理画面テンプレート
これは知っておいて損はないでしょう！ Bootstrapの便利な使いどころとして管理画面があります。管理画面は限られた関係者しか使いませんのでBootstrap臭がしても気にすることはありません。それなりの表示がすぐに実現できるのは使い勝手を向上します。 しかしそんな適当な範囲を超えて実用性のある管理画面を実現できるBootstrapテンプレートがBootstrap Admin Themeです。Bootstarp 3系に対応していますので最新のウィジェットもばりばり使えるでしょう。 Bootstrap Admin Themeの主なページとしては、 ログイン ダッシュボード カレンダー グラフ ボタン/アイコン WYSIWYGエディタ フォーム/ウィザード テーブル その他ウィジェット が用意されています。これだけあれば後は組み合わせるだけで（Bootstrap本来の機能も使いつつ）リッチな
bookShop - HTML/PDF/ePub/Mobiまでこなす電子書籍ジェネレータ MOONGIFT
これは使い勝手良さそう！ 2014年は電子書籍が大いに羽ばたく年になるかも知れません。デバイスは各種揃い、そのためのハードウェア的土壌は整ってきました。サービスも数多く存在し、足りないのはコンテンツです。もっと誰でも簡単に電子書籍を作れる仕組みが必要でしょう。 特にePubを作るのは面倒なイメージがあります。そこで使ってみて欲しいのがbookShop、電子書籍作成フレームワークです。 bookShopはこれ一つでHTML/PDF/ePub/Mobiファイルの作成ができます。基本はHTML5で、PDFの場合はPrinceXMLを使って生成します。 インストールと準備 インストールは簡単でRubygemsを使って行えます。 $ gem install bookshop インストールが終わったら電子書籍プロジェクトを作成します。 $ bookshop new my_new_book そうすると以
AirShow – WindowsでもAirPlayが使えるようになるライブラリ集
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Apple TVが会社にあると、iPhoneやデスクトップをAirPlay機能を使ってミラーリングさせられます。これにより情報を共有したり、アプリの説明をしたりするのがとても簡単になります。 そんなAirPlayのプロトコルを使えるようになるのがAirShowです。Mac OSX用があっても意味がないのだろ…と思ったのですが意外と別な使い道もありそうです。 GUIのMac OSXアプリの場合は正直使い道があるのか分かりませんが、面白いのはJava/PHPのスクリプトがあることです。例えば写真の場合次のように実行できます。 php airplay.php -h hostname[:port] -p file java -jar airplay.jar -h hostname[:por
70を越えるOAuthプロバイダに対応した認証デーモン·OAuth daemon MOONGIFT
OAuth daemonはnode/JavaScript製のオープンソース・ソフトウェア（GNU Affero General Public License）です。 OAuth.ioはフロントエンドエンジニアにとっては便利なサービスと言えますが、セキュリティ的にはOAuthの概念を覆してしまう問題があります。そこでOAuth.ioのコア部分を取り出してオープンソース化したOAuth daemonを使ってみましょう。 管理画面です。まず最初に管理者アカウントを設定します。 次にアプリケーションを作成します。複数作成が可能です。 ドメインも複数指定できます。 そしてプロバイダごとにキーの設定を行います。 例えばこんな感じです。 Tumblrなどになるとどこに設定を行うべきかのヘルプもあります。分かりやすいです。 クライアントID、シークレットを設定します。 その場で試すことができます。認証ダイ
OAuth認証を一手に行うOAuth.ioのJavaScriptクライアント·oauth-js MOONGIFT
oauth-jsはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 ソーシャルなサービスが増えるのに伴ってOAuthプロバイダーはどんどん増えています。OpenIDと違って、同じ仕様で全てがこなせないのが辛いところです。そこで使ってみたいのがOAuthをまとめてくれるOAuth.ioで、さらにそれを簡単にしてくれるのがoauth-jsです。 デモの画面です。70を越えるプロバイダが利用できます。 ポップアップ版による実装です。 ウィンドウが閉じるとデモの画面でトークンが表示できています。 GitHubなどもポップアップにできます。 プロバイダによって多少のデータフォーマットの違いはありますが、概ね同じ形のようです。 oauth-jsを使うとリダイレクト方式とポップアップ方式を簡単に切り替えて使えます。いずれの形にしてもサーバサイド
JavaScriptによる自動振仮名入力·autokana MOONGIFT
autokanaはjQuery/JavaScript製のオープンソース・ソフトウェア（MIT License）です。 フォーム入力というのはユーザにとって相当なストレスになります。ちょっとでも面倒だと思うと諦めてしまいます。そこでなるべくユーザのストレスを減らして入力できるライブラリを用意すべきです。今回はフリガナ入力補助ライブラリautokanaを紹介します。 “な”と入力すると、ふりがなの欄に“ナ”と自動入力されます。 続けて入力して変換。ナカツガワときちんと入力されました。 例えばミスしてバックスペースを押せば、フリガナもその部分が削除されます。 振仮名ではひらがな、片仮名の両方が利用できます。KeyDownのイベントを使っていますので、コピー&ペーストされた文字列に対しては動作しません。また、現時点ではローマ字には非対応とのことです。 MOONGIFTはこう見る 入力フォームは総じ
Bootstrapで物足りなく感じているウィジェットをまとめて提供·Fuel UX MOONGIFT
Fuel UXはBootstrap用、JavaScript/CSS製のオープンソース・ソフトウェア（MIT License）です。 Bootstrapを使ってWebアプリケーションを開発していると、どうしても足りないコンポーネントが出てきます。ネットで探せば見つかるのですが、組み合わせている内にバランスが悪くなってしまいます。そこで使ってみたいのがFuel UXです。 様々なウィジェットが提供されています。まずチェックボックス。 コンボボックス。選択した情報が取得しやすいです。 データグリッド。検索でのフィルタリング、ページネーションもサポート。 検索すると右側に×ボタンが出ます。分かりやすいですね。 タグ。×ボタンも出ていて消すのも簡単です。 検索ボックス。 スピナー。上下のボタンを使って値をインクリメントできます。 ツリー。エクスプローラライクな表示が実現できます。 ウィザード。パン屑
一行の記述で使えるJavaScriptグラフライブラリ·Chartkick MOONGIFT
ChartkickはRailsやそれ以外のシステムで手軽に使えるグラフライブラリです。 Web上にグラフを描こうと思うと途端に面倒な気がしてしまいます。そこで使ってみて欲しいのがChartkickです。Railsとの親和性の高いグラフ描画ライブラリです。 線グラフ。 円グラフ。 棒グラフ。 複数シリーズ（円グラフは対応していません）。 ChartkickはGoogleチャートまたはHighchartsを使ってグラフを描きます。Railsでは1行で出力できていますが、実際にはJSONデータを出力しているだけなのでRailsでなくとも使えます。さらに直接JSON出力ではなく、scriptタグを使ってグラフデータの読み込みを別処理化することもできます。 ChartkickはRuby/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る グ
Bootstrapで使えるWYSIWYGエディタ·bootstrap-wysiwyg MOONGIFT
bootstrap-wysiwygはBootstrap用のリッチなWYSIWYGエディタです。 使い勝手の良さもあってBootstrapを使ったWebサイトが増えています。より便利に使うためには多彩なウィジェットが欠かせません。今回はBootstrap用WYSIWYGエディタ、bootstrap-wysiwygを紹介します。 シンプルなUIで使い勝手が良さそうです。 文字の装飾は簡単にできます。ツールチップが出るのもいい感じです。 画像の埋め込みにも対応しています。ファイルフォームを使って画像を読み込む形になっています。 URLの埋め込み。ダイアログではないのがポイントです。 文字サイズの変更もできます。 bootstrap-wysiwygではさらにマイクアイコンをクリックして音声によるテキスト入力にも対応しています（Google Chromeの機能を使っています）。さらにホットキーへの対
メールのためのレスポンシブWebデザインフレームワーク·Antwort MOONGIFT
AntwortはレスポンシブなHTMLメールを実現するスタイルシートフレームワークです。 HTMLはWebブラウザを使って閲覧するのに用いるのが基本ですが、他にも使われることがあります。その一つがHTMLメールです。独自の知識が必要になることもあるのですが、Antwortを使えばそのエッセンスだけすぐに得ることができます。 サンプルデザインです。 スマートフォンではこのように見えます。 デスクトップ、スマートフォンに対応しています。 Antwortはレスポンシブなデザインになっています。デスクトップで見た場合もスマートフォンで見た場合もカラムの構成は違っても情報は正しく伝達できるようになっています。Appleのメール（iOS/Mac OSX）、Gmail、Androidのメール、Outlook 2000/2003/2007、Hotmail、Outlook.com、Yahoo! Mail、A
まるでネイティブのようなUIを実現できる高機能JavaScript UIライブラリ·w2ui MOONGIFT
w2uiはデスクトップ、スマートフォン、タブレットに対応したJavaScript UIライブラリです。 新しいJavaScript UIライブラリの紹介です。名前はw2ui、多数のウィジェットを搭載したUIライブラリとなっています。 レイアウト。 グリッド。 詳細検索対応。 ツールバー。 サイドバー。階層表示に対応しています。 タブ。 フォーム。 ポップアップ。 ツールチップ。 その他ユーティリティ。 w2uiのサイズは37KB（ミニファイ&Gzip）で、これはExtJSの1/12、Kendo UIの1/6となっています。また、jQueryベースという特徴、全てのウィジェットをまとめて提供、IE9、Firefox7、Google Chrome、Safari5に対応となっています。デスクトップはもちろん、タブレットやスマートフォンにも対応しています。 w2uiはJavaScript製、MIT
Seleniumを使ったiPhoneアプリの自動操作テストツール·Appium MOONGIFT
AppiumはiOSのテストを自動化するSeleniumを使ったテストツールです。 iOSのテストはユニットテストが基本と思われます。実際の操作については人が細かくテストを行っているのではないでしょうか。その面倒なUIテストを自動化してくれるのがAppiumです。 実行中です。 文字の入力などは自動で行ってくれます。 テストコード。 AppiumはテストコードをJava/Ruby/PHP/node.js/Pythonで書くことができます。さらにSeleniumを使って開発されているのも特徴です。テストは分離しているため、既存のアプリに何らかのSDKを組み込んだりする必要はありません。近く、Androidもサポートされるそうです。 AppiumはMac OSX用のオープンソース・ソフトウェア（Apache License 2.0）です。 MOONGIFTはこう見る iPhoneを自動操作して
Androidアプリを開発する際のベースにどうぞ！·Android Bootstrap MOONGIFT
Android Bootstrapは多彩な機能が実装されたAndroidアプリ開発ベースです。 Webサービス開発時においてBootstrapが活躍しています。そういったベースがあると開発がとてもスムーズになるのではないでしょうか。そこで今回はAndroid Bootstrap、Androidアプリ開発のベースを紹介します。 ログイン画面。 ユーザ一覧。 ニュース。 タイトルをタップすると記事詳細が表示されます。 チェックイン。 タップすると地図が表示されます。 メニューはログアウトのみ。 紹介動画です。 Android Bootstrapはフラグメント、ページャー、アカウント管理などの実装に加え、Android Mavenプラグイン、RoboGuice 2、ActionBarSherlock 4、ViewPagerIndicator、http-request、GSON、Robotiumと
Railsの中にあるかのようにアプリを開発·Kanna MOONGIFT
KannaはPhoneGapとRailsを組み合わせてiOSアプリの開発ができるライブラリです。 PhoneGap（Cordova）を使うとHTML/JavaScript/スタイルシートでスマートフォンアプリを開発できるようになります。そんなPhoneGapアプリの開発をよりスムーズにしてくれるのがKannaです。 ベースを生成しました。 次にiOSのベースを生成します。 シミュレータで立ち上げました。 KannaはRailsのようにスマートフォンアプリを開発できるようになります。既に数多あるスマートフォン向けのHTMLテンプレートやJavaScriptフレームワークを組み合わせることで、シンプルなスマートフォンアプリを手早く開発できるようになるでしょう。 KannaはRuby製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る iOSアプリの開発につ
CMSに組み込みたい、見たままにページの編集を行うJavaScript·Create.js MOONGIFT
Create.jsはユーザ向け画面をそのまま編集できるJavaScriptライブラリです。 CMSは一般的にユーザ向けの画面と管理画面とが分かれて提供されています。しかし運用時にはユーザ向けの画面を見ながらその場で修正したいこともあるでしょう。その際に使えるライブラリがCreate.jsです。 メイン画面です。この時点では普通に表示されています。 エディターを立ち上げました。Editボタンを押します。 編集可能な部分に色がつきました。 編集中の画面です。 編集しました。 コンソールで見ると編集した内容がJavaScriptのオブジェクトになっているのが分かります。 Create.jsは単体で動作する訳ではなく、編集した内容を別途サーバサイドに送ってDBやファイルを更新する必要があります。ただし、編集可能な箇所を決めたりすることはできるので、運用担当者の編集可能範囲について自由に更新し、保存
Rails開発を補助するGoogle Chrome機能拡張·RailsPanel MOONGIFT
RailsPanelはGoogle ChromeのインスペクタにRails用パネルを追加するソフトウェアです。 Ruby on Railsは開発速度を飛躍的に向上してくれますが、サーバサイドのログとWebブラウザでの表示を交互に確認するのは面倒に感じていました。そこで使ってみたいのがRailsPanelです。 Google Chrome機能拡張をインストールします。別途Rails側でのライブラリインストールも必要です。 サンプルです。インスペクタにRailsPanelが追加されています。 実行されたSQLも確認できます。 レンダリングに使われたファイルも確認できます。MacVimなどであればここからクリックして開けます。 設定です。TextMate、MacVimが対応に上がっています。 RailsPanelを使えば実行されたアクション、使われたテンプレート、実行されたSQLが一目で確認でき
WebサイトのレスポンシブWebデザイン対応具合をチェック·Responsive Design Testing MOONGIFT
Responsive Design Testingは各デバイスのウィンドウサイズごとの表示が確認できるソフトウェアです。 レスポンシブなWebデザインテクニックはオンライン上に多数ありますが、それをどう活かし、どう実現するかは個々のデザインにかかってきます。そしてそれがちゃんと適用されているかどうかは実際に確かめてみるほかありません。その際に使えるのがResponsive Design Testingです。 トップページです。各サイズごとに並んで表示されます。 MOONGIFTで試しました。 768と1024。 縦サイズも指定した場合。 表示サイズが違うのが分かるでしょうか。 Responsive Design Testingを使えばよくあるデバイスの幅に合わせたコンテンツ確認が容易にできます。最小は240、最大は1024まで確認できます。主にスマートフォンやタブレット向けの確認になるでし
ニュースサイトの記事をKindle3に最適化されたePub化·reink MOONGIFT
reinkは任意のWebサイトコンテンツをePub化するソフトウェアです。 AmazonからKindleが発売し、電子書籍の市場が活性化してきました。そこで注目したいのがePubファイルの作成です。外部から提供されるものを読むだけでも良いですが、やはりそこは作成できないと面白くないでしょう。そこで使ってみたいのがreinkです。 生成処理を実行します。 生成したePubファイルです。 記事がオフラインで読めます（記事は任天堂「Wii U」、STMicroとPNIのセンサを採用 - 半導体 - Tech-On！ reinkはプラグインとして各Webサイトに対する生成条件を設定する必要があります。今のところasahi.com、gigazine.net、slashdot.jp、techon.nikkeibp.co.jpに対応しています。これを追加すれば任意のWebサイトのePubファイルが作成で
LINE連携型アプリを開発する際に·LineKit MOONGIFT
LineKitはiOSアプリからLINEへテキストや写真を送付できる連携ライブラリです。 全世界で7,500万ユーザを突破してさらにその勢いを強めつつあるLINE。そんなLINEと連携するアプリを作る際に使ってみたいのがLineKitです。 メイン画面です。 文字が予め入力されています。 画像の送信もできます。 対応しているのはテキストの送信と写真送信になります。デモアプリでは固定のメッセージになりますが、アプリ内から文字を与えてLINEを起動すれば良いでしょう。カメラアプリも撮影した写真をLINEを通じて拡散させるといった使い方ができそうです。なお非公式な実装と思われますのでご注意ください。 LineKitはObjective-C製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る LINEが一気に広がったのはすごいですが、途中からSNS路線に変更し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
