kazumich.log

kazumich.log

.Mac ( MobileMe ) を独自ドメインのWebを公開

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

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

.Mac というか MobileMe をご利用の方は、ご存知でしょうか？ Webのスペースに独自ドメインを設定する事ができる事を。 このエントリーは、MobileMeが始まる前に書きかけだったエントリーなので、キャプチャが.Mac になってます。 また、MobileMe 版もキャプチャしてみようか。

パーソナルドメインをクリックして下さい。これが、.Mac ( MobileMe ) のエリアに独自ドメインを設定するための設定になります。 1点、注意事項としては、Webサーバ上に名前を設定するだけなので、DNSの設定は別途必要になりますので、ご注意下さい。 ですので、少し難易度が高いかもしれません。

更新

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

シェアする

Recommendation

MacBook Pro 14 M1 Pro にしました

これまで MacBook Pro 13 M1 を使っていましたが、社内で誰も使っていなかったもう1台の MacBook Pro 13 M1 の2台を売って MacBook Pro 14 M1 Pro というヤツに買い替えてみました。 一番大きな変化はメニューバーで使えない部分ができた事でしょうか。最近、解像度を下げて利用しているのですが、左側からのメニューのテキストが多い時には真ん中のカメラ部分を避けてメニューがレイアウトされますが、メニューが少なく右から攻めてくるアイコンが多い場合には、まだ正常に表示されないようですね。 タッチバーは嫌いじゃなかったので、無くなったのは残念ではありますが、キータッチは良くなっていると思います。もう古いのに戻りたくないと手が言っています。 キーボードの周りの黒い部分も最初は M1 の時の感じの方がいいかなぁって第一印象は思いましたが、あまりキーボードは見ないこともあり気にならなくなりました。 M1 Pro は、どうなのかってところは、普段の私の利用方法では M1 でも M1 Pro でも一緒な気がします。 なのでメモリーも 16GB のままで 32GB にしたりもしていません。 ACアダプターが大きなものになったのが残念ではありますが 朝から一度も充電しないで MacBook Pro 14 M1 pro を使ってた。そろそろ5%を切ったので充電開始！— 山本一道@アップルップル (@kazumich) November 2, 2021 のように Tweet した時間が 17:02 なので、バッテリーの持ちについては問題ないようです。 昔の PowerBook と呼ばれていた頃のようなデザインについては、少し残念な気もしていますが、私にとって MacBook は仕事の道具なので、いつも快適に使えているのが最優先なので、まぁヨシとしましょう。 M1 のままで良かった気がしていますが、でも慣れてしまえばコレはコレでいい事になるんでしょうね。次の買い替えするタイミングは、どんな時？って気もしますが、これからしばらくは社員の MacBook Pro 16 i9 を順次 M1 Pro にしていくのを優先したいと思います。 これを書いていて、さっき気がついたのですが M1 Pro も 8コアCPU・14コアGPU と 10コアCPU・16コアGPU と2種類あるんですね。SSD の容量は欲しいので 1TB にしたかったのですが安い方の容量アップで良かったかもしれません。

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

Apple Special Event. March 21, 2016. の発表では

1時間で終わってしまい、噂以上の発表がないイベントでしたね。私としては MacBook Air の15インチとか楽しみにしてたのですが... Apple Watch を値下げ まずは、Apple Watch が 36,800円に値下げされました。より薄いモデルが出るかと思ってましたが、本体のカタチはこのままで新しいバンドが発表されただけでした。 4インチの iPhone SE うわさ通りに 4インチの iPhone が発表されました。性能としては iPhone 6s と同様で、カタチは iPhone 5s と同様になります。過去のケースとかが再び使いまわしてリリースできそうな感じですね。iPhone 6s が大きい！って文句を言ってた人は、やっと買い換える事ができるようになりそうですね。値段は16GB 52,800円/ 64GB 64,800円に。 どんどん大きくなっていたスマホが、ここでストップするという事になりました。私は iPhone 6s のサイズでいい人なので、次は iPhone 7 を楽しみに待つ事に！ 9.7インチ iPad Pro 12.9インチあった iPad Pro についても、小型化されたというか、これまでのサイズに。Air 2 から、9.7 iPad Pro Wi-Fi + Cellularモデル に買い替えしたいと思いますが、社内的にもデザイナーに買ってあげたいと思ったりもしています。 32GB128GB256GB Wi-Fi66,800円84,800円102,800円 Wi-Fi + Cellular82,800円108,00円118,800円

Contact

お問い合わせはこちら