TOP> カテゴリ「Twitter(ツイッター)」
2015年01月01日
このエントリーをはてなブックマークに追加



スポンサーリンク

【Twitter(ツイッター)】絵文字でツイートしてみよう #emojiparty #Android #iPhone #アプリ 


せっかくの元日なので、絵文字でツイートしたいですよね。
門松、ヒツジ、祝日(交差旗)、日の出・・・などです。
iOS端末だと簡単ですが、Android端末は設定が必要です。
twitter_絵文字_門松、ヒツジ、祝日(交差旗)、日の出
下記の通り、Twitter(ツイッター)ではデスクトップでも絵文字が表示されるようになっています。


なお、絵文字のハッシュタグは、#emojipartyのようです。


2015/01/02追記

デスクトップPCからの絵文字ツイート方法を追記しました。

ツイッターで絵文字をモバイル端末からツイートする


絵文字のテストツイートでの表示状況


Android端末よりツイート
はい。問題なく絵文字入りのツイートが出来ました。




PCブラウザでの見え方
・Chrome39.0.2171.95 m
・Firefox34.0
・Internet Explore 11.0.9600.17501

Androidモバイルでの見え方
・Puffinブラウザ
twitter_絵文字_PCブラウザでの見え方

デスクトップだと絵文字がカラー表示されます。



Androidモバイルでの見え方
・Twitter公式アプリ
・chromeブラウザ
・Firefoxブラウザ
・yahooブラウザ
twitter_絵文字_Androidモバイルでの見え方

Androidモバイルから見ると絵文字が白黒になります。('〜`;)
但し、モバイルのブラウザでブログ埋め込みのツイートをみるとカラー表示されます。



絵文字のツイート方法
                     - Android の場合- 


一般的にはモバイル端末からのみ絵文字がツイート出来ます。
(デスクトップPCで絵文字をツイートしたい場合は記事の最後の方を参照下さい。)

モバイル端末から
Google日本語入力のアプリ(無料)をインストールします。
インストール後に、
設定>言語の入力 を選択します。
twitter_絵文字_Android設定>言語の入力

入力は通常であれば、標準の「POBox Touch」になっています。
「POBox Touch」では絵文字が入力できません。
Goole日本語入力にチェックを入れると注意画面が表示されます。
問題なければ、OKをクリックします。
twitter_絵文字_Android設定>言語の入力>注意

チェックが入ったらGoogle日本語入力の右側にあるマークを押します。
twitter_絵文字_Android設定>言語の入力>日本語入力の選択

その後、入力方法をGoogle日本語入力に変更して下さいの画面が表示されるので「次へ」を押します。
twitter_絵文字_Android設定>言語の入力>日本語入力の選択

その後、「Google日本語入力」を選択するラジオボタンが表示されるので「Google日本語入力」を選択します。

公式Twitterアプリの画面です。「いまどうしてる」からツイートする画面です。
日本語入力が「Google日本語入力」に変更されているので記号を押します。

twitter_絵文字_Google日本語入力の記号


絵文字マーク>行事生活>祝日、門松が選択できます。

twitter_絵文字_Google日本語入力>絵文字マーク>行事生活>祝日、門松


絵文字マーク>自然図形>日の出が選択できます。

twitter_絵文字_Google日本語入力>絵文字マーク>自然図形>日の出


絵文字マーク>自然図形>日の出から下にスクロールすると羊が選択出来ます。

twitter_絵文字_Google日本語入力>絵文字マーク>自然図形>ヒツジ


絵文字のツイート方法
                     - iPhoneの場合 - 


iOS端末よりツイート
はい。問題なく絵文字入りのツイートが出来ました。



ios端末での見え方(デスクトップPCでも問題なし)
・Twitter公式アプリ
・Safariブラウザ
・chromeブラウザ
twitter_絵文字_iphone41.png
iOS端末では全てカラーで表示されます。
Android端末でツイートされた絵文字もiOS端末の絵文字の状態でカラー表示されます。ヽ(*´∀`*)ノ

絵文字の送信は特に説明不要というぐらい簡単にできます。
iPhoneなどのiOS端末では絵文字は標準で設定できます。

門松の場合
twitter_絵文字_iphone42.png


羊の場合(2015の絵文字なども簡単に設定できます。)
twitter_絵文字_iphone43.png


日の出の場合
日の出はiOSの方が美しかったですね。
twitter_絵文字_iphone44.png


祝日(交差旗)の場合
twitter_絵文字_iphone45.png


絵文字ツイートの簡単さはiPhoneがAndroidに大差で勝利ですね。

ツイッターで絵文字をデスクトップPCからツイートする
- 2015/01/02追記 -


全絵文字のツイート方法
         - デスクトップPC(モバイル端末を含め)の場合 -



 やっぱり家にいるときはモバイルでのツイート面倒くさいですよね。
デスクトップPCからでも全絵文字872種のツイートはやろうと思えば出来ます。
下記の通り米Twitterが絵文字をオープンソース化しているためです。




サンプルソースがあるので絵文字を表示&クリップボードコピーできるようにしました。
デスクトップPCから絵文字をツイートしたい場合は、下記のサブページを使用ください。

https://mtokusryx.up.seesaa.net/image/twemoji_prevew1.html

実行結果

twitter_絵文字_iphone51.png
Copyright 2014 Twitter, Inc and other contributors
Code licensed under the MIT License: http://opensource.org/licenses/MIT
Graphics licensed under CC-BY 4.0: https://creativecommons.org/licenses/by/4.0/


モバイル端末でも使用できます。
Android端末のChromeブラウザで動かしたイメージ

twitter_絵文字_iphone50.png
Copyright 2014 Twitter, Inc and other contributors


正月の絵文字であれば、上記ぐらいでしょうか?
絵文字はたくさんあるようなのでツイートに合う絵文字を探してみてください。


スポンサーリンク


スポンサーリンク

広告表示LOLIPOP
人気ブログランキング

SNS Bookmarkサービス
Clip to Evernote
posted by マックん at 2015年01月01日03:08 | Comment(0) | TrackBack(0) | Twitter(ツイッター) | このブログの読者になる | 更新情報をチェックする
2014年12月29日
このエントリーをはてなブックマークに追加



スポンサーリンク

【Facebook / Twitter(ツイッター)】OGPイメージを変更してみた


さてと、今日もブログのアクセスを確認するかとアクセスログを確認すると。。
何これ・・・。
いつもとまったく違っていて、
「Twitter(ツイッター)公式アプリに関する不具合?と思ったら #iPhone #Android #アプリ」
にアクセスが超絶集中しているではないですか

人気ページがはるか後方に沈んでます。こんな感じ
facebook_twitter_developers1.png

そういう時のためにマックんのブログでは「Google 今日の急上昇ワード日本」がすぐ確認できるようになってます。
確認すると、事態が飲み込めてきました。
「ツイッター」「Twitter」のGoogle検索自体が急上昇しています。

facebook_twitter_developers12.png
で、「Androidアプリの公式Twitterでログインができない不具合」が発生し、どうなってるんだ!!とググられていたということが理解できました。

Androidアプリの公式Twitterでログインが確かにできません。
そんな検証をしていると、天の声が聞こえました。
「せっかく大量アクセスしていただいているのに、OGPイメージがデフォルトのままじゃないか ごらぁ」
そうです。このページは、画像がないページでOGPイメージはデフォルトのままのため緊張感に欠ける状態だったんです。
緊急だしもっと緊張感を出そうということで急遽、OGPイメージを変更することにしました。

Facebook/Twitter(ツイッター)のOGPイメージを変更する


OGPイメージはFacebookとTwitter(ツイッター)のdevelopersツールを使用します。
facebook_twitter_developers1.png
Facebookでシェアしたときの状態はというと、下記のような感じでした。

facebook_twitter_developers3.png

Twitterの緊急状態に全く反応していない、このサイト管理者大丈夫か?と思われそうです。
Twitter検証の合間の時間を活用し、
まず、FacebookのOGPイメージを変更します。

FacebookのOGPイメージを変更する


Twitter公式アプリをさわっていると、「Twitterの技術的な問題が発生しています」の画像がスナップショットできたのでこれを使用することにします。
サイズは大きいほどいいのですが、無料ブログはディスク容量が生命線ということもあり、なるべく節約しつつOGPイメージを変更できるサイズにしたいので下記の263×130pxにしました。注意点として縦横どちらか200px以上ないとFacebookのdevelopersツールで無視されます。
また、246×470pxよりも小さい場合はこのブログのように画像が縮小されて左側に配置されます。
画像が左側配置でいいなら最初から小さいサイズにしておくべきです。

twitter_error1.png
facebook_twitter_developers10ー.png

FacebookのdevelopersツールのDebuggerのリンクです。

https://developers.facebook.com/tools/debug

このDebuggerに下記のURLを設定してデバッグします。
「Twitter(ツイッター)公式アプリに関する不具合?と思ったら #iPhone #Android #アプリ」

右側の「Fetch new scrape information」を押すとデバッグが始まります。
当然ながら現在の状態はOGPはデフォルトのままということを確認します。

facebook_twitter_developers4.png

「Twitter(ツイッター)公式アプリに関する不具合?と思ったら #iPhone #Android #アプリ」のページに緊急追記をおこないます。その時に、「Twitterの技術的な問題が発生しています」の画像を追記と一緒に投稿します。

facebook_twitter_developers14.png


Seesaaブログの設定>外部連携は下記のようになってます。

facebook_twitter_developers11.png

記事内に投稿した画像があればそれを使用する。
となっているので追記した箇所に画像を投稿すればog:imageが切り替わるはずです。

画像投稿後に再度developersツールのDebugger右側の「Fetch new scrape information」を押すと下記のように変わります。

facebook_twitter_developers5.png

og:imageが変更されました。成功です。
まだ、一番下段のSHAREしたときの画像は変更されてません。

ここでdevelopersツールの真価が発揮されます。
このツールが世にでる前は、古いFacebook画像のキャッシュがどうやっても消えずに画像が切り替わらなかったのです。
ということで、次にdevelopersツールのDebugger左側の「Show existing scrape information」をクリックします。

facebook_twitter_developers6.png

SHAREしたときの画像イメージもデバッグで変更されました。成功です。
これで、FacebookのSHAREボタンでOGP画像が変更されるはずです。

念のため、FacebookのSHAREボタンを実際に押すと下記のように変更されたことが確認できました。

facebook_twitter_developers27.png

少し画像が切れてしまいましたが、時間の余裕があるときに直せばよいでしょう。

次はTwitterにOGPイメージを登録します。

TwitterのOGPイメージを登録する


Twitterでは、もともと何もしてなかったのでOGPイメージが登録されていません。
og:imageがブログで設定されていることはFacebookで分かっているのでCard validatorというTwitterのdevelopersツールでog:imageをデバッグして登録します。
URLは下記になります。

https://cards-dev.twitter.com/validator

「Twitter(ツイッター)公式アプリに関する不具合?と思ったら #iPhone #Android #アプリ」
のURLを含んだツイートをした後に、Card URLに
「Twitter(ツイッター)公式アプリに関する不具合?と思ったら #iPhone #Android #アプリ」
のURLを設定してプレビューするだけです。

facebook_twitter_developers8.png

はい、成功しました。簡単です。

Twitterのタイムラインでは「概要を表示」のボタンしか表示されていないので、概要の存在が分かりにくいですが、「概要を表示」を押すとURLの要約とog:imageが表示されます。
また、ハッシュタグを押した場合も概要が表示される場合があります。

facebook_twitter_developers13.png


ハッシュタグもしくは「概要を表示」を押すと下記のようなイメージで表示されます。

facebook_twitter_developers29.png

これは、画像がきれておらず大成功です。
ということで、FacebookとTwitterの両方できれいに表示できるように事前に画像のサイズとコンテンツの位置などを補正する必要があります。
この画像の微調整が一番の手間といえるでしょう。

このサイト管理者大丈夫か?と思われないように今回はOGPイメージを急遽変更してみました。 スポンサーリンク


スポンサーリンク

広告表示LOLIPOP
人気ブログランキング

SNS Bookmarkサービス
Clip to Evernote
posted by マックん at 2014年12月29日19:22 | Comment(0) | TrackBack(0) | Twitter(ツイッター) | このブログの読者になる | 更新情報をチェックする
ブログパーツ