「ブログ」タグアーカイブ

php – amazon_assie – アマゾンAPI利用アフェリエイトコード

コード

amazon_assieにアクセスキー、シークレットアクセスキー、アソシエイトID、検索キーワードを入れると正方形にして中心に向かってズームインした形の画像リンク配列を返す。

PHP:アマゾンAPI (AWS)で検索結果を表示 その3 – アダルトを除く | マイヤーの開発ブログさんのコードを拝借。ありがとうございます。

動作は艦これ画像まとめたった~のサイドバーを確認のこと。

//RFC3986形式でURLエンコードする関数
function urlencode_rfc3986($str) {
  return str_replace('%7E', '~', rawurlencode($str));
}

function amazon_assie($access, $secret, $Tag, $ama_keywords) {
  $access_key_id     = $access;
  $secret_access_key = $secret;
  $AssociateTag      = $Tag;
  for($i = 1; $i <= 3; $i++) { //2ページ取得、ItemSearchの最大値は10まで
    $baseurl                  = 'http://ecs.amazonaws.jp/onca/xml';
    $params                   = array();
    $params['Service']        = 'AWSECommerceService';
    $params['AWSAccessKeyId'] = $access_key_id;
    $params['Version']        = '2011-08-01';
    $params['Operation']      = 'ItemSearch'; //商品名や著者名でキーワード検索
    $params['SearchIndex']    = 'All';
    $params['Keywords']       = $ama_keywords; //検索ワードを指定
    $params['AssociateTag']   = $AssociateTag;
    $params['ResponseGroup']  = 'Medium';
    $params['Condition']      = 'All'; //中古品も含める
    $params['ItemPage']       = $i; //何ページ目か
    //Timestamp パラメータを追加します
    //-時間の表記は ISO8601 形式、タイムゾーンは UTC(GMT)
    $params['Timestamp'] = gmdate('Y-m-dTH:i:sZ');
    //パラメータの順序を昇順に並び替えます
    ksort($params);
    //canonical string を作成します
    $canonical_string = '';
    foreach($params as $k => $v) {
      $canonical_string .= '&' . urlencode_rfc3986($k) . '=' . urlencode_rfc3986($v);
    }
    $canonical_string = substr($canonical_string, 1);
    //署名を作成します
    //-規定の文字列フォーマットを作成
    //-HMAC-SHA256を計算
    //-BASE64エンコード
    $parsed_url     = parse_url($baseurl);
    $string_to_sign = "GETn{$parsed_url['host']}n{$parsed_url['path']}n{$canonical_string}";
    $signature      = base64_encode(hash_hmac('sha256', $string_to_sign, $secret_access_key, true));
    //URLを作成します
    //-リクエストの末尾に署名を追加
    $url        = $baseurl . '?' . $canonical_string . '&Signature=' . urlencode_rfc3986($signature);
    $amazon_xml = simplexml_load_string(@file_get_contents($url));
    //  print_r($amazon_xml);
    foreach((object)$amazon_xml->Items->Item as $item_a => $item) {
      //アダルト対策
      $adult_dvd = $item->ItemAttributes->Format; //「アダルト」の文字
      $adult_toy = $item->ItemAttributes->IsAdultProduct; //アダルトなら「1」
      if(strpos($adult_dvd, 'アダルト') !== false) {
        continue;
      } elseif(strpos($adult_toy, '1') !== false) {
        continue;
      } elseif($item->LargeImage->URL == "") {
        continue;
      } else {
        $detail  = $item->DetailPageURL; //商品のURL
        $image_w = $item->LargeImage->Width; //画像の幅
        $image_h = $item->LargeImage->Height; //画像の高さ
        if($image_h > 250) {
          $image_h_p = $image_w / $image_h;
          $image_h_e = floor((($image_h_p * $image_h) - 250) / 2);
        }
        $image       = str_replace(".jpg", "._SX260_CR5,{$image_h_e},250,250_.jpg", $item->LargeImage->URL); //画像のURL
        $aferi_box[] = '<div class="amazonbox"><a href="' . $detail . '" target="_blank"><img src="' . $image . '" align="left" /></a></div><br />';
      }
    }

    //  print_r($aferi_box);";
    return $aferi_box;
  }
}

艦これの画像ツイートを定期で公式RTするtwitter bot「艦これ画像RTった~」

艦これ画像RTった~

艦これ界隈は今怒濤の画像ツイートに溢れております。全てを確認するのは無理だし、ハッシュタグなんて滝のような早さです。無理です。というわけで、それらのツイートから画像ツイートを収集し、さらにRTやfavされている画像ツイートだけをRTするBOTを制作いたしました。 それが「艦これ画像RTった~」です。うん。安直な名前ですね。 機能は以下の通りです。

機能

艦これ画像を収集する

大体5分間隔でハッシュタグや通常検索で画像を集めています。アドレスで認識して、既に収集した画像はスルーします。アドレス認識なので、pixivやtinamiなどの画像サービスで作者以外の人が紹介ツイートしても重複する事はありません。 データベースにはおよそ一週間分、ツイートを保管し、それ以降は削除します。一週間後も話題を集める画像はまたRTされるようになるわけですね。

リツイートする

ツイートではありません。リツイートします。ハッシュタグ汚染を考えて15分に一度程度リツイートします。まあ、今の艦これ人気からすると杞憂ですけれども。 収集したツイートから、まだリツイートしていない発言をリツイートします。15分に一度程度の発言では全然追いつきません。解決作はこれから考えようと思います。

現状

今のところ、リツイート数十回に対して画像が数百枚の状況です。どうすんですかこれ、って感じです。方法は考えているのでどうにかできるでしょう。 艦これ画像をもっと見たい。けれどハッシュタグは流れが速すぎて全然追えない。そんな人はどうぞフォローして上げてください。 また、こうすれば良いなどありましたらお気軽に当ブログに声かけください。

アイコン募集中

あ、かわいいアイコンとか提供してくださる方がいらっしゃればと思っております!! 「私の使ってくれてもかまわないぜ」という方がいらっしゃいますれば私、とっても嬉しいなって。

そのTRPGリプレイは誰のもの、目的に合わせて考える書き方と見せ方

そのリプレイ、議事録になってはいませんか

IRCやどどんとふで遊ぶと楽しかった軌跡が確実に残りますよね。特にどどんとふでは、色つきで出力してくれる上、html形式なのでそのままアップロードしちゃえばページとしてコンテンツになっちゃいます。大変便利。

私も見た目を変えるツールなんかを作ったりして、よく利用させてもらっています。

aoringo CHAT logger

さてはて、そういうわけで簡単にログが取れてしまう最近のTRPG事情ですが、それは本当にリプレイでしょうか? 議事録になってやいませんか。今回はそういうお話です。

そもそもTRPG暦が一年にも満たない輩がなに言ってんの? っていう感じですが、お付き合いください。

目的をはっきりさせる

遊んだログを丸々載せる事が無意味だとは言っておりません。例えば遊んだプレイヤーさんが見返して当時を振り返るには、やはり生のログが良いのです。ただ、それを「楽しかったです! 見てください!!」と第三者に見てもらうには、あまりにも大変です。

五時間の文字セッションを遊んだとして、その文字数は全体で数万文字にも及びます。もしかすると数十万文字にも。数万文字というのは感覚的にわかりづらいかもしれませんが、ライトノベル一冊で七万文字程度です。一万文字もあれば、30ページくらいの短編小説ほどの長さになります。

それを「この前こんなセッションしたんだよ」と渡されて、最後まで読む人は何名いるでしょうか、というお話です。一緒に遊んだプレイヤーなら、「面白かったところ」や「特に印象に残ったところ」にさっと移動して「ああ、こんな感じだったよね」と楽しめますが、そのセッションの盛り上がりどころがわからない場合は大変です。この大変さを「負荷」といったりします。

負荷の低いものにするにはどうすればいいでしょうか。方法はいくつかあります。

分割する、短くする、粗筋をつける、見た目を工夫する、効果を活用する。ざっとこれくらい。ひとつずつ見ていきますよ。

ちなみに、web上に公開するリプレイとしてのお話なので、本にしたりするにはまた違ったノウハウなどが必要になるかと思います。でも、大体一緒かなとは考えています。

分割する

本一冊にも及ぶ長々とした文章が、ひとつのページに収まった状況を見た事ありますでしょうか。スクロールバーが恐ろしく小さくなって、それだけで「うっ」となります。場合によっては一文字も見る事なくページを閉じてしまう人もいるでしょう。

最初の一行を見てもらう事がいかに大変か、お分かりになるかと思います。

まずはスクロールバーを大きくしましょう。分割するのです。「part1」とか「第1話」とかつけるのです。それで大体そのページがどれくらいの長さなのか、どれくらいで読み終わるのかがわかります。そこで面白いと思ってもらえれば、次へと移ってくれるはずです。

個人的な考えとして、ひとつのページあたり最大でも一万文字程度が限界だと考えてます。できるなら三千文字程度で抑えられるといいかな、と。

短くする

とにかく削る。ダイスボットの出目や、間延びした会話、相談の内容、はては行動などもガリゴリ削ります。判定は成功したかどうかを書き、戦闘などでお互いが何度もミスをしたらそこをカット。ダンジョンで探索していたら「それからかなりの時間がたち」の一言で時間をかっ飛ばしてもいいですよ?

何度も全体像を見渡して、少しずつ少しずつ影響の低そうなところをとにかく削っていきます。

場合によってはオープニングを一行で済ませて既にダンジョンの前に居る、でも問題ないかもしれませんね。

そのリプレイがロールプレイのやり取りを見せたいのであればそこを濃く、戦闘を見せたいのであればそこを濃くします。そうすると明暗がハッキリと出て読み応えのあるものになります。

粗筋をつける

リプレイの最初に、こんなセッションでしたというのは有効です。内容がわかっても、それが特徴的だったらもっと詳しく見てみたいという人を惹きつける要素になります。

粗筋をどこまでつけるのかは自由ですが、半分以上、最悪エンディングまで書いてしまっても特に問題はありません。10行くらいに圧縮できて、それが面白ければむしろ読みたいと思わせる重要な要素になります。

見た目を工夫する

リプレイ自体の見た目を工夫しましょう。文字がぎゅうぎゅう詰めに詰まっているのは目の毒だし、なにより他の人と一緒の見た目だと読まないままスルーされる可能性すらあります。

好みはあるでしょうが、私の場合は間を大きくあけて文字を少し大きめに、合間に破線を入れております。

これだけでもとても特徴的になります。webページの知識は必要になりますが、勉強しても損はありませんよ。

効果を活用する

これは簡単です。文字の大きさや色を変えるのです。効果的に仕えればとても印象に残りますが、センスが問われますねw 私はやってません。

熱量を大切に

遊んだ後は独特の”熱”があるはずです。それが冷めないうちに是非ともリプレイを作ってもらいたいなと思います。どこが面白くてどこが間延びしたのか、文字では把握しづらい独特な感覚が残っているうちに手をつけたほうが確実に出来はよくなると私は考えていますよ。

そうやって残した物は後になって見返しても確実に楽しいもののはずですし、価値のあるものになるでしょう。そのリプレイが第三者にとって面白いものなのかどうかは最後までわかりません。なにが正解なのかわからないからこそ、こういうものはやりがいがありますよね。

表現、表記、語句の統一を心がける

それぞれのプレイヤーによってその文章の書き方はまちまちでしょう。そういう時によくあるのが表現の違いです。表記の違いでもいいでしょう。笑うときに「(笑)」と「w」で違うときもあるし、「言った」と「いった」とか、「何」と「なに」とか。本当に色々です。リプレイにするとき、これらのゆらぎをどうするか迷うと思いますが、統一するべきです。

これらがゆらいでいると読者が混乱します。誤字脱字、判定方法の間違いなどもその都度、修正や注釈をしていきましょう。読んでくれる人の負荷をできるだけ少なくするように考えるといいかと思います。

同時に、句読点などにも注意を払うようにもします。文字チャットだと句読点をつけないで喋る人や、喋ってしまうことがありますが、著しく読みづらくなる要素なので特に気を配ります。

最後に

楽しいリプレイを書くため、どうすればいいのかという記事は驚くほど少なく、迷うものです。ブログの一コンテンツとしてリプレイをいくつか書き、まとめるには良い時期だと思ったので形にしてみました。

ちなみにこの記事はこの時点で大体2700文字です。ショートショートひとつ分といったところですが。人がさらりと読める文字数は大体これくらい、というのが私の感覚です。そう考えると一万文字というのは結構気合を入れて読む必要があるということ。長くても一万文字にはやっぱり収めたいというのが私の今のところの答えです。

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までオワコンする必要はないと思うのですけれど、皿まで憎い人はやっぱりいるわけですよね!!

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

ダンガンロンパの勢いがやばい(主にブログへのアクセス数的な意味で

かなり前にこんな記事を書いた。

ダンガンロンパ2に絶望した[ネタバレ] | aoringo works

12年の11月なのでほぼ一年前、ダンガンロンパ2を遊んだ感想なのでアニメがあることもまだ知らない感じですね。

この記事へのアクセス数が、アニメが始まった途端マッハで高まった。一体どこからこれだけの人が来るのかまったく検討もつかないが、とにかくアクセスが多い。弱小ブログなのに大体1日に100PVくらいある。

うーん、アニメ人気のブーストって凄いのだなあとのんびり思った次第であります。

トップページよりアクセスが多い。どういうことなの。

ともあれ、これで分かることは「自分が見聞きして感じた事は残して置いた方が良い」ということか。今後も何がトリガーになってアクセスアップに繋がるのかわからない。財産は上手く使っていこう。ということなのかな。

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全般を全力で応援すると共に、楽しい事や面白い事にも全力を出して取り組んでまいります。

SEO – goodkeyword – SEO対策、無料で使える関連キーワード検出webツール

【goodkeyword】Yahoo/Google関連キーワードツール

キーワードによく併用される関連キーワードを探す事が出来るツールです。

無料で使えて、手軽。余計な情報は一切ついてこなくてとても便利です。

試しに「SEO」で検索してみました。対策、無料、相場、チェックなど、よく併用されるであろう単語が並んでおります。

この結果をみて考えたタイトルが「SEO対策! 無料で使える関連キーワード検出webツール「goodkeyword」がスゴイ」です。SEOに適したタイトルを考えるのはブログ運営では必要になる技術です。是非ともマスターしておきたい・・・ですが、正直SEOなんてよくわかんないよーとか思ってました。

今度からはこれを上手に使っていこうかなと思います。

TRPGのリプレイに最適なCSSスタイルを考える

タイトル通りです。

CSSってのは、HTMLの見た目をエレガントにカッチョウヨクデザインする事の出来る特別な文法であります。この機会に勉強するのもよいでしょう。

この記事では、CSSはある程度理解しているという前提に立ち考えていこうかと思いますよ。

pre か p か dl か。

まずどのHTMLタグを使用してデザインをするのか、選定をしていかないといけませんね。

テキストをそのまま持って来るという意味で、一番簡単なのが「pre」タグです。

<pre>
改行なんかも気にせずいけるもんね
わーいわーい
</pre>

brタグなんかを利用しなくてもそのままコピペでいけちゃいますね。ただ、問題点もあります。

それは各行のデザインをする事が出来ないということ。無難なテキスト丸出しなのでションボリーにな感じになりがちです。

二つ目、「dl」タグです。これは辞典などの項目に用いられますね。

<dl>
 <dt>PC1</dt>
 <dd>あいうえお</dd>
</dl>

こんな感じです。見出しと内容でこのように分かれてくれるの比較的見やすい形になるし、CSSでスタイリングもしやすいです。

が、htmlタグを見ての通り、それぞれの項目をタグで包む必要があるので面倒くさいという点があります。

そんなわけで、今回私は「p」タグを利用することにしました。

このブログを作るのに利用されている「wordpress」では、普通に文章を打てば、吐き出されるhtmlデータは全て「p」タグで囲われているのです。

これを利用しない手はありません。

実際にデザインしていく

とはいっても特に難しい事は考えません。見やすい文章になるように細かく調整していくだけです。

<div class="replay">
 <p>PC1:テスト</p>

<p>GM :テテスト</p>

<p>
 PC1:テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト</p>

<p>GM :テ、テスト</p>
</div>

利用するテキストはこんな感じ。div.replayに囲まれた物のみに適応される形ですね。

素のままだとこんな感じ。

まず横幅を大体600pxにします。これは、横長になりすぎるとそれだけでストレスになる場合があるからですね。

読みやすい!

しかし折り返された文章が名前と被って読みづらい気もします。

そこで。

「text-indent」と「padding-left」を使用します。

text-indentは文章の一行目だけをインデントします。

p{
 text-indent:1em;
}

これで、

こんな感じになるわけですね。

じゃあこうしてみると?

p{
 text-indent:-3em;
 padding-left:3em;
 }

こんな感じで二行目以降にインデントする事が出来るわけですね。

他にも色々と装飾を乗っけて、見やすいTRPGリプレイを目指してみて下さいね。

軽く修正してみて最終的にはこんな形に。

<style type="text/css">
 body{
 max-width :600px;
 margin :0 auto;
 }

p{
 margin :0;
 text-indent :-4em;
 padding :10px 0 10px 4em;
 border-bottom :1px dotted gray;
 font-size :12px;
 font-family :monospace;
 }
 </style>

今回のデモは↑より。

また、aoringo worksではIRCやどどんとふの利用により生成されたチャットログを見やすくするためのwebツールを開発しています。

aoringo CHAT logger

こちらもご利用下さいな。

スマフォでのブログ表示が崩れていたので見ている端末によって表示を変えるようにしました

はじめに

ぴゃああああー!!

実は今まで、このブログの見た目になってから主にappleのスマート端末にて表示が崩れている問題を抱えていました。解決がめんど時間を中々見つけられず今まで放置しておりましたが、今回手を加えることにしました。

閲覧している端末を識別して処理を変える

どうやら問題はスライダーにあるようでした。pcでの閲覧には特に問題ないのですが、スマートフォンなどで閲覧すると、スライダー部分の黒が下まで伸びちゃうんですね。JavaScriptの処理周りで不具合があるようです。

そもそもスライダー自体が画像を多用する関係上、野外で使用するであろうスマートフォンでの閲覧には負荷が高めです。スライダー、無くしちゃいましょ。

ユーザーエージェントによってPCとスマートフォン(iPhone / Android)を振り分ける方法いろいろ(PHP / JavaScript / .htaccess等) | HTML5 – CSS3 mag

こちらのphpでの処理を参考に、「PC閲覧での表示の場合のみスライダーを表示」という形にしてみました。

  <?php
  if (is_front_page()) { //トップぺージだった場合
  $ua = $_SERVER['HTTP_USER_AGENT'];
  if ((strpos($ua, 'iPhone') === false) && (strpos($ua, 'iPod') === false) && (strpos($ua, 'Android') === false)) { //スマートフォンではなかった場合
  ?>

こういう感じです。

iphone、ipad、android、それぞれのユーザーエージェントでは無かった場合、PC用のスライダーを表示します。

お手軽ですね。

しっかりばっちり!!

zenbackの新機能「おしらせ欄」を導入してみた。

zenbackは気軽にブログに便利な外部リンクを設置できたりするブログパーツ提供サービスです。

今回新機能として自身が一番見て欲しいページやサイトを表示できるというものが追加されたので早速利用してみました。

zenbackにログインすればすぐにリンクがあります。設定も三項目程度。画像が設定できるのが特にうれしいです。

すでにこのブログの下記に表示されておりますが、ちと画像をミスった感じがします。今度ちゃんとしたやつを自作しようと思います。