ExeCop - 危険なコマンドをキャンセル/確認 MOONGIFT
実行するのが怖いコマンドは多数存在します。例えば sudo rm -Rf / なんてコマンドは間違っても実行してはいけないコマンドでしょう。また、実行する可能性があっても処理前に確認したいコマンドもあります（負荷が高いものなど）。 そうしたミスを未然に防げるのがExeCopです。あらかじめ入れておくとサーバの作業が捗るでしょう。 ExeCopの使い方 設定ファイルを書きます。例えば以下のような感じです。 deny when command_match destroy confirm when command_match rm confirm when env_eq AWS_PROFILE=production これでマッチするコマンドを実行しようとすると確認が入るようになります。ディレクトリ毎に設定ファイルを設置できます。環境変数によって動作変更もできるので、開発環境と本番環境で動作を指定
Elementor Page Builder - こだわったコンテンツを作成できるWordPressプラグイン MOONGIFT
ブログはついテキストが多くなってしまいがちです。そもそもWYSIWYGなエディタ部分において画像の埋め込みと文字装飾くらいしかサポートされていないのが原因でしょう。もっと凝ったデザインをしたいと思っても、HTMLを直接編集するしかなくなります。 そこで使ってみたいのがElementor Page Builderです。WordPress上でドラッグ&ドロップによるコンテンツ編集が実現します。 Elementor Page Builderの使い方 設定ページです。固定ページ、投稿、メッセージで利用できます。 編集画面に Elementorで編集 ボタンが追加されます。 これが編集画面です。左側のコンポーネントを追加します。 テキストも自由に追加できます。なお、編集は左側で行います。 画像を追加したりすることもできます。 こんな感じでコンポーネントを追加していきます。 これでページができあがりで
ECharts - 多種多様な表現に対応したグラフ/チャートライブラリ MOONGIFT
Webは表現力がそれほど高くないのが常に問題視されています。特に業務系システムではグラフ/チャートを使ってデータを可視化する必要があります。最近ではビッグデータが話題にあがっており、大量のデータを効率的に描画しなければならなくなっています。 そこでEChartsを紹介します。ビッグデータモードまで用意された多種多様なパターンの用意されたチャートライブラリです。 EChartsの使い方 今回はその多様なグラフ、チャートを紹介します。 曲線のグラフ。 積み上げグラフ。 棒グラフ。 エリアグラフ。 曲線。かなり複雑です。 こちらもユニークです。途中で途切れています。 棒グラフですが、範囲が指定できています。 左右の比較グラフ。 複数グループの棒グラフ。 散布図。 こちらも散布図。 画像も合わせた表示。 散布図と色の組み合わせ。 ローソクチャート。 円グラフ。 より描画にこだわった円グラフ。 レー
Webアプリケーションの画面をさくさく作ろう。UIフレームワーク特集 MOONGIFT
今回はWebアプリケーションの画面作成に関する話です。かつて業務システムというのはエンジニア自身が画面を作ってロジックを実装して提供していました。UIがただコンポーネントを貼付ける程度だったからです。 しかしWebアプリケーションの時代になって、UIの制作が難しくなってきています。デザインの自由度が高いためです。しかし今後さらにWebアプリケーションが活用されていく中ではエンジニアもそれなりの画面を素早く開発できるようになっていかないといけない時代になっています。 そこで今回はUIフレームワーク、多彩なコンポーネントを備えたデザインフレームワークをまとめて紹介します。 iPhone/Android/Windows Phone対応のモバイルWebアプリフレームワーク「ChocolateChip」 モバイルWebサイトをネイティブ風にするUIライブラリは昔から多数存在しますが、今回はその最新版
Pure CSS Components - CSSだけで作られた各種コンポーネント
Webアプリケーションでは表現力をあげるために各種コンポーネントが作られていますが、通常その手のライブラリはJavaScriptとスタイルシートの組み合わせによって実現しています。そうなるとJavaScriptの互換性やそもそも有効にしていない場合に使えません。 そこで考えだされたのがPure CSS Components、スタイルシートだけで作られたコンポーネント集です。 Pure CSS Componentsの使い方 よく使われそうな表示がすべてスタイルシートだけで実現しています。JavaScriptを使った時に比べるとアニメーションが少ないなど若干物足りない部分もありますが、JavaScriptをオフにしても動くのは魅力的です。 何でもJavaScriptではなく、テクニックをこらすことで実現してしまうのがすごいですね。 Pure CSS Componentsはスタイルシート製、MI
wri.pe - OSS化されたMarkdownベースのメモアプリケーション MOONGIFT
個人的にもよく使っているwri.peがオープンソース化されました！Ruby on Railsで作られており、本家はHerokuで動作しているなど自前でWebベースのメモ環境を作るのがとても手軽になりそうです。 ということで早速触ってみましょう。Web APIのトークン設定をすればすぐに動かせます。 wri.peの使い方 トップページです。見たまま本家のwri.peそっくりです。 ログインしました。早速メモを作ってみましょう。 右側にプレビューもあって分かりやすいですね。 カレンダー。メモを作った日付が分かります。 検索はSolrを使っており日本語も対応しています。 バックアップはEvernote、Dropboxにできます。 殆どの機能がJSON出力に対応していたり、iCalでの出力や多数のWeb API、OAuth対応がされているなど今風のWebサービスを作るのに参考になる点が多いと思いま
Git-ftp - Git×FTPな運用をサポート！ MOONGIFT
Gitは便利な仕組みです。例えばGitリポジトリからデプロイできる仕組みを使えばSCPなどでファイルをアップロードする必要もありません。とても便利です。しかしそういった方法の取れないレガシーな運用を余儀なくされている環境もあるでしょう。 例えばFTPを使っている場合、GitリポジトリにコミットしてもファイルアップロードはFTPクライアントで行うと言った面倒なスタイルになります。それを解決してくれるのがGit-ftpです。 Mac OSXであればインストールは簡単で、brewで行えます。DebianやUbuntuでもaptを使ってできます。Windowsの場合はCygwinを使って行う必要があります。 $ brew install git-ftp インストールが終わったら、ローカルのリポジトリに移動してinitサブコマンドを実行します。 $ git ftp init -u <user> -p
iniscan·php.iniの設定ファイルをチェックして危険なポイントを洗い出し MOONGIFT
PHPは年々進化していて、それでいて過去のバージョンとの互換性もほぼ維持されています。しかしネットワークが進化する中で従来は使われていた設定が非推奨になっていることも少なくありません。 もしかするとWebサーバのPHPの設定が危険な状態になっているかも知れませんよ。それをチェックできるのがiniscanです。 iniscanはcomposerを使ってインストールします。まずはcomposer.jsonを下記の内容で作成します。 $ cat composer.json { "require": { "psecio/iniscan": "dev-master" } } そしてインストールを実行します。 $ sudo composer install Loading composer repositories with package information Installing depende
項目を自在に設定できるアンケートライブラリ·Formbuilder.js MOONGIFT
Formbuilder.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 Googleスプレッドシートのアンケートフォーム作成機能は度々使われていますが、同じような仕組みを自分で作れるのがFormbuilder.jsです。JavaScriptを使って多様な入力項目を実現します。 アドレス入力。郵便番号から住所まで一気に入力できます。 単なるテキスト入力。 金額の入力。 複数行の入力。大きさも段階的に選べます。 ドロップダウン。デフォルト値も変更可能。 設定項目はJSONになっています。 Formbuilder.jsでは管理画面を使って設定を行います。その結果はJSONなので、そのまま適用して再現が可能です。入力項目は日付、ファイル、チェックボックス、メールアドレス、URL、複数選択と十分に用意されています。イベントは保存実行時に取得可能で、後はその
ソートやフィルタにも対応したレスポンシブなテーブル·FooTable MOONGIFT
FooTableはレスポンシブなテーブルデザインを行うライブラリです。 レスポンシブWebデザインにおける最大の難関はテーブルかも知れません。PCならば幅広く表示できたカラムがスマートフォンではうまく表示しきれません。そこで使い勝手を維持しつつ見栄えもいいテーブル表示にFooTableを使ってみましょう。 PCで表示したテーブル。 スマートフォン向けに縮めた場合。+記号が表示されています。 +記号をクリックすると、追加情報が表示されます。 HTMLを組み合わせた行。 こちらでもスマートフォンで表示できます。 タブレットでも調整されて表示されます。 ソート機能版。 もちろんスマートフォンでもソートが使えます。 フィルタリング。インクリメンタルに適用されます。 PCでももちろん使えます。 ソートとフィルタリングは同時に使えます。 FooTableを使う際にはタブレットやスマートフォンで表示する
JavaScriptを使ったリアルタイムA/Bテスト·Abba MOONGIFT
AbbaはJavaScriptを使ったUIのA/Bテストを行うソフトウェアです。 Webサイトの良いところは変更コストがとても小さい所にあると思っています。ちょっとしたテストを行うのが簡単で、戻すのもそれほど難しくありません。そこでWeb上でA/Bテストを行う際に遣ってみて欲しいのがAbbaです。 管理画面です。この右側に出ているコードを実行することでA/Bテストを行えます。 測定結果はリアルタイムに反映されます。 Aの方が反応が良いといった結果が簡単に分かります。 Abbaの仕組みとしては、A/BそれぞれについてJavaScriptを実行します。例えばボタンの配置を変えたり、CSSのクラスを変えて見た目を変更できます。そしてその結果クリックなどのイベント対してテストが完了したというアクションを実行する仕組みです。 AbbaはRuby製、MIT Licenseのオープンソース・ソフトウェア
HTMLテーブルをリッチに便利な機能を追加する·Grid MOONGIFT
GridはHTMLテーブルにソートやヘッダ固定、行選択と言った機能を追加するJavaScriptライブラリです。 業務システムを作っていると必ず発生するのがテーブルでの一覧表です。WebでExcelレベルのことは実現できませんが、リッチな表としてGridを使ってみるのは良さそうです。 デモです。 必要な場所だけチェックしてハイライトできます。 横スクロールしても左側の列はそのままです。 数値のオーダーも適切に動きます。 縦スクロールしてもヘッダー部はそのままです。 カラム幅の変更もできます。 GridはIE7以上、Google Chrome/Firefox/Safari/Operaに対応しています。jQueryやMootoolsと一緒に使うこともできます。機能はヘッダー、フッター、カラムの固定化やカラムのリサイズ、カラムのソート、行の選択などになります。データフォーマットはJSONの他、X
クライアントサイドだけでここまでできる。JavaScriptの画像加工ライブラリ·Pixastic MOONGIFT
PixasticはJavaScriptによる画像編集エンジンです。 画像のちょっとした加工であればわざわざ高価なソフトウェアを使うことなくオンラインで実現できるようになってきました。今回紹介するPixasticもその一つ、多彩なイフェクトを画像に対してダイナミックに適用するライブラリです。 元の写真です。 白黒加工を施しました。 画像を重ねる処理です。 色彩を変更しました。 エッジ検出。 垂直反転。 ネガ加工。 ノイズを乗せています。 セピア加工。 ぼかし。 カラーヒストグラム。 明るさを調整。 丸を使ったモザイク。 シャープ。 切り抜き。 ポスタリゼーション。 モザイク加工。 PixasticはPhotoshopでいうフィルター的な機能を数多く実装しています。その処理の殆どは画像全体にかかるものになっていますが、カスタマイズすれば指定範囲にだけイフェクトを行うこともできるでしょう。またオ
多彩なフレームワークに対応したPHP向け認証ライブラリ·Opauth MOONGIFT
OpauthはPHP向けの認証ライブラリです。抽象化することで多様なプロバイダーに容易に対応できます。 Webサービスで認証を用意すると言っても今は多様な技術が存在します。単なるID/パスワードに限らず、OpenIDやOAuthもあります。サービスプロバイダーごとに実装も若干変わったりします。そうした認証技術を統合して使えるのがOpauthです。 デモです。 Facebook認証です。 問題なく認証できました。各種データも取得できているのが分かります。 こちらはGoogle認証です。 こちらもユーザプロフィール含めて取得できています。 最後はTwitterです。 はい、問題ありません！ OpauthはRubyの認証ライブラリOmniauthにインスパイアされて作られており、認証部分を抽象化することでプロバイダーを切り替えて容易に様々なサービスに対応できるようになっています。技術的にはOpe
Titanium SDKのバージョンをCUIで管理·tsm MOONGIFT
tsmはTitanium SDKのバージョンマネージャです。 JavaScriptを使ってiOS/Androidアプリが開発できるTitanium。利用者も多いとは思いますが、SDKの更新頻度が早く追従しきれない人も多いのではないでしょうか。そんな方に使ってみてほしいのがtsmです。 インストールしました。npmコマンドで簡単にインストールできます。 リモートにあるSDKのバージョン一覧です。 今はインストールされているSDKはありません。 “install バージョン”で任意のバージョンのSDKがインストールできます。 tsmでは古いバージョンから最新の2.0まで任意のSDKをインストールできます。それだけでなくベースの生成を行ったり、ビルドまでtsmから行えます。古いコードを最新版でビルドしてみる、またはその逆など色々な使い方がありそうです。 tsmはnode.js/JavaScrip
1,000のサーバでも監視できるnode.js製死活チェッカー·uptime MOONGIFT
uptimeはnode.jsで作られたWebサーバ死活チェッカーです。 Webサーバがきちんと正常に動き続けているかどうか一番簡単にチェックするのは定期的にアクセスしてレスポンスタイムを見ることです。そんなWebサービスの死活チェックに使えるのがuptimeです。 サーバを立ち上げました。最初に監視するWebサーバを設定します。 URLと監視する間隔を指定するくらいです。 監視を開始しました。グラフは自動更新されないのでご注意ください。 イベントがあればこちらに出力されます。 グラフではなく一覧で結果を確認できます。 徐々にグラフが更新されていきます。 uptimeは1000以上のWebサーバを一括で監視できるパフォーマンスを持っています。またダウンしている際にはWebアラートを表示できます。エラーがあった際にはHTTPステータスやその内容を記録してくれます。サーバはタグを使ってグループ管
Titaniumを使った電子書籍作成のサンプル·Titanium-Booker MOONGIFT
Titanium-BookerはTitaniumにLakerを組み合わせて電子書籍を作成するモックアップアプリです。 Titaniumで電子書籍アプリを作る、それを実現しているモックアップがTitanium-Bookerです。基盤としてLakerを用いています。 タップやスワイプで操作する電子書籍です。 大きな画像が表示されています。 左右のスワイプでページを切り替えます。 上下のスワイプでページ内を移動します。 タップでコンテンツを反転したり、音楽を鳴らしたりもできます。 スライドショーも埋め込めます。 元コンテンツです。HTML、JavaScript、CSSで作られています。 TitaniumはJavaScriptで作られていますし、LakerもHTML5コンテンツなので相性はいいかも知れません。単なるHTMLベースの電子書籍を越えてカメラやGPSを使ったりするようなTitaniumの
これは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
表現力の高さに驚き。HTML5/Canvasグラフライブラリ·Flotr2 MOONGIFT
Flotr2はHTML5/Canvasを使ったグラフ描画ライブラリです。 これまでグラフと言えばFlashや画像出力が多かったですが、HTML5が使われるようになったことでぐっと表現力の高いグラフをWeb標準の技術で実装できるようになっています。その表現力を知るのにお勧めしたいのがFlotr2です。 たくさんのサンプルが用意されています。一気に紹介します。 線グラフです。 途中で途切れた曲線のグラフも描けます。 棒グラフです。 マウスオーバーで値を表示できます。 積み上げグラフです。 円グラフです。 レーダーチャート。 範囲グラフ。 ローソクチャートです。 滑らかな曲線のグラフです。 マウスオーバーでグリッドが表示されます。 マウスズームのデモです。 マウスで一部の範囲を指定できます。 折れ線グラフです。 マイナスの値にも対応。 クリックでリアルタイムにグラフを描きます。 画像ダウンロード
間違ってブラウザを閉じても編集データを保持できる·Sisyphus MOONGIFT
Sisyphusはフォームの入力内容をローカルストレージに保存するjQueryプラグインです。 Gmailでは編集中のメールの内容を定期的に保存しておいてくれるので誤って画面を閉じた場合でもメールの内容が消失したりしません。同様の仕組みをクライアントサイドで実装してくれるのがSisyphusです。 最初の表示です。右側にフォームが表示されています。 入力しています。時々、ローカルストレージに保存しましたというメッセージが出ます。 保存されると別なタブで開いた時にも入力内容が再現されています。 SisyphusはHTML5のローカルストレージを活用し、フォーム内に入力されているコンテンツを保存しています。ラジオボタンやチェックボックスは問題ないですが、テキスト入力の場合は保存されるタイミングが難しいようで、入力直後だと保存されていない場合もあります。とはいえ便利なライブラリです。 Sisyp
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
