LastingPaper - マルチプラットフォームで利用できる電子書籍リーダー MOONGIFT
スマートフォンやタブレット向けには多くの電子書籍リーダーがありますが、デスクトップ向けにはあまりありません。ePubやPDFによる電子書籍が広まっていく中、デスクトップでも使いやすく読みたい人も多いでしょう。 そんな方に使ってみて欲しいのがLastingPaperです。マルチプラットフォームで使える電子書籍リーダーです。 LastingPaperの使い方 書籍を登録しました。 日本語も問題なく表示できます。 読書カレンダーなるものもあります。 ハイライト一覧。 書籍のタグや、ハイライトの色で絞り込めます。 日本語のハイライトも問題なく扱えます。 LastingPaperはKindleのベストパートナーとあるのですが、筆者が試した限りでは連携する訳ではなさそうでした。単体の電子書籍リーダーとしても十分利用できるので、デスクトップでも電子書籍を楽しみたい方はぜひ使ってみてください。面白いところ
Fiddle - すぐにElectronアプリ開発をはじめられる開発環境
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Electronを使えばWindows/macOS/Linuxなどマルチプラットフォームで動作するソフトウェアがHTML/JavaScript/CSSで作成できます。作ってみたいと思いつつも、環境を整える手間で躊躇してしまっている人もいるのではないでしょうか。 そんな方に使ってみて欲しいのがFiddleです。ダウンロードしてすぐにElectronアプリ開発がはじめられるソフトウェアです。 Fiddleの使い方 Fiddleを起動したところです。 開発環境は3ペインになっています。左側にあるJavaScript、右にあるHTMLを編集するのが基本です。 開発したらElectronアプリとして実行できます。各バージョンのElectronがFiddle上で簡単にダウンロードできます。 実
Gixy - nginxの設定ファイルを静的解析して改善提案
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTTPサーバとしてnginxを使っているケースは多いかと思います。しかし設定に関する情報はまだまだ多くはなく、動くように設定はしても、それがベストなのかどうか判断できない方も多いのではないでしょうか。 そんな方にお勧めなのがGixyです。nginxの設定ファイルを解析して改善案を提示してくれます。 Gixyの使い方 Gixyのインストールは pip でできます。 pip install gixy 後はnginxの設定ファイルを指定するだけです。 $ gixy /path/to/nginx.conf ==================== Results =================== Problem: [host_spoofing] The proxied Host h
jQuery-Tabledit - Bootstrapのテーブルでデータの編集を可能に
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 業務システムといえばテーブルによるデータの一覧表示ですよね。実装すると次に要望にあがるのはデータのフィルタリングであったり、一回更新だったりします。非常に厄介です。 今回はその一部、一覧時におけるデータの編集を手助けしてくれるソフトウェア、jQuery-Tableditを紹介します。Bootstrapのテーブルに対応しています。 jQuery-Tableditの使い方 jQuery-Tableditで表示したところです。右側に編集、削除のアイコンがあります。 クリックするとテキストボックスになって編集可能になりました。 編集完了すると赤くなります。これで編集した行がわかりやすくなります。 さらにダブルクリックしたセルだけを編集状態にすることもできます。 行全体ではなく、指定したセル
TableFilter - HTMLテーブルのフィルタリング
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 業務システムで必ず求められるのがテーブルベースの一覧表示です。件数が少ない時にはただ表示するだけで十分ですが、数百件を越えるようになると様々な要望があがってきます。その一つがフィルタリングではないでしょうか。 HTMLのテーブルに対してフィルタ機能を追加してくれるのがTableFilterです。検索とはまた違う手軽なフィルタリングを実現してみましょう。 TableFilterの使い方 一例です。カラムの上にフィルタリングするテキストボックスが並んでいます。文字を入力してエンターを押せばデータがフィルタリングされます。 リアルタイムではないようですが、そこは改造できるでしょう。 入力はテキストだけでなく、ドロップダウンなども使えます。 より複雑に、ページネーションなども駆使したデモで
MailSlurper - Web管理画面を備えた開発用メールサーバ
システム開発中においてもメール送信をテストしたいと思うことがあります。さらに本番環境のSMTPサーバを設置していたりすると、ミスした時にとんでもない事態になる可能性があります。十分な注意をしなければならないのがメールシステムの問題です。 そこで使ってみたいのがMailSlurperです。ローカルで動作する、開発用のメールサーバです。 MailSlurperの使い方 MailSlurperを実行すると、Webブラウザ向けの管理画面と開発用のメールサーバが立ち上がります。 メールを送るとWeb管理画面で内容が確認できます。実際には送信されていません。日本語はデコードされないようです。 設定画面です。 MailSlurperを立ち上げておいて、メールを送信するようにすればメールアドレスの確認メールやパスワードリマインダーなどのメールについてもテストしやすくなるでしょう。何より実際には送信されない
React Native Playground - React NativeアプリをWeb上でシミュレート
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました React NativeはJavaScript/Reactを使ってiOS（最近ではAndroidにも対応）アプリが書ける技術です。かつてのTitaniumを彷彿とさせますが、特に大きな違いとしてサーバを立てることでコンパイルレスな開発が可能なこと、Google Chromeを使ったデバッグが可能という点があります。 そんなReact NativeアプリをWeb上でコードを書いて動作させて確かめられるのがReact Native Playgroundです。これからReact Nativeを体感したいという方はぜひ使ってみてください。 React Native Playgroundの使い方 サイトのトップには数多くのデモが並んでいます。 こちらが詳細画面。コードと右側にプレビューがあり
Material Cat·猫×マテリアルデザインデモ MOONGIFT
インターネットは猫に支配されています。世の中にはこんなにも猫好きが多いのかと思うほど、猫の写真、動画、アニメーションに溢れています。GitHubのキャラクターだってOctocatです。 というわけで何か注目して欲しいと思ったら猫を混ぜ込んでみるのはいかがでしょう。例えばMaterial Catも単にマテリアルデザインデモではなく、そこに猫を入れたことに価値があるわけです。 Material Catの使い方 Material Catのメイン画面。猫画像がタイル上に並んでいます。 右下にあるシェアボタンをタップすると各サービスが水平に展開されます。もちろんアニメーション付きです。 猫写真をタップすると写真がアニメーションしたり、写真の中の色がピックアップされたりします。 他にも再読込やタップした時のアニメーションが綺麗です。 Material Catはテクニックは確かなものがあります。そこに猫
いけいけ僕らのハリセンボン。コードが公開されたiPhone向けゲーム·Puff Puff MOONGIFT
Puff Puffは2Dスクロール型のiPhone向けアクションゲーム。 Puff PuffはiOS向けのフリーウェア（ソースコードは公開されている）。もしあなたがiOSアプリを開発しており、それで生計をなせるぐらいに収益をあげたいと思っているならばゲームアプリをお勧めする。便利系アプリでは未来がなさすぎる。 ゲーム画面 もちろんよっぽども便利なものであれば収益になるかも知れない。だがそれはごく稀な存在だ。ちょっとしたアプリで買ってもらえるレベルにするのはゲームが一番だ。そしてそんな容易ではないゲーム開発の参考になり得るのがPuff Puffだ。 Puff PuffはiOS向けのゲームをソースコード公開したものだ。ジャンルとしては2Dのスクロールアクションゲームで、魚のハリセンボンを操作する。ピンチ操作で膨らましたり、へこませることで上下に動く。また傾ける事で前や後ろに進む。そしてサメや珊
Chrome DevTools App – Google ChromeのDevTools部分を単体アプリ化
Google ChromeをWebアプリケーション開発に使っている方はたくさんいます。なぜならば、ChromeのDevToolsが便利だからです。ソースを見たり、編集したり、さらにブレークポイントを仕込んで処理をとめたりとWeb開発を大いに加速してくれる存在です。 そんなDevToolsだけを切り離したアプリケーションがChrome DevTools Appです。実用と言うよりも挑戦的な試みではありますが、面白いソフトウェアです。 Chrome DevTools Appの使い方 Chrome DevTools AppはGoogle ChromeのDevTools部分だけをnode-webkitを使ってアプリ化しています。同じようにnode-webkitを使って作ったアプリのデバッグに使える可能性もあるでしょう。ブラウザと密着してしまっているように見えましたが、こうやってデバッグ機能だけを切
UI Tiles·Webサイト全体の画面遷移設計に使えるデザイン集 MOONGIFT
Webサイトを開発する際に使われるのが画面遷移を表現するフローチャートです。例えばコマースであればトップページから商品一覧、カテゴリ一覧や商品のピックアップなどの遷移が考えられます。 深くなってしまう場所がないか確認したり、ユーザ動線が正しく描けているかどうか確認するのに便利です。UI Tilesはそんなフローチャートを作成するのに便利なデザイン集です。 UI Tilesの使い方 UI TilesはPNGの他、PhotoshopやIllustrator形式でファイルが配布されています。 PNG版。画面のモックがたくさんあります。 それぞれ小さいながらも特徴があります。 動画プレーヤ、ポートフォリオページもあります。 PSDはデモも用意されています。 デザイン一覧。 Illustratorも同様です。 UI Tilesを使うと、これまでは単なる四角い枠に対してトップページなどとラベルを貼って
Suave UI – AngularJSと組み合わせて使いたいUIフレームワーク
JavaScriptを活用したWebアプリケーション開発の流れが広まっています。JavaScriptアプリケーションが大型化すれば、自然とフレームワークを欲するようになります。AngularJS、Ember、Backboneあたりが有名でしょうか。 今回はAngularJSをターゲットにしたプロダクト、Suave UIを紹介します。AngularJSと組み合わせて使うと便利なUIフレームワークになります。 Suave UIの使い方 Suave UIはAngularJSに対応した部分において、su-*というプリフィックスを持っています。スタイルシートについてもsu-*をつけて使います。UI周りで従来のライブラリを使うと、そこだけAngularJSと違う書き方になって浮いてしまうことがあります。Suave UIを使ってUIとスクリプトが親和性高い状態を維持しましょう。 Suave UIはJav
ng-admin - 次世代のWeb管理画面
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました 最近はサーバサイドではHTMLレンダリングせず、RESTfulなWeb APIを使ってデータを取得、表示するといったWebアプリケーションが増えています。そうした中、運営側の管理画面においても求められるものが変わってきています。 そこで今回は次世代の管理画面、ng-adminを紹介します。AngularJSを使ったWeb管理画面になります。 ng-adminの使い方 Web APIを用意しておくことで、ユーザ向けはもちろんのこと管理画面においてもスムーズな操作ができるようになります。pushStateにも対応していますので、URLはユニークになるようです。 ng-adminはJavascript/HTML5製のオープンソース・ソフトウェア（MIT License）です。 Angul
Chartist – レスポンシブ対応のSVGグラフライブラリ
Webは表現力が弱いと言われていますが、特にグラフ周りで苦労することが多いのではないでしょうか。データを単純に一覧表示するのではなく、グラフを用いることでトレンドを知ったり、よりビジュアル的に把握できるようになります。 そこで今回は最新のグラフライブラリ、Chartistを紹介します。SVGで描かれたレスポンシブなグラフライブラリです。 Chartistの使い方 シリーズをJavaScriptの配列で与えるだけ。とても簡単ですね。 ChartistはSVGでグラフを描き、スタイルシートでビジュアルを調整できます。さらにレスポンシブに対応することで幅によってラベルの表示を変更するようになっています。対応ブラウザはIE9以降となっています。 ChartistはJavaScript製のソフトウェア（ライセンスはWTFPL）です。 Chartist - Simple responsive char
Responsive Dashboard - Bootstrapベース、レスポンシブな管理画面テンプレート MOONGIFT
Bootstrapの良いところは使い手（主にエンジニア）の気持ちを理解し、その利用シーンが想定されていることでしょう。こだわったデザインにすることだってできますが、それでは応用がききません。その汎用性と見栄えのバランスを上手に保っています。 今回紹介するResponsive Dashboardもその応用例と言えます。いわゆる管理画面系のダッシュボードですが、AngularJSとjQueryに対応し、カスタマイズして利用するのが容易になっています。 Responsive Dashboardの使い方 こちらがメイン画面です。管理系で良くありがちなウィジェットがたくさんあります。メニューは左側です。 デスクトップもメニューを折り畳めます。 タブレットサイズになると自動でメニューの文字が折り畳まれます。 スマホサイズ。カラムが1列になります。 Responsive DashboardはBootst
Webアプリケーションの画面をさくさく作ろう。UIフレームワーク特集 MOONGIFT
今回はWebアプリケーションの画面作成に関する話です。かつて業務システムというのはエンジニア自身が画面を作ってロジックを実装して提供していました。UIがただコンポーネントを貼付ける程度だったからです。 しかしWebアプリケーションの時代になって、UIの制作が難しくなってきています。デザインの自由度が高いためです。しかし今後さらにWebアプリケーションが活用されていく中ではエンジニアもそれなりの画面を素早く開発できるようになっていかないといけない時代になっています。 そこで今回はUIフレームワーク、多彩なコンポーネントを備えたデザインフレームワークをまとめて紹介します。 iPhone/Android/Windows Phone対応のモバイルWebアプリフレームワーク「ChocolateChip」 モバイルWebサイトをネイティブ風にするUIライブラリは昔から多数存在しますが、今回はその最新版
Redmine Desktop Client - 常時手元においておきたいデスクトップRedmineクライアント MOONGIFT
Redmineをプロジェクト管理に使っている企業は多いです。アジャイル開発のみならず必要十分な管理項目があることで従来のプロジェクト管理においても活躍します。 しかしWebブラウザからアクセスするのに対して若干の不便さを感じることもあります。もっと素早くアクセスできれば良いのに…そう思う方はRedmine Desktop Clientを使ってみましょう。 Redmine Desktop ClientはオリジナルのRedmineClientからフォークし、REST APIを使うようにしたソフトウェアです。 接続設定です。RedmineのURLとID/パスワードを入力します。Redmineのバージョンも指定する必要があります。 タイムトラッキング機能があります。タスクを選んでトラッキングを開始します。 タスクの編集や追加もここからできます。 RedmineのWeb UIから操作するよりもRed
Lockr – localStorageを使いたくなる小さなJavaScriptライブラリ
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました HTML5で提供される新しいAPIの一つにlocalStorageがあります。使ってみたいと思いつつも何となく面倒そうで避けてしまっている、なんて人もいるのではないでしょうか。利用するのに複雑な仕組みになっているとつい敬遠してしまうでしょう。 そこで紹介したいのがLockrです。ごく小さなlocalStorageラッパーで、高校のロッカーくらい簡単な仕組みだそうです。 使い方 Lockrは依存ライブラリもなく、JavaScriptファイルを読み込むだけで使えます。 <script src="/path/to/lockr.js" type="text/javascript"></script> これで準備完了です。 デモ APIはRedisを参考にしている層で、set/getでシンプ
Watchman·Facebook製のファイル/フォルダ監視ツール MOONGIFT
ファイルの変更を監視して何らかの処理を行うと言ったソフトウェアは静的サイトの流行もあって幾つか出てきています。軽量なもの、プラグインで拡張できるものなど色々ですが、今回はFacebookにより開発されているWatchmanを紹介します。 特徴としてはファイルの拡張子も問わず、指定したファイル（パターン指定可）が変更されたらそれをトリガーに何らかの処理を行うと言ったソフトウェアになるようです。さっそく見ていきましょう。 最も簡単な使い方として、CSSを変更したらミニファイする場合は次のようになります。 $ watchman -- trigger ~/src buildme '*.css' -- minify-css さらに複数のディレクトリ、ファイルを監視できます。 $ watchman watch ~/www この場合、~/wwwを監視対象に加えます。さらに別なディレクトリも監視対象に加え
Kraken - PayPal製のnode用MVCフレームワーク
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました nodeの世界もどんどん充実してきていますね。 開発言語のトレンドは年々変わってきています。業務レベルではまだ使われることは少ないもののnodeのシェアも増えつつあります。そしてさらなる拡大のために必要になるのが優秀なフレームワークでしょう。 コミュニティベースでも幾つも出てきていますが、今回はPayPalが開発したnode用フレームワーク、Krakenを紹介します。 インストールは簡単でnpmコマンドで終わります。 $ npm install -g generator-kraken 終わったらYeomanのyoコマンドを実行します。ここが格好いいですね。 $ yo kraken プロジェクトが生成されたらnpm startでWebサーバが立ち上がります。 $ npm start
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
