kazumich.log

kazumich.log

MOO MiniCardを作ってみました

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

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

MOO MiniCardを作ってみました。8/10に注文して8/21の朝に届きました。これが$19.99+送料($6.99)で出来てしまうのは安いかもしれません。次は StickerBooks（90枚の22mmの正方形のステッカー）を注文してみようと思ってます。

ルップルちゃんの写真で作ってみました。全体的に写真が暗くなってしまっているので、次に注文する際には少し明るめに加工してみようと思います。 裏側は海外のサービスなので日本語が使えない(みたい)なので以下のような感じになってます。

Kazumichi Yamamoto
https://kazumich.com
iPhone : 090-xxxx-xxxx
[email protected]

と、プライベート的な名刺になってます。 ん？ でも iPhone は会社の電話な気もする... まぁ、そんなものを作りました。欲しい人にはお会いした時にあげます。

更新

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

シェアする

Recommendation

ポケッターのカードをもらった！

MiniCards を作ってみようかと で、紹介していた「ポケッター」のカードをもらった！ 思っていたより質感も悪くなかった。 ぼかしてあって見えないですけど pocketor のロゴが入っています。（消せることを注文してから知ったそうな） 紫色の顔のマークの部分にQRコードもできるみたい。 なんとか、次回のWCANの時くらいまでには作ってみようと思います。 Iwai Motors Blog

MiniCards を作ってみようかと

ミニカードと言えば、MOO が有名です。 サイトのトップには日本語で はじめまして、ようこそMOOへ。MOOは写真をプリントするサービスです。現時点でウェブサイトは英語のみですが、カードに日本語を加えることも、日本への配送もできますので安心してお使いください。何か不明な点や質問があれば、mooprint.cocolog-nifty.comにコメントを残すか、[email protected]までメッセージをお送りください。 と書かれています。サービス自体は日本語版という事ではありませんが、少し安心しちゃいますね。 また、1月末日までなので時間がありませんが、日本からの申し込みが10%オフになるそうです。 そんな中、日本でも同様のサービスはないのかなぁ？って思い、ミニカードで検索してみて、ポケッターというサービスを発見！ さらに、logpaperというのも見つけた。 MOO : http://www.moo.com/products/minicards.php 値段：$19.99 サイズ：28mm x 70mm 枚数：100枚 紙：350g/m2 Matt laminate ポケッター : http://pocketer.jp/ 値段：1,980円 サイズ：30mm x 70mm 枚数：50枚 紙：マットラミネートコーティング logpaper : http://info.logpaper.jp/howto/item/minicard/ 値段：1,260円 サイズ：45mm x 85mm 枚数：36枚 紙：両面マットラミネート加工 / 厚さ0.3mm ちなみに、一般的な名刺のサイズは55mm x 91mm です。 3択で、どれにしようか悩むところです。どれにするか決まったら、また書きます。

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 での暫定的な対応になります。今後のバージョンで暫定部分が解決された時点で公式サイト上でも紹介したいと思います。

Contact

お問い合わせはこちら