アプリ屋になりたいブログ

アプリ屋になりたいブログ

アプリの開発と仕事の効率化について紹介するブログ

カイジ名言ガチャ 心がざわざわするガチャ

 

カイジ名言ガチャ

カイジの名言ガチャを作成しました。

ガチャボタンを押して名言を表示してください。

もう一度ガチャを引きたい場合はガチャるをもう一度

2019/05/27更新

その他のガチャやソート

www.apnari.com

f:id:bocbocmm6:20190528014120p:plain

アイマス 765プロダクション所属アイドルのソート あなたの推し順をはかりましょう

IDOLM@STER 765プロダクション所属アイドルソート

IDOLM@STER 765プロダクション所属アイドルのソートを作成しました。どちらか好きな方を選択していってください。

2019/05/12更新

その他のソート

www.apnari.com

f:id:bocbocmm6:20190512022207p:plain

98%OFFでAmazonで商品が買える!価格変動のタイミングを逃さないためのツール「Amazon Price Tracker」

今回はGoogle Chromeの拡張機能「Amazon Price Tracker」について紹介します。

皆さんこんにちは。最近は何を買うにしても、いったんネットで値段を見たりしてから買いますよね。
その中でもAmazonを使う人は多いと思います。皆さんはAmazonの商品の価格が日によって、時間によってかなり変動していることを知っていますか?
Amazonの公式のタイムセールなど以外にもかなり価格の変動が常に行われているのです。その価格変動を利用して、ほしい商品をお得にゲットできます。

ものによっては98%OFFで買えるものも存在します!


価格変動

Amazonでは、本当に時間単位で価格がどんどん変わります。意外とAmazonで買った次の日にもう一度商品を見ると安くなっていたーなんてことはよくあることです。
Amazonの公式のタイムセール(サイバーマンデーやプライムデー)は時期がある程度わかるので狙えますが、日々の価格変動は予測がつきにくいです。
そのため、「この価格以下になったら通知」などを行うことでAmazonでお得に商品を買うことができます。
そのためのGoogle Chromeの拡張機能が「Amazon Price Tracker」です。

Amazon Price Trackerの導入

Amazon Price Trackerの導入手順を紹介します。

1.以下のサイトにアクセスします。
Keepa - Amazon Price Tracker - Chrome ウェブストア

2.「Chromeに追加」ボタンをクリックします。

3.「拡張機能を追加」をクリック

拡張機能を追加
拡張機能を追加

4.Chromeの右上に下記のアイコンがあれば成功です。

Amazon Price Trackerの使い方

1.普通にAmazonのサイトを表示します。
すると商品の下のほうに自動で価格推移のグラフが表示されます。

価格推移の表示
価格推移の表示

価格推移の例

とあるイヤホンの価格推移のグラフを見てみましょう。

価格推移1
価格推移1

この商品は基本的には2980円で売られていることがわかりますね。

さて、以下の期間はどうでしょう。

新品50円
新品50円
ほんの1時間程度ですが価格が50円になっていることがわかります。
つまり2980円⇒50円 約98%OFFです!

しかしほんの一瞬で元の価格に戻ってしまっているので、ここを狙ってとらえるのは難しいです。

価格の通知をONにしよう!

「Amazon Price Tracker」では価格が○○円以下になったら通知をするような機能があります。

1.「Track Product」ボタンをクリックします。

2.目標価格を入力します。
真ん中のテキストボックスをクリックします。

すると価格リストが表示されます。過去6か月の最安値などがリストで表示されます。

クリックすると目標価格が入力されます。リストから入力ではなく手動で入力も可能です。

3.「START TRACKING」ボタンをクリックします。

4.通知方法を選択します。
f:id:bocbocmm6:20190508021103p:plain

普通にメールでの通知や、Facebookのメッセンジャー、Push通知などが選べるので、お好きな方法で。

まとめ

今回は「Amazon Price Tracker」の紹介をしました。かなりAmazonの商品価格が変動していることがわかりましたね。
この情報を知らなければ、かなり損してしまう可能性があります。
うまく価格の変動を利用して、お得なネットショッピングライフを満喫してください。

ソートまとめ

過去に作成したソートのまとめを記事にしました。
何か追加してほしいソートがあればコメントにお願いします。

坂道グループ

乃木坂46(現役1~3期)

www.apnari.com

歴代乃木坂46

www.apnari.com

乃木坂46 1期生

www.apnari.com

乃木坂46 2期生

www.apnari.com

乃木坂46 3期生

www.apnari.com

乃木坂46 4期生

www.apnari.com

欅坂46

www.apnari.com

日向坂46

www.apnari.com

ハロプロ

モーニング娘。

www.apnari.com

Youtuber

www.apnari.com

2次元

ラブライブ μ's

www.apnari.com

私立恵比寿中学

www.apnari.com

f:id:bocbocmm6:20190505182654p:plain

ガチャ

乃木坂名言ガチャ

www.apnari.com

カイジ名言ガチャ

www.apnari.com

ブログにソースコードをきれいに載せる方法(Google Code Prettify)

f:id:bocbocmm6:20190502221222p:plain

こんにちは。下記のようにソースコードの文字を色付けしたり、イタリックに自動でしたりする方法を紹介します。 俗にいうシンタックスハイライトってやつですね。
var main = function(){
  var sample = "どーもこんにちは";
  for(var i=0;i<10;++i){
    console.log("i=:"+i);
  };
  /* 今回はこんな感じでブログに
  ** ソースコードを載せる方法を
  ** 紹介します。
  */
}

使用するライブラリ

今回使用するのはGoogle Code Prettifyというライブラリです。ソースコードに色付けをして、見やすくすることができます。

はてなブログでの設定方法

ライブラリの読み込みは以下の一行です。
  <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"?skin=sunburst"></script>
これでSkinのテーマがSunburstのライブラリが読み込まれます。 はてなブログでは以下の場所に設定します。 ・管理画面から「デザイン」を選択

f:id:bocbocmm6:20190502221559p:plain

・「カスタマイズ」の「フッタ」に先ほどのライブラリ読み込みの1行を追記します。

f:id:bocbocmm6:20190502221751p:plain

・スマホも同じように「フッタ」に設定する

f:id:bocbocmm6:20190502221941p:plain

これでライブラリの読み込みは可能となりました!

記事の書き方

記事は以下のように書きます。 class="prettyprint"のついたpreタグでソースコードを囲みます。
<pre class="prettyprint">
  console.log("ここにソースコード");
</pre>
基本的にはこれだけでいい感じにソースコードに色付けしてくれます。

応用編

対して応用編ということでもないですが、いくつか設定できる項目があるので説明しておきます。

テーマの変更

Google Code Prettifyでは、いくつかのテーマが用意されています。 テーマの設定方法はライブラリの読み込み箇所のskin=sunbursの部分を変更することで可能です。 テーマは「Default」「Desert」「Sunburst」「Sons-Of-Obsidian」「Doxy」から選べるようです。 詳しくはこのページを見てください。

行数の表示

デフォルトでは、行番号が表示されていません。ソースコードを載せて「〇行目でうんたらかんたら」みたいな記事が書けるので、表示しておくとそれなりにメリットがあるかもしれません。 classにlinenumsを追加します。
<pre class="prettyprint linenums">
  console.log("ここにソースコード");
  console.log("ここにソースコード");
  console.log("ここにソースコード");
</pre>
このままだとなぜか5の倍数の行数にしか行番号が表示されません。 1行ごとに表示したい場合は、以下のcssを追加します。はてなブログでは、デザイン⇒ヘッダ⇒タイトル下などに以下のコードを設置するとよいと思います。
<!--↓コード行数表示-->
<style>
.prettyprint ol.linenums > li {
	list-style-type: decimal; 
}
</style>

その他設定

その他の設定や詳細はこのページに詳しく載っています。

注意点

私も実際困ったのですが"<"がpreの内側に入っているとうまく表示してくれません。 その時は「<」を「&lt;」に置き換えて見るとうまく表示されます。

まとめ

今回はGoogle Code Prettifyの導入方法を説明しました。 割と簡単に導入できるので、技術系のブログを書きたい人にとっては必須なのではないでしょうか。 ぜひ皆さま試してみてください。

1日でPV数が1000倍に!ブログ初心者が一日10万PVを叩き出した方法

皆様こんにちは。

ブログを始めて1か月半くらいたった時に、1日10万PVいったので、その要素を分析しようと思います。

f:id:bocbocmm6:20190501151551p:plain

はじめに

私は2019/03/06にブログをはじめました。
30記事程度公開しており、主にエンジニアやサラリーマンに向けた記事を書いていました。1日多くて100PV程度でした。
主な流入元はTwitterでした。99%がTwitterで、Googleなどからの検索流入が1%程度でした。
GoogleのSEO的に3か月程度遅れて効果が出ると聞いていたので、最初の3か月は記事を増やしつつ、Twitter流入を多くしようと考えていました。


10万PVいった記事

www.apnari.com

上記が一日で10万PVいった記事です。タイトルの通り、今をときめく乃木坂46に関する記事です。
※私は乃木坂結成時からずっと応援していたただのオタクです。(笑)

この記事は少し特殊でして、記事というよりは、性質はアプリに近いです。
ユーザーが自分の好きなメンバーを2択で選択していくと、メンバーの推し順がランキング形式で結果表示されるというものです。

ちなみにアドセンスの広告を張っていましたが、一日で最低支払額は余裕で達しました。


10万PVいくためにやったこと・気を付けたこと

対象を絞る

完全に対象は乃木坂46、ひいては46グループのファンに絞りました。今をときめく乃木坂46に興味がある人は、非常に多いと考えたためです。
対象のユーザーが多すぎてもダメ、少なすぎてもダメと考えました。
広すぎても自分に関係ないと思われるし、狭すぎると誰も読みません。
ある程度読み手が自分の興味のあることだ、と思えるようなレベルにしました。

Twitterで報告したくなる内容

できるだけTwitterでユーザー自身がつぶやきたくなる内容にしました。筆者の私一人がTwitterで記事のURLを張って、リツイートしてもらっても拡散範囲には限界があります。
記事を見た人が、私の記事のURLを張って拡散してもらうような仕組みにしました。
今回の記事では、ユーザーが自分が乃木坂46の誰推しかの結果を表示することができます。その結果をTweetボタン一つでTwitterに表示できるようにしました。

その際に気を付けたのが以下の点です。

  • 結果の文字数
  • ハッシュタグ
  • URL
結果の文字数

推し順の結果は1~6位の名前を表示するようにしました。つまり結果の部分のツイート文字数は60文字程度です。
Twitterは140文字という制限があります。結果を載せすぎると、ユーザーが自由につぶやける文字数が減ってしまいます。
「〇〇ちゃんが5位なのが意外だった」
「怖いくらいに当たってる」
「全然外れてる」
などの感想をつぶやいてもらうために、結果をフルで載せすぎず、感想のつぶやきも一緒にできるくらいに調整しました。
こういった感想を見ることでほかのユーザーが「俺の場合はどうなんだろう」と思わず記事に飛んでしまうような仕組みにしました。

ハッシュタグ

これもかなり必要な要素でした。Tweetした内容が共通の文言、ハッシュタグが付いていることでトレンドに載ったりします。
トレンドにのると、なんだろうと気になった人がさらにツイートを検索します。
私はこのハッシュタグをつけていたことによって、4/23のTwitterで「日本のトレンド」に私が作成した記事のハッシュタグがランクインしました。
日本のトレンドに載った瞬間、爆発的にアクセス数が伸びました。
やはりTwitterの性質上、拡散力が恐ろしいほどあります。ここをうまく利用できたのがよかったです。

URL

当たり前ですが、Tweetボタンには、記事のURLを載せました。ユーザーがツイートを見て、ワンタッチで私の記事に飛べるようにするためです。
あとはURLを載せることで、記事のアイキャッチ画像が自動でツイートに表示されます。
画像付きのツイートは文章だけのツイートより圧倒的に目立ちます。このへんもやはり意識しました。

別の記事にユーザーを流しこむ

Twitterから流れ込んできたユーザーを直帰させないために、記事の下に関連記事を載せました。乃木坂に興味がある人は欅坂にも興味があるだろうと考え、欅坂のリンクも貼っておきました。
案の定、ユーザーは別の記事も読んでくれて、うまくPVを伸ばす要因となりました。
専門性の高いブログが有利というのはこういうとこなのだと思います。全部の記事に興味があるから次から次へと記事を読んで、PVが増えていくという


考察

今回の一日10万PVいった経験をもとに考察をします。

動的コンテンツはユーザーが価値を生み出す

これですね。ブログは基本的に筆者からユーザーへの1方向の情報の提供であること。
動的コンテンツなら、ユーザーが自ら参加しているので、ただ情報を受けただけでなく、自分で体験することでユーザー自身が価値を生み出します。
そうすることでTwitterに報告したり、何度もアクセスしたりするといったことにつながるのでしょうね。

Twitterは拡散力の鬼

ツイッターのつぶやきは1ツイートを10万リツイートさせるのは非常に難しいです。しかし同じハッシュタグを1万人がツイートするのは可能なのだと感じました。
しかもそのつぶやきを見る人は、知り合いがつぶやいているのを見ることになるので、より親しく感じることができます。
ハッシュタグを見た人がさらにハッシュタグをつけてつぶやく。この倍々ゲームで恐ろしいほどの拡散力が生まれることがわかりました。

賞味期限はそこまで長くない

ちなみに10万PVいった次の日には1万PVくらいまで落ちてしまいました。そして現在は1千PV程度です。
※それでも今までの10倍のPVですが(笑)
記事がバズっても、それを長続きさせるのはかなり難しいということですね。
しかもブログで安定した収入を得るには、やはりGoogleからの検索流入が安定してあることが大切ですね。


まとめ

今回はかなり特殊な形で10万PVを達成しました。しかも定常的なPVではなく、一時的なPVでした。
Twitter流入はやはり一時的なことのほうが多そうですね。定常的にユーザーを獲得できるように、今後はSEOの勉強していこうと思います。

乃木坂46 3期生メンバーソート あなたの推し順をはかりましょう

乃木坂46 3期生メンバーソート

乃木坂46の3期生メンバーのソートを作成しました。どちらか好きな方を選択していってください。

2019/04/30更新

その他のソート

www.apnari.com

www.apnari.com

www.apnari.com

www.apnari.com

www.apnari.com

www.apnari.com

www.apnari.com

www.apnari.com

www.apnari.com

www.apnari.com

www.apnari.com

f:id:bocbocmm6:20190430130739p:plain

乃木坂46 3期生メンバーソート