kazumich.log

kazumich.log

どうやって使うの？ POKEN（ポーケン）

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

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

注文した時には、流行るものなのか分からなかったが、この数日いろいろなブログとかでも出てくるようになったので、ポチってして正解だった？ よく分からないが、とりあえず買ってみた。金額は2,480円だった。

POKEN がポーケンのサイトなんだけど、情報を更新する方法がよく分からない。1人で持ってても、ただのキーホルダーというかUSBメモリーなだけ。

ちなみに、USBメモリーとしては 968.2MBとして認識し、その中で48KBが最初からファイルが置かれている状態になってます。

この先に何匹のポーケンに会えるか楽しみにカバンにでも付けておこうと思います。購入しよう！という方は、アマゾンで買えますのでポチってしてみて下さい。でも、1個単位のものは売り切れで、セットでしか買えないかもしれません。

更新

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」がいい気がしています。また、これを読んで他のサービスでオススメのものがあればお知らせください。

ACコンセント付きモバイルバッテリー omnicharge を導入しました

2011年に HyperJuice というモバイルバッテリーを使っていましたが、昨年7月にクラウドファンディングの Indiegogo で omnicharge を再び買ってみることにしました。600g ということで日々持ち歩くのには少し重いですが、長時間のセミナーに参加したり、出張の際のお供には便利でオススメかもしれません。 Hyper Juice ( MBP-100 )を買ってみました | kazumich.log 2011/4/11 きっと、ポチった日付を見る感じからすると 目標額の5倍、2600万円の出資を達成!高速充電USBポート・AC/DCコンセント搭載、大容量20400mAhのモバイルバッテリー「Omnicharge」 | Techable(テッカブル) コンセント装備でノートPCも充電可能なAC/DC/USB対応のモバイルバッテリ ～Surface Pro 4なら9時間駆動 - PC Watch を見て使ってみることにしたんだと思います。そして、MacBook Pro での利用も考慮して大容量の方を購入しました。Touch Bar 付きの MacBook Pro にしたら必要なくなる気もしますが... ディスプレイがついていて情報を表示できるようになっているのがカッコイイのと、しっかり状況の把握ができるのがイイ感じですね。 以前の HyperJuice では、DCポートから MagSafe に出力だったので Mac 専用でしたが、omnicharge であればどんな機器にも利用でき便利ですね。 USBポートは、上のポートが5V/3A で、下のポートが Qualcomm Quick Charge 3.0 ということです。残念ながら下側のポートが活躍する端末がありません。 しかし、これを書きながら非常用ということであれば 13,600mAh の小さい方がよかったかもしれないと思ったりもしますが、しばらく持ち歩いてみようと思います。 箱を開けたときに充電用のアダプターが大きいなぁーって思いましたが、DC - USB ケーブルで充電もできそうなので、出張時はこのケーブルで大丈夫ですが、なくしてしまわないか心配ではあります。USB - USB で充電できるといいのですが... ACコンセント付きのモバイルバッテリーを買う場合 クラウドファンディングの Indiegogo で製品ができる前に買っているので安価に手に入れていますが、これから買おうとすると結構高いのかもしれません。 Omnicharge｜様々なデバイスを充電可能なマルチポータブルチャージャー「オムニチャージ」【2017年2月以降】 - ガジェットの購入なら海外通販のRAKUNEW(ラクニュー) もう少し安く買えそうなものを amazon で調べてみました。1万円以下でも買えるものがあるので、出張のお供に1つ持っておいてもいいかもしれませんね。 RAVPower 27000mAh MAXOAK 50,000mAh サンワダイレクト 700-BTL025 11400mAh NexGadget 24,000mAh RAVPower 20,100mAh

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

勉強会の記録を残すためにプレゼンレコーダー CV910 を買ってみました

（プレゼン時）演台に置く時計の決定版 という記事で、CSS Nite の鷹野さんが「学習用時計セイコーSTUDY TIME」を紹介していますが、私も「（プレゼン時）演台に置く録画機器の決定版」を紹介したいと思います。 名古屋で勉強会をするならベースキャンプ名古屋だよね！って言ってもらえるような場所にするべく運営をしていますが、備品に「プレゼンレコーダー CV910」というものを導入しました。 勉強会の様子を動画で簡単に残せたら便利なのに！って随分前から思っていて、なかなかいいものが見つかってなかったのですが、HDMI だけではなく、VGA にも対応した録画機器で SDカードに録画ができ、演台に置いておくことでノイズカット機能搭載の無指向性マイクが内蔵されているので音声もあわせて記録することができます。 MacBook Air 11 の横に置いてみると、こんな感じになります。買う前には、もう少し大きなものかと思っておりましたが、勉強会に出張する際にもなんとか持ってもいけるサイズのようです。 さらにサイズをチェックできるように、録画するための SDカードと一緒に撮ってみました。（同梱はされていません） マイクに斜線の入ったボタンがありますが、これを押すとマイクがオフになります。「ここはオフレコで」って言ってもらってからボタンを押すようなルールを用意しておくといいですね。後で、録画をみてる人が「あれれ？ 音が聞こえなくなった！」って思わないで済みます。あとは、戻し忘れない注意が必要です。 HDMI の IN / OUT があり録画ができる製品はいろいろあります。実は、これの前に1つ UST の録画のために試しに買ってみた製品も持っています。 今回は、VGA の録画も OK なところとマイク内蔵で録音もできるところがポイント です。 製品仕様 入力端子HDMI x 1 、VGA x 1 、3.5mmピンジャック x 1 出力端子HDMI x 1 、VGA x 1 、3.5mmピンジャック x 1 マイク無指向性マイク内臓（ノイズカット機能搭載） ストレージSDメモリーカード スロットSDHC Class 10 以上使用推奨フォーマット：32FAT（exFATに非対応） 最高入力解像度1920 x 1080 (60fps) 最高録画品質1920 x 1080 (30fps) ピクセルフォーマット入力 / 出力（パススルー）：YUV 4:4:4録画：YUV 4:2:0 録画形式TS 音声録音HDMI入力：PCMステレオ3.5mm入力：ステレオ録音：AACステレオ インターフェースミニ USB 2.0（設定ソフトを利用する場合に利用） 本体サイズ125(w) x 125.4(d) x 34.6(h) mm 本体重量約170g 電源Input：100-240V 50-60Hz 0.5A Max.Output：DC 12V 1.5A 使用温度範囲0〜50℃ 使用湿度範囲15〜90% 設定ソフトは Windows 用しかありませんので、Mac の人は注意してください。マニュアルをみると「マイク感度調整」「画質調整」ができるようです。まぁ、とりあえずデフォルトのままでも利用には問題ないかと思います。 TS形式の動画 TS形式と言われてもピンとこなかったので、調べてみたところ「TSはデジタル放送の高画質映像をそのまま録画するもの」のようです。正式には MPEG-2 TS という表記なるようです。 TS形式の動画の再生をする場合には「VLC Media Player」を利用し、MP4に変換する際には「TS-to-MP4変換ツール」というものがメーカーのサイトからダウンロードできるようになっています。 実際の利用について 「ベースキャンプ名古屋」で、今後行われる勉強会で公開できそうな動画を近いうちに公開して、このページにもリンクをつけておきますので、もう少しお待ちください。まずは使い方動画でも貼っておきますね。 箱は、以下のような感じです。

Contact

お問い合わせはこちら