twitterfeed.com を使ってみる事に

Twitterにブログの更新情報を通知する方法 | IDEA*IDEA で紹介されていたサービスを利用してみる事にしました。以前も、TwitBakcer というのにチャレンジしたけど、ダメだったので今回のが使えるといいなぁって思ってますが、どうでしょう？

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 で同様の対応をしてみてもいいかと思っています。

2016年 11月 13日

a-blog cms で Tweet の引用をブログにお手軽に実装する方法

https://publish.twitter.com/ を一度ご確認ください。上記のようなサイトがあります。以前は Twitter の Widgets が設定画面にあって、そこでコードをコピペするような感じで提供されていたが、いつの日か無くなってしまっていたと思っていたのですが、いつの間にか復活しておりました。機能としては、Embedded Tweet / Embedded Timeline / Twitter Buttons の3種類が用意されています。 Buttons はクリックすると 5種類あるみたいですが、今回は全く確認していない。 Timeline も便利に使えそうではあるが、今回は Embedded Tweet のお話です。 a-blog cms の標準的な引用ユニット blogテーマでは、デフォルトは表示されていないが「引用ユニット」をオンにすると以下のように URL を設定できるようになっている。そこで、https://www.a-blogcms.jp を設定すると、そのページの OGP情報を取得して表示してくれる便利な機能だ。 a-blog cms のテキストユニットでの引用一般的なテキストの引用については、こんな感じで書くと <blockquote> 〜 </blockquote> のタグで囲まれた文章となる。さらに脱線気味に cite属性を追加する方法管理画面 / コンフィグ / エントリー / 編集設定 / テキストタグセレクトの3つ目の入力欄に「引用元URL」と設定します。上記の設定を行うと以下ような感じで引用元URLを設定できるユニットに進化します。あとは blog/include/unit.html の @section(text-unit) を持ってきて blockquoteブロックをカスタマイズします。3つ目の入力欄の変数は {extend_tag} となっています。 cite="{extend_tag}" {text}[raw|nl2br] 本題の引用ユニットに Embedded Tweet 機能を追加例えば https://twitter.com/ndrf_kazumich/status/1510118505139798019 を https://publish.twitter.com/ に設定します。今日は朝早起きしたので、a-backup を作り直している。処理を簡単にして短い時間で処理が完了できるようにすることを第一の目標とし、2つ目の目標として設定項目を減らして簡単に使えるようにする。テーマの設定を DB を確認して出来るようになった。 pic.twitter.com/5IFYxsPJDq— 山本一道@アップルップル (@kazumich) December 10, 2022 こんな事が書ければ OK な事がわかります。実は blog テーマは、https://platform.twitter.com/widgets.js が最初から読み込まれているので、<script> タグは消しても動作します。オリジナルテーマで実装する際には widgets.js が必要になります。必要な時に読み込むようにカスタマイズするには「SetRendered と GET_Rendered を活用した「円グラフのカスタムユニット」を作ってみよう」を参考にしてください。徐々に情報を減らして動くかを調べてみたところ、class="twitter-tweet" の中の <a> の href 属性に Twitter の URL があるだけで動作する事がわかりました。テンプレートをカスタマイズしていきます blog/include/unit.html には最初から @section(quote-unit) がカスタマイズして設置されていました。そこの一部が以下のように書かれています。（略） {quote_html}[raw] （略） <-- END html:veil --> の後ある IFブロックを少し修正し、以下のようにします。（略） {quote_html}[raw] Tweet内容をtwitter.comで確認する（略） <blockquote>タグに class="twitter-tweet" をつけ、その中の <a>タグに Tweet の URL を設定するだけOKです。と設定すれば、以下のような感じになります。引用機能の隠れた機能？ローカルでテストしつつ、このブログにも実装しておこう！って作業をしたらこの設定をしないでも、引用ユニットに Twitter の URL を設定するだけで同じものが表示されてしまいました。コンフィグの設定で Twitter API を設定すると OGP の代わりに、今回の https://publish.twitter.com/ の結果と同じタグを twitter.com から API 経由で持ってきてくれることを忘れておりました。これも、せっかくなのでお伝えしておきます。

2022年 12月 14日

@webbingstudio と @ohtsuki2843 の Tweet が嬉しかったのでペタペタ貼ってみた

a-blog cms 春合宿が終わった翌日に @webbingstudio が以下の Tweet をし、それを RT しつつ @ohtsuki2843 も嬉しい Tweet をしていたので、嬉しくなってペタペタ貼ってみた。a-blog cms の引用ユニットは、Twitter の URL を入力すると以下のような感じになります。ありがとうございます！これからも開発＆サポートを頑張っていきます。

2018年 5月 20日

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年 8月 11日

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 を動かすようにするための紹介でした。

2017年 1月 21日

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

2016年 7月 20日

kazumich.log