kazumich.log

kazumich.log

画像の背景を抜くサービス zenfotomatic は凄いね

この記事は公開日より年以上経過しています

情報が古くなっている可能性がありますのでご注意ください。

スライドで、上記のような感じに写真を使いたいと思って以前ブックマークしてあった zenfotomatic を使ってみました。これが思ってたより便利だったのでブログに書いて皆さんにも紹介しておきます。

アップした元データ

基本は背景を抜きたいと思って撮った写真じゃないとキレイには作れない気がします。多少、関係ないものが写っていても大丈夫（下の真ん中の2枚）のようです。

自動変換すると！

出力するデータとしては、JPG か PNG になります。今回は 透過PNG にしました。完全にキレイにマスクして背景とそうでない部分に分かれるという感じではなく、途中はぼかしてるというか、影っぽい感じに作られるようになってるようです。

もう少し、いろいろなテストをしてみたいところですが、このサービスが良かった事だけ伝えられれば、後は実際にテストで触ってみてもらった方がいいだろう（10枚まで無料）と思いますので、ここで終わります。

今回の素材については

2014年6月21日(土) に 静岡県クリエイティブ支援センター で開催される Talk Note Vol.10 の「脱・初心者！Googleアナリティクス活用テクニック」で利用するスライドで使うためのものでした。 現在、募集中ですので、お近くの方は是非参加をご検討ください。

たくさん撮ってあるのですが、素材集として配布される予定は無く、私も利用する事はできないっぽいです。

更新

Facebookでシェアする Xでシェアする LINEでシェアする

シェアする

Recommendation

Web来訪者の行動を可視化する4つのサービスを紹介

Webサイトへの訪問者は、どんな行動をしているんだろう？ってサイトを運営している人であれば、誰でも思うはずです。Google アナリティクスとかを利用して、この URL にアクセスした後は、こちらの URL を表示している人が多いとか、こちらに行ってもらいたいのにアクセスしてる人が少ないなって行動を分析しているのではないでしょうか。 7月28日に「1行のJavaScriptコードでユーザーの行動分析を動画で確認できる「LogRocket」を使ってみた！ - paiza開発日誌」を読んで、まずは LogRocket を使い始めました。丁度本日トライアル期間が終わった感じです。 そして、本日は「ヒートマップ/画面録画ツール「Hotjar」【無料利用可】｜ふにろぐ」を読んで、最近はこういうのが流行ってるの？って思い、いくつか探してみることにしました。 今回は、4つのサービスを実際に登録しています。 LogRocket Hotjar fullstory inspectlet どれも訪問者の行動状況を動画形式で再生できるサービスになっていて、利用できる数は少ないが無料で使い続けることができるようになっています。 LogRocket https://logrocket.com/ 現状、これが利用時間が長く感想が一番書けそうなサービスになります。 3人まで使えて1,000セッションの記録され、1ヶ月分のデータを保管してくれます。 Hotjar https://www.hotjar.com/ 無料での利用についてになりますが、閲覧するユーザー数は無制限です。2000pv/日のデータを記録してくれますが、実際に行動の状況を見れるのは最新100件のようです。データは3ヶ月分になります。行動の再生だけではなく、ヒートマップのカタチでもクリック状況をみることができるのがオススメなところではないでしょうか。無料版ではヒートマップは3ページ URL が設定できます。 他にも、閲覧者がページに対して、意見が言えるようなチャットっぽいフォームが用意できたり、まだ試せてないですが、きっとユーザーテストの一般公募？するような機能もあるようです。「こんな行動をしてみてください」というお題を出して、その状況を記録するという使い方もありかもしれません。 fullstory https://www.fullstory.com/ 無料版は、LogRocket と同様で、3人まで使えて1,000セッションの記録され、1ヶ月分のデータを保管してくれます。また特徴としては、Mixpanel や Mautic のように、問い合わせフォームの後の thanks ページ に仕込む JavaScript も用意されていて、名前やメールアドレスを紐付けることができるようです。 inspectlet https://www.inspectlet.com/ 無料版は、月間100セッションの記録と、1ヶ月のデータ保管ということになりますので、ちょっと上記の3つと比べると無料で使うのは厳しい感じです。しかし、ヒートマップが各ページ表示させることができていますので、ヒートマップが大事な場合にはありかもしれません。 現状、いろいろ試しているところで全部の JavaScript のタグをテスト的に設定していたりしますが、今のところ有料で利用するつもりはないのですが、無料で使い続けるのなら「Hotjar」がいい気がしています。また、これを読んで他のサービスでオススメのものがあればお知らせください。

2017年版 Cloud9 で a-blog cms を動かしてみる

「Cloud9 で a-blog cms を動かしてみる」というのを2016年3月に書いていましたが、これをリライトして公開しています。最近は a-blog cms については、公式のサイトに書いていますが、修正なのでココに。 Cloud9 という Webサービスを利用すると簡単に開発環境をクラウド上に作ることができます。また、ブラウザからサイトにアクセスするだけではなく、エディタやターミナルもブラウザ上にありますので、テキストエディタすらいらない環境で利用が可能なのです。 https://c9.io 2016年3月の時点では、試してみたのですが HPE_HEADER_OVERFLOW: Request could not be proxied! There was an error proxying the request. のようなエラーが出て動作しなくなることがあり、しばらく利用していませんでした。 しかし、最近 Xdebug の後に ionCube Loader を読み込む事が原因ではないかということを教えていただきました。これで再び使えそうな気になってきましたので、2017年版として Cloud9 で a-blog cms を動かしてみる方法を紹介していきます。 Cloud9 の環境を準備する SIGN UP を済ませると、以下のような画面になります。 Workspaces を追加します。（黒くて＋の部分をクリック） PHPのマークのついてる「PHP , Apache &...」を選択して、（create workspace）のグリーンのボタンをクリックします。 少しだけ待ちます！ こんな感じで、Workspace が完成！ エディタとブラウザと、ターミナルが全部ブラウザ上にある面白い環境ができあがります。 a-blog cms をインストールする https://gist.github.com/kazumich/cd2bbe59e67348dcbadb から「Cloud9版 簡単セットアップ」をダウンロードしてアップロードしても構いませんが、さらに簡単にブラウザの下の方にターミナルが用意されていますので、そのままコピペで行きましょう。以下の部分がターミナルです。 $ wget http://ablogc.ms/c9-2614 -O index.php 上記を実行すると、 index.php というファイルが追加されます。 Cloud9 は、ホントによくできていますので、FTP も使うことなくブラウザ上にファイルをドラッグするだけでもアップできますので、ターミナルの利用に抵抗があればファイルをアップロードしてもらっても大丈夫です。 まだ、この段階では Webサーバー ( Apache ) が起動していません。 この Run Project と緑色の再生マークがついている状態の時にはシステムが止まっています。 （再生マークが出てるので動いていると勘違いしてた）ココをクリックして、サーバを起動しましょう！ これでサーバーが動作しています。 しばらく待っててください。横のファイルリストのところにファイルとかフォルダが増えてきて進行状況が確認できます。 「php.ini に追加した ionCube Loader を有効にするために Project を再起動してください。」が表示されたら、もう少しで完了です。上の赤い STOP をクリックして、その後、緑の Run Project をクリックします。 で、インストール のリンクをクリックすると、インストーラーが起動するハズです。 DBの情報は既に設定済みなので、そのままボタンをクリックして進めていき、ユーザー情報だけ登録すれば、ログイン画面まで進められます。 もし、これからカスタマイズの勉強をするのであれば、simple2016 のテーマを選択してインストールするようにしてください。 ログインしようと思って、以下の画面が出た場合にはインストーラーの最後のステップである setupのリネームを実行していない状況になります。 setup ディレクトリの名前を変更してみてください。 Xdebug の利用を止める 上記で動いているので安心していると、次に使おうとするとなぜか動かないということに遭遇することになるのではないかと思います。Xdebug を読み込む前に ionCube Loader を読み込む設定をすれば共存もできるのですが、簡単セットアップでは対応するのが難しいのですので、Xdebug を起動しないようにします。 $ sudo rm /etc/php5/apache2/conf.d/20-xdebug.ini 上記をターミナルで実行し、Webサーバーを再起動してみてください。 phpMyAdmin を利用する ついでに、phpMyAdmin のインストールもしておきましょう。 $ phpmyadmin-ctl install root か Cloud9 のアカウントでパスワードは無しでログインが可能です。 ライセンスについて 標準のライセンスでは2ヶ月間は、有償のライセンスと同様に5ユーザーで利用が可能です。なので、インストールした直後については、そのまま利用を続けてください。2ヶ月後からは、ライセンスがあたっていないアラートが表示されることがあります。 以下の3つの方法がありますが、どれでも使えなくなることはありませんのでご安心ください。 アラート表示があっても、そのまま利用する。 特定サーバ無料サブドメインライセンス をダウンロードして利用し、1ユーザーで無期限で利用する。 マイページ から開発ライセンスを定期的にダウンロードして利用する。 開発環境を共有する やっぱり Cloud9 の環境の一番の特徴は共有機能ではないでしょうか。 右側にある Collaborate をクリックすると誰がメンバーなのかがわかるようになっています。 歯車アイコンの横にある Share をクリックすると、招待することができるようになります。メールアドレスを入れて、Invite するだけですので、ぜひご活用ください。 Cloud9 の環境で a-blog cms を動かすようにするための紹介でした。

Twitter と Facebook に写真付きの投稿するには Instagram と IFTTT を連携して使うのがオススメ

ベースキャンプ名古屋 での活動をアルバイトの子に Twitter ( @basecamp758 ) と Facebook ページ ( basecamp758 ) にアップしてもらっていますが、1回で両方に簡単にアップできるようにすることができないかを考えて instagram ( basecamp758 ) を利用することにしてみました。 0. Instagram 単独での同時投稿の問題 1. IFTTT のアカウントを作ります 2. Instagram から Twitter に投稿する設定をする 3. Instagram から Facebook ページ に投稿する設定をする 4. Applets の確認 5. テスト投稿してみる 6. 投稿内容をカスタマイズする 0. Instagram 単独での同時投稿の問題 Instagram から Twitter に投稿すると URL だけしかツイートできません。このことから、Facebook と Twitter に同じ写真付きの投稿するには、それぞれに投稿することになります。 1. IFTTT のアカウントを作ります https://ifttt.com/ にアクセスして Sign up より新規ユーザー登録を行います。 2. Instagram から Twitter に投稿する設定をする IFTTT では、いろいろな設定が簡単にできるように Applets が最初から準備されています。 Tweet your Instagram as native photos on Twitter を選択します。 Turn on をクリックすると Instagram と Twitter のサービスとの連携の画面が出てきます。 Instagram にログインしていれば、上記のような画面が出てきますので、Authorize をクリックしてください。 次は Twitter の認証画面になります。こちらも Twitter にログインしていれば 連携アプリケーションを認証 ボタンをクリックします。 On になって作業完了です。 3. Instagram から Facebook ページ に投稿する設定をする Instagram のアプリから毎回 Facebook を選択して投稿するのであれば、こちらの設定は必要ありませんが、できるだけ手順を減らすとか、投稿するメッセージに追記するとかしたい場合には設定をしましょう。 個人のタイムラインであれば、標準の Applet もあるかと思いますが、今回は Facebook ページ ということになりますので、Applet Maker を利用して連携するアプリをつないでいきます。 右上の New Applet を選択します。 IFTTT では、「if this then that」の this と that を指定することで Applet を作っていくことができます。 this をクリックしてください。 たくさんのサービスのアイコンが表示されていますので、Instagram を選択します。検索で、i を入力するだけで簡単に見つけることができるハズです。そして、Instagram を選択してください。 Any new photo by you を選択します。 Twitter の時に認証は済ませていますので、2回目以降は必要ありませんので、すぐに設定が完了します。 次の that では、Facebook Pages を選択してください。 もし、個人の Facebook のタイムラインでいい場合には Facebook になります。 Instagram や Twitter と同様に、Facebook も認証することになります。 管理している Facebook ページ の選択が別ウィンドウで出ていますので選択してください。 私の場合は「ベースキャンプ名古屋」を選択します。（キャプチャ画像は Update と書かれていますが、初めての場合にはボタンのラベルが違うかもしれません。） 画像をアップロードして投稿したいので Upload a photo from URL を選択します。 Message の部分をカスタマイズすると、投稿内容をカスタマイズできますが、まずは Create action をクリックしてみます。 Finish で作業完了です。 これで、Instagram に投稿するだけで Facebook ページに投稿が可能になります。 4. Applets の確認 My Applets で確認すると、2つ設定ができているのが確認できます。ここから設定を編集したり、連携を止めたりすることができます。 5. テスト投稿してみる Instagram から、写真を撮って「テストです。」とだけ書いて投稿してみました。Twitter と Facebook ページに以下のような感じで投稿ができました。 ift.tt の短縮URLで instagram へのリンクが追加されることになります。 これ、ちょっと違うな？って思って、次にいきます。 6. 投稿内容をカスタマイズする アプレットのカスタマイズは、右上の歯車アイコンをクリックしてください。 Post a tweet with image が投稿されるテキストなので、この部分をカスタマイズしましょう。 Twitter のリンクとして、instagram にアクセスしても同じものしか表示されませんので、ベースキャンプ名古屋のサイトへのリンクと、ベースキャンプ名古屋のハッシュタグ #bc758 を書いておきます。 最後に Save したら、作業完了です。 7. IFTTT のような日本のサービス 今回、利用した IFTTT を使うことで、いろいろなことができます。 今日（2016/11/13）時点で this 側でのアイコン数は 302 、that側のアイコン数は 255 ありました。 しかし、日本のサービスと繋がっていないとか、英語で分からないということもあるかもしれません。 日本向けでは Yahoo の myThings がいいかもしれません。 まだ対応しているチャンネルは 50 ということで少ないですが、今回の Instagram ・ Twitter ・ Facebook には対応しているので、機会があれば myThings で同様の対応をしてみてもいいかと思っています。

Adobe Creative SDK を a-blog cms に導入し PRODUCTION MODE で利用できるようにしてみた

Adobe Creative SDK というものをご存知でしょうか？ 今回は、その中でも IMAGE EDITOR UI を a-blog cms で活用できるようにしてみたいと思います。これによりブラウザ上で、簡単に画像加工ができるようになります。 現状の 2.6.1.2 では、少しだけ問題があり今後のバージョンで改良する予定でいます。改良が済んでリリースされた時点で公式サイトで紹介したいと思いますが、いち早く実装してみたい人のために紹介しておきます。 a-blog cms の画像ユニットで利用する 画像ユニットのフォームにはアップロードした画像のサムネイルが表示されていますが、その画像をクリックすると Adobe Creative SDK UI を起動します。 以下のように表示され、Save ボタンをクリックすると実際の画像加工処理が動きます。実際には Amazon S3 にファイルが作成され、そのファイルを取得するべく処理が動きます。残念ながら少し時間がかかりますので、Save をクリックしたら少し待つ必要があります。 Adobe Creative SDK に申請する Adobe Creative SDK に Adobe アカウントでログインします。 その後、メニューにある My Apps から申請を行ってください。 ADD APPLICATION ボタンをクリックしたら、以下のような画面が出ますので、CLIENT SECRET というのが、この後に必要になりますのでコピーしておきます。 a-blog cms に実装する 管理ページにログインしている時だけ、以下の JavaScript を読み込むようにします。※※※APIKEY※※※ のところは、上の CLIENT SECLET の値を編集して下さい。 以下のコードは、2.6.1.x で動作するものになっていますので、古いバージョンでは動作しませんので、注意してください。 var featherEditor = new Aviary.Feather({ apiKey: '＊＊＊APIKEY＊＊＊', theme: 'dark', // Check out our new 'light' and 'dark' themes! tools: 'all', appendTo: '', maxSize: 1400, // large 画像のサイズを指定 onSave: function(imageID, newURL) { var image = new Image(), target = this.target, createObjectURL = window.URL && window.URL.createObjectURL, req = new XMLHttpRequest(); req.open('GET', newURL, true); req.responseType = 'blob'; req.send(null); req.onload = function( ) { if ( req.status != 200 ) { alert('error'); return false; } // Ver. 2.6.1以上 var resize = new ACMS.Dispatch.Imgresize(target); image.force = true; image.target = target; image.mime = req.response.type; image.onload = ACMS.Dispatch.Utility.imgToDataURL; image.src = createObjectURL(req.response); image.callback = function ( elm, dataUrl, reisze ) { resize.set(target, dataUrl, true); }; featherEditor.close(); }; }, onError: function(errorObj) { alert(errorObj.message); } }); ACMS.addListener("acmsAddUnit", function( event ) { var item = event.obj.item; $('.js-adobe_cc_sdk', item).on("click", function() { var $self = $(this), id = $self.data('id'), src = $self.data('src'); featherEditor.launch({ image: id, url: src, target: item }); return false; }); }); /themes/system/admin/entry/unit.html の画像ユニットのサムネイル画像を表示させている部分を以下のように修正します。 2.6 - 2.6.1.2 の場合になります。こののバージョンでは {popup} にノーマルサイズの画像ファイルが設定されるので、校正オプション split を利用して large 画像にファイル名を変換して設定しています。 今のところダイレクト編集では、うまく動いていませんが... DEVELOPMENT MODE と PRODUCTION MODE の違い Adobe Creative SDK の申請をすると最初は DEVELOPMENT MODE として登録ができます。この状態でも利用は可能ですが、画像のサイズが 1024 までしか利用できないようです。 Adobe Creative SDK MyApps からアプリケーションのレビューを依頼し、OK になると PRODUCTION MODE になり、画像サイズが large 画像サイズで指定していたサイズのまま保存できるようになりました。 唯一レビュー申請で悩んだのが Screenshots でした。とりあえず、こんな手順で使うんだよって意味で以下の3つをアップしてみました。 昨日レビューに出して、今朝早朝に OK になりました。 これで、今後は気軽に画像を加工できるようになります。Webサービスであれば、これで皆さんが利用できるようになるのですが、インストール型の CMS なので、参考にご自身でカスタマイズして利用できるようにしてみてください。 Adobe Creative SDK を知って、一番のネックになっていたのは加工した画像のサイズが 1024 になってしまうことでした。これが PRODUCTION MODE にして maxSize: 1400 と指定すれば大きくでき問題解決できたのが、今回の報告になります。 2.6.1.2 での暫定的な対応になります。今後のバージョンで暫定部分が解決された時点で公式サイト上でも紹介したいと思います。

Cloud9 で a-blog cms を動かしてみる

concrete5 の Katz さんに「Cloud9 はオススメだよー」って聞いて、動かせるかドキドキしながら a-blog cms の動作環境を作ってみた。 https://c9.io SIGN UP を済ませると、以下のような画面になります。 Workspaces を追加します。（黒くて＋の部分をクリック） PHPのマークのついてる「PHP , Apache &...」を選択して、（create workspace）のグリーンのボタンをクリックします。 少しだけ待ちます！ こんな感じで、Workspace が完成！ エディタとブラウザと、ターミナルが全部ブラウザ上にある面白い環境ができあがります。 ターミナルのエリア（上記の画面の水色の部分）で「MySQLの起動」と「a-blog cms の簡単セットアップの準備」をしましょう。 $ mysql-ctl start MySQL を起動します。 $ wget http://ablogc.ms/c9-2601 -O index.php https://gist.github.com/kazumich/cd2bbe59e67348dcbadb からダウンロードしてきてもいいんですが、上の操作でターミナルにいるので、そのままコピペで行きましょう。 この Run Project と緑色の再生マークがついている状態の時にはシステムが止まっています。 （再生マークが出てるので動いていると勘違いしてた）ココをクリックして、サーバを起動しましょう！ これでサーバーが動作しています。 しばらく待っててください。横のファイルリストのところにファイルとかフォルダが増えてきて進行状況が確認できます。 「php.ini に追加した ionCube Loader を有効にするために Project を再起動してください。」が表示されたら、もう少しで完了です。上の赤い STOP をクリックして、その後、緑の Run Project をクリックします。 で、インストール のリンクをクリックすると、インストーラーが起動するハズです。 DBの情報は既に設定済みなので、そのままボタンをクリックして進めていき、ユーザー情報だけ登録すれば、ログイン画面まで進められます。 ついでに、phpMyAdmin のインストールもしておきましょう。 $ phpmyadmin-ctl install Cluod 9 は、定期的に Project が止まってしまうようですが、無料で Memory 1GB / HDD 5GB のテスト環境が作れるのはいいサービスですね。 ＊＊＊＊.c9users.io の特定サブドメインライセンスも作ってみる事を検討しようと思います。

名刺管理の Eight を使い始めました

いくつかの名刺管理サービスを試しつつ、Eight を使い始めました。まず基本は iPhone アプリを使って写真を取り込みます。ベースキャンプ名古屋のアルバイトの子に、どんどん写真を撮ってもらって300枚くらい取り込んでもらいました。（ありがとう！） 50万人が使う名刺管理アプリ Eight iMac & ScanSnap を利用して 1000枚読み込み iPhone を使って写真を撮って取り込んでもらったのですが、もう1000枚くらい追加したいと思った時に既にある ScanSnap が利用できないかと考えました。 調べてみると Eight scan PC版 というものを発見！ まだβ版であるが、なんとか使えそうです。 動作確認機種というところには ScanSnap iX500 / iX100 / SV600 の現行モデルの3種類になっていますが、私が利用しているモデルは S1500 という旧モデルで使えるか心配でしたが利用可能でした。 Eight scan β版の使い方 | 50万人が使う名刺管理アプリEight ScanSnap Manager の設定方法 | 50万人が使う名刺管理アプリEight 注意するべきところは、両面の名刺と、片面の名刺を混ぜて読み込むと白い面をカットして、詰まってしまってデータがおかしくなります。Eight scan の設定で ScanSnap の時には、両面読み込みで、iX100 と設定すると片面読み込みになります。ですので、両面と片面の名刺を分けて、設定を切り替えて読み込むことで 1000枚を読み込みが完了しました。 ベースキャンプ名古屋のサービスとして提供 これは便利だ！ってことで、皆さんに利用してもらえるように、ベースキャンプ名古屋 を Eight の公式 セルフスキャンスポット にしてもらうことにしました。 まだ、サイト上のスポットには表示されるようになっていませんが利用可能です。スマートフォンやタブレットの専用スキャンアプリが用意されています。 ベースキャンプ名古屋のビジター利用の料金だけで利用が可能です。整理されていない名刺をタップリ持って体験してみてください。

Contact

お問い合わせはこちら