タグ別アーカイブ: twitter

パクリツイートで250fav以上稼いだユーザーをブロックする「パクリツイッタラー殺すべし」

パクリツイッタラー殺すべし

アイエエ!! ツイッターはとても楽しく便利なのですが、回ってくるRTとかでたまーにあるのがパクリツイートですね。

このツールでは、そんなパクリツイートのユーザーをブロックして今後見なくても済むようにしてくれますよ。

詳しい解説は製作者さんが記事を書いています→パクリツイートしてる連中を一括ブロックするツール「パクリツイッタラー殺すべし」作った – メモ帳DPA

それでは、早速使ってみましょう。

まずはサイイン+認証。

するとずらずらっと対象のアカウントが表示されますね。明らかにパクリツイートを出してそうなのを見てみます。

ふむふむ。明らかにパクリっぽいですね。というか内容とアカウント名が一致してない気がするのですが。

画像もいけるみたいです。

いくつか気になったアカウントを確認してみて、問題無さそうなら一番下にある「ブロックする」をクリックします。

一掃!!

というわけで、パクリツイートをRTする危険性を事前に排除しておけるツールです。有効活用していきたいですね。

パクリツイッタラー殺すべし

ソーシャルボタンをJavaScriptではなく画像で読み込む

1秒台を目指せ!ソーシャルボタンを高速に読み込む方法を比較する » aoringo works

script.jsでgoogleアナリティクスを読み込む » aoringo works

散々迷っていたのに、結局ソーシャルボタンは画像で読み込むようにしました。

JavaScriptで公式から読み込むと時間がかかるんですよね・・・。数字が出るのは嬉しいのですが、私みたいな弱小ブログではどうせ0ばっかですよ。

JavaScriptで各種ソーシャルボタンを読み込むと3秒かかっていた

詳しくは前回の記事をご覧下さい→1秒台を目指せ!ソーシャルボタンを高速に読み込む方法を比較する » aoringo works

どれくらいの時間がかかるのか良く分かると思います。

ソーシャルボタンを読み込むだけで三秒。これはとても大きな数字です。ページを移動するたびにこれだけの時間がかかるのです。大変な事ですよ。

このストレスはページをみてくださる閲覧者に直接のしかかってきます。恐ろしい事ですね。

じゃあもう画像で読み込んじゃおうよ

というわけで本題です。それならもうJavaScriptを使用せずに、用意した画像で良いんじゃない? ということです。

結果ですが、こうなりました。

トップページの表示速度です。わあ。ソーシャルボタンを画像で表示するだけでこんな速度出るんですね。実際、見てみるとビックリしますよ。

各種ソーシャルボタンを画像で読み込むのは簡単です。

<div class="socialset">
<!-- twitter -->
<a href="https://twitter.com/share?text=テキスト&url=アドレス" target="_blank" rel="nofollow">
<img src="画像アドレス" alt="twitter_share"/>
</a>
<!-- facebook -->
<a href="http://www.facebook.com/share.php?u=アドレス" target="_blank" rel="nofollow">
<img src="画像アドレス" alt="facebook_share"/>
</a>
<!-- google+ -->
<a href="https://plus.google.com/share?url=アドレス" target="_blank" rel="nofollow">
<img src="画像アドレス" alt="googleplus_share">
</a>
<!-- hatena -->
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=アドレス&title=ページタイトル" target="_blank" rel="nofollow">
<img src="画像アドレス" alt="hatena_share">
</a>
</div>

これで読み込めます。その他のソーシャルボタンについては私は利用してないので調べてないです。もうしわけぬい。

また、ワールドプレスの場合は今表示しているページのアドレスを出力する関数がありません。なので、

<?php $url = is_single() ? get_permalink() : home_url();?>

とすると、「$url」変数に投稿ページでは現在のアドレスを。その他のページではトップページのアドレスを表示するようになります。

新規ウインドウでページを開くのと、nofollow属性は念のためつけてます。

JavaScriptでポップアップウインドウ内に投稿画面を開く

こんな奴です。小さなポップアップを出しましょう。新しいタブやウインドウよりは個人的にこっち派です。

jQuery(document).ready(function () {
jQuery(".socialset a").click(function () {
window.open(this.href, 'sosialwindow', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1');
return false;
});
});

ちゃちゃっとjQueryで記述しちゃいます。socialsetクラスのリンクがクリックされたら小さなウインドウを表示するようにします。

これでソーシャルボタンの画像化終了になります。高速! 早い!

ちなみに、各種ソーシャルアイコンは→画像 – Arabiki – 上質なweb素材とソーシャルアイコン類 » aoringo works

ここで紹介している「Arabiki」様より頂きました。日本のソーシャルサービスの画像もあって素敵です。

ソーシャルボタンは必要なものだけ導入しよう

沢山あるソーシャルボタンですが、それの読み込み、どれだけの時間かかってるかわかりますか?

「はてな」「ツイッター」「フェイスブック」「google+」の各種ソーシャルボタンを、何も無い状態のhtmlファイルに読み込ませてみます。

ソーシャルボタンテスト

どうでしたか? 私は2.7秒かかりました。

ソーシャルボタンを読み込むだけでこれだけの時間がかかるんですよ。もちろんこのボタンたちと同時に、ページ自体の読み込みも進みはしますが、この「2.7」という数字は最低かかる事がわかるわけです。

色々考えたすえ、このブログではtwitterとファイスブックのみのボタン導入としてみました。

ツイッター&フェイスブックボタンのみ

一秒近く縮みました。良い感じです。しばらくはこれでテストして見ようかなあという感じです。もっと高速に読み込めれば全てのソーシャルボタンを設置できるんですけれどね。高望みかも知れません。

さて、ボタン整理後の私のサイトですが、計測時間はこんな感じ。

ボタン以外も色々と読み込んでいるのでこれだけの時間がかかるのでしょう。参考にしてみてくださいね。

1秒台を目指せ!ソーシャルボタンを高速に読み込む方法を比較する

どもっち。最近TRPGじゃなくてツールばっかり作ってるaoringoです。サイト調整に奮闘しております。

サイトの速度、気になりますかね? 私は超絶気になりますよ。特にソーシャルボタンです。こいつらが原因で遅くなっているのでは・・・・と常々思っております。

今回はこのソーシャルボタンに手を入れてみましょう。

とはいえ、どれくらい表示速度に違いがあるのか・・・ちょっと確認してみましょうか。

計測に使うのはこちら→【これは便利】あなたのWebサイト表示のどこが遅いかを一発で調べるブックマークレット | Web担当者Forum

お手軽に、正確に表示できるので好きです。

素のコードを記述する

空のhtmlファイルにソーシャルボタンを読み込んだだけのページを作成し、これを計測します。

読み込むソーシャルボタンはtwitter、はてな、facebook、グーグルプラスです。ついでにアナリティクスコードも読み込んでみます。

ソーシャルボタンテスト

時間はこんな感じです。何度かリロードを繰り返してみたところ、2秒~2.3秒かかるようなイメージです。

次、このページをiframeで読み込みます。

iframeテスト

時間的には変わらず。が、一応副次的な効果はありますよ。

iframe内でJSファイルを読み込むため、描写が途中で止まってしまうという事がありません。

また、iframe内で読み込むため検索エンジンとかにはjsファイルを隠せるという利点もあります。どれくらいの効果があるかはちょっとわかりませんが。

あと少し古いブラウザだと正常に動作しません。

 非同期読み込みにしてみる

Facebookやtwitterなどのソーシャルボタンを高速に読み込む方法まとめ | Cappee Design

こういう記事を見つけました。非同期読み込みをする事によって、ストレスフリーに記事を閲覧するというものです。試してみましょう。

twitterボタンを例にしてみます。

 

<a href="https://twitter.com/share" class="twitter-share-button" data-via="moeringo" data-lang="ja">ツイート</a>
<script>!function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.src = p + '://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js, fjs);
}
}(document, 'script', 'twitter-wjs');</script>

<a href="https://twitter.com/share" class="twitter-share-button" data-via="moeringo" data-lang="ja">ツイート</a>
<script>!function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
if (!d.getElementById(id)) {
js = d.createElement(s);
js.id = id;
js.async = true;
js.src = p + '://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js, fjs);
}
}(document, 'script', 'twitter-wjs');</script>

「js.async = true;」を追加で記述するだけです。簡単ですね。

asyncテスト

全体の時間はそこまで変わっていません。あまり効果は無さそうですね。

最近海外で流行りのTwitter,Facebook,Google+1,Analyticsをまとめる非同期スクリプトにはてなを加えてみた | ゆっくりと…

一歩進み、この記事の通り非同期スクリプトをまとめられた人が入るようなので使ってみます。

まとめたテスト

時間的には変わりませんが、スクリプトが圧縮されてるので取り回しが楽です。

script.jsを使う

はい、本題です。script.jsを使いましょう。

Javascriptファイルを非同期に読み込む$script.jsを使ってみた | notnil creation weblog

非同期によるファイル読み込みを行うスクリプトファイルです。イエイイエイ!

使い方はとても簡単です。

$script(['foo.js', 'bar.js'], function() {
  // foo.js & bar.js is ready
})

このようにJSファイルを記述するだけで非同期で読み込んでくれます。今回は全てまとめてこのようにしました。詳しい使い方はドキュメントを見てくださいね。

<script type="text/javascript" src="./script.min.js" charset="utf-8"></script>
<script type="text/javascript">
$script(["//platform.twitter.com/widgets.js", "//connect.facebook.net/ja_JP/all.js#xfbml=1","//b.st-hatena.com/js/bookmark_button.js", "//apis.google.com/js/plusone.js", "//www.google-analytics.com/analytics.js"], function () {
ga('create', 'UA-35371593-2', 'ao-works.net');
ga('send', 'pageview');
})
</script>

アナリティクスコードは正常に動作するかわからないのでしばらく検証、別に記述かするようにしたほうがいいかもしれません。また、script.js自体は非同期で読み込んではいけません。正常に動作しなくなります。

script.jsテスト

いきなり早くなりましたね!なんですかねこれ。全ての読み込みが終わり次第jsファイルの読み込みが始まるのでしょうか。実際全ての表示が終わるのは2秒くらいかかりますが、少なくともロードは全て終わってるっぽいです。恐ろしい・・・。

そんなわけで私はscript.jsを選択しようかなと思います。皆さまも色々試してみてくださいね!!

「艦これ画像RTった~」と「艦これ画像まとめたった~」をアップデート

基本的には閲覧速度の上昇と、機能強化を行いました。

艦隊これくしょんの画像ツイートを公式RTしていくtwitterBOTである「艦これ画像RTった~」と、そのBOTが収集し続ける画像ツイートをwebサイト上で閲覧できる「艦これ画像まとめたった~」の根本で動いているツイート収集機構に手を加えました。

艦これ画像まとめたった~改|ありすぎる艦これ画像ツイートを収集・閲覧!

艦これ画像RTった~ (kankoreRTter)さんはTwitterを使っています

主にNG処理の部分を強化していくことで収集精度を高めております。

今後ともaoringo works共々宜しくお願いいたします。

艦これ画像を収集しRTするtwitter bot「艦これ画像RTった~」を地味にアップデート

[browser-shot width=”450″ url=”https://twitter.com/kankoreRTter”]

艦これの画像が含まれているツイートを収集し、自動でRTするtwitterbot、「艦これ画像RTった~」ですが、地味にアップデートを致しました。

  • DBを走査して新たに追加したNG条件に合うツイートを削除

新たに追加した除外条件は、これまでリツイートをしないだけに止めておりましたが、このたび削除する仕様になりました。

  • フィギュア、ワンフェス系のツイートを対象外に
  • 対象外ユーザーを若干修正
  • コスプレ系画像を対象外に

あとは、コスプレ、フィギュア関係のツイートは収集しないように調整です。あくまでイラスト関係のツイートに絞る方向に行こうという考えなだけで、他意はありません。

対象外ユーザーについては、ニュース系のアカウントを中心に組んでおります。

これからも宜しくお願い致します!

簡単画像公開! 自前のレンタルサーバーに「gyazo」を設置しよう!

gyazo、知ってますか? むっちゃ便利なんですよ、gyazo。

デスクトップに実行ファイルを置き、起動してスクリーンショットを取りたいところをドラッグすると画像がアップロード出来ちゃうのです。その後はtwitterで使うなり、ブログで利用するなり色々と活用できちゃいます。

今見てる自分の画面を他人に見せるのは、以外と手間がかかるものです。それにしては良くそういった場面に出くわすもの。このサービスはそんな私たちにとってまさに救世主ですよ。

ただ、他人のスペースにそのような画像を置くのって怖いし、自分のスペースに置きたいものですよね。gyazoはオープンソースで色々な人が手を入れております。解説記事も沢山ありますので設置は簡単ですよ! さくっと設置して軽快gyazoライフを堪能しましょう!

今回は「さくらインターネット|サーバーホスティングサービス」さんで設置した私の例で紹介しますよ。プランはスタンダードプラン。月々500円で軽快にwordpressも動作するのに初めてのサイト作成にはとってもお勧めですよ!

さくらのレンタルサーバでもGyazoる | おふろめ

ほとんどここを参考にさせてもらいました!ありがとうございます!

記事の通りupload.cgiをダウンロードしてきたら、内容を少し変更します。

File.open("data/#{hash}.png","w").print(imagedata)
↓
File.open("../#{hash}.png","w").print(imagedata)

と変更します。cgiファイルがある場所から一つ上の階層に保存するようになるわけですね。

「upload.cgi」が「cgi_bin」に入っていた場合は画像がこのように保存されていくようになります。好みで変更してください。

cgi.out(headers){"http://gyazo.com/#{hash}.png"} 
↓
cgi.out(headers){"http://hogehoge.com/#{hash}.png"}

あとは帰ってくるアドレスgyazoの物から自分のレンタルスペースのアドレスに変更してやるだけです。簡単!あとはこのcgiファイルをレンタルスペースにアップロードするだけです。ちなみにcgiファイルのパーミッションは700とかにしておきましょう。

[browser-shot width=”450″ url=”http://exe.tyo.ro/2012/02/gyazowingyazowin.html”]

gyazowin+を最新のgyazowinのソースとマージした – tyoro.exe

サーバー側の準備が終わったので次はクライアントを用意しますよ。さくっとzipファイルをダウンロードして解凍しましょう。

iniファイルの設定を変更していきますよ。

[gyazowin+]
upload_server=gyazo.com
upload_path=/upload.cgi

use_ssl=no
ssl_check_cert=yes

use_auth=no
auth_id=
auth_pw=

up_dialog=yes
copy_url=yes
copy_dialog=yes
open_browser=no

use_clipboard_base=no

内容はこんな感じ。うん、シンプル。

「upload_server」はアップロードするサーバーですね。今回の場合は自分のレンタルサーバの物に変更します。

「pload_path」はcgiファイルまでのパスですね。「gyazo」の中の、さらに「cgi_bin」の中に入っていたりしたら「/gyazo/cgi_bin/upload.cgi」とかになりますよ。

残りはとりあえずそのままで大丈夫です。保存してexeファイルを起動して適当な場所でドラッグしてみましょう!

こんな感じでスクリーンショットが取れちゃえばOKです! レッツgyazoライフ! イエーイ!

 

IEの対応なんてハナっからする気なし!「ie-owakon」で楽々と他ブラウザへ誘導

コードをコピペするだけでIE8以下で閲覧したときに警告を表示する『ie-owakon』を作りました | SANOGRAPHIX

IE向けにページを組むのは結構大変です! IE7までCSSがまともに使えない上に未だにIE6がうようよいやがるぜ!!!

とまあ、今ではtwitterですらちょっと前のIEで閲覧すると表示が崩れます。そろそろIEから乗り換えちゃいなよべいべー!! という感じで、IEの対応を最初からする気がないページを私もいくつか作ってきました。

さすがにこのブログではやっておりませんが、aoringo toolsで取り扱っているwebツールではIE8以下で閲覧すると警告が出たりします。

その警告の元が上記サイト様。オワコンちゃんかわいい!! イラストをそのまま載せるのはなんとなくはばかられたので置いてませんが、かわいいんだよね、オワコンちゃん。

デモページは↓

IEはオワコン!

IE以外のブラウザで見るとただの文字列ですが、IEで見ると、

オワコンちゃんが出てきます! かわいい!

ソースはリンク先で配布されていますが、IE10では「 <!–[if IE]>」が仕様変更でただのコメントとして扱われるようになりまともに動作しません。

なのでメタタグに

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">

を追加する事によってIE9のシミュレーションをして表示させることができます。

IE10はCSSとかもある程度できるのでIE10までオワコンする必要はないと思うのですけれど、皿まで憎い人はやっぱりいるわけですよね!!

ちなみに私は特に気にせず実装しちゃう畑なんでわりとどうでもいいです!

twitter上での「ただいま」に「おかえり」と返すのがどうしても違和感を憶えてしまう

「おかえり」はどんなときに使うか

まあtwitterじゃなくてSNSで良いのですけれども、「ただいま」と言う人は大抵は家に帰って余裕を持って発言しているわけですよ。それを見ている私としては、もちろん家にいる場合もあるけれども、仕事中だったりする場合もある。

そういう時に「おかえり」というのは何だか違和感がある。それだけの話です。

コンピュータ文化が広まるにつれてそういう違和感は大きくなってきたかと思います。ただ、今までのチャットなどはほとんどの場合そこの住人がいて、仲間みたいな関係が出来上がった上での「ただいま」「おかえり」がやりとりされます。あそこで交わされる「ただいま」って、あくまでチャットに入ったという意味で「ただいま」「おかえり」だと思うのですよ。まあ、そういう場合、その場所に「居る」私もまた「おかえり」と言いやすい。

けれども、twitterとかスマートフォンとかが普及すると、ちょっと違っているようにも思える。微妙な違和感を覚えてしまう。隙間時間で閲覧できてしまうというのもあるかもしれない。

じゃあなんと言うのが正解なのだろう。「おかえれ」か? とか思ったけれどもはや意味が通じぬのです。

「浮上」って単語のしっくり感

その点からくると「浮上」っていう単語のシックリくる事といったらない。

多分「ただいま」「おかえり」の違和感は、渡し岳が感じていたものではないのだ。バンザーイバンザーイ。

それにしてもすごくしっくりくる。次から使おうかな―と思うけれど、私のtwitterの使い方はぬるぬるっと適当にやっているので「ただいま」も「おかえり」も特に発言しないのだった。

4コマで分かるエリュシオンTRPGに「aoringo CHAT conv」が紹介されました。

ELYSION 4コマで分かるエリュシオン TRPG 第37回「整形しよう」
 リプレイ執筆講座第一回でも触れましたが、リプレイが他の人に読んでもらうためのものである以上、読み物として『整形(書式などを整えること)』が必要になります。 …

twitterで流れてきた知ったのですが、私のツールが紹介されておりました!!

ありがとうございますっありがとうございますっ!!(土下座)

しかもなんか青林檎の絵まで漫画の中に描かれてるじゃないですかっ!

もう全ての文末が「!」で埋まるくらいうれしいわけですよ。本当にありがとうございます。今後もaoringo works共々よろしくおねがいいたします。

ちなみに該当漫画で紹介されているのは、

aoringo CHAT conv

ですね。IRCやどどんとふなどのチャットログを、プレーンテキストで整形して吐き出します。リプレイとして編集する前の読みやすさのため、書籍化にする前の手間の削除のために利用していただけるかなと思い作成されたツールです。

このままだとホームページにあげても見た目が・・・という時のために、

aoringo CHAT logger

というツールもあります。こちらはログをHTMLタグで整形して出力します。ホームページなどを運営している方はこちらもご利用ください。

なお、各種ツールへの要望や、新しいツールの希望などもどしどし受け付けております。当ブログやtwitterでお気軽に問い合わせくださいな。

重ねることになりますが、これからもaoringo worksは「恋と冒険の学園TRPG エリュシオン」やTRPG全般を全力で応援すると共に、楽しい事や面白い事にも全力を出して取り組んでまいります。