ちょっとソース読めば分かること

久しぶりにコーディングしてて思うこと

TISにいた時と、楽天にいた時と、AWSにいた時と、Algoliaにいる今とで、だいぶ色々違うなぁと。

TISにいた時(っていうか、2000年代)は商用のソフトウェアを使うことが多かったから、使ってて"この挙動おかしくね？"って思ってもソースコードを読めるわけでもないし、サポートに問い合わせるのもかったるいし要領を得ない場合も多かったので、呼び出し側の方でラップして、、みたいなことも多かった気がします。

楽天にいた時はオープンソースなソフトウェアをフル活用みたいな感じだったし、英語のドキュメントも積極的に読むようにしてたので、マネージメントが中心なロールだったけど、たまにまとまった実装とかするの楽しかった記憶がある。なんというか、プロダクションに出したとたんに物凄いトラフィックが押し寄せてくるので、"そんなとこにボトルネックあんのかよ"みたいな、エンジニアとしてスリリングなケースが多かったような気がする。

AWSの頃は、ガッツリ認められないとソースコードが見れなかったりするし、それこそ凄い勢いでプロダクトそのものが進化してるので、特定のプロダクトしか追ってなかったし、オープンソースのプロダクトをマネージドで提供しているサービスの場合は、その専門家が世の中にはいるし、もちろんAWSの開発チームやサポートチームの人たちも親切で、自分でなんかしなきゃいけないってことはほとんどなかった気がする。

Algoliaではフロント側のInstanSearchのコードを読むことが多いかもしれない。逆にサーバー側の検索エンジンのコードは社内のプライベートリポジトリにアクセス出来るけど、読みこなすのは容易じゃない。What architecture does Algolia use to provide a high-performance search engine?にも書かれてるけどC++です。そして開発チームの人たちがとてもサポートティブなので、自分で頑張らなくてもサクっと教えてもらえて、その方が早い。

今は、このブログの検索をやりくりするために日々アレやコレやとキャッキャしております。

このブログのクローラー

元々は、AlgoliaのDocSearchというクローラーとUIを提供しているライブラリをを使っていて、クローラーはdocsearch-scraperのDockerイメージを使っていました。コレはコレでお手軽でとてもイイ。

ただ、自分でIndexの設定やUIデザインとかを細かくやりくりしたくなってきて自分でクロールするスクリプト書いたけど、メインのロジックは👇コレだけ。スクレイピングするならHTMLに親和性のあるJavaScriptがイイのかな？とかなんとなくで書いた。

  algoliaJson = [];
  var result = client.fetchSync("https://www.yoshida.red/sitemap.xml");
  result.$("url").each(function(i){
    var loc = result.$(this).children("loc").text();
    var lastmod = result.$(this).children("lastmod").text();
    if (lastmod) {
      var parsedLastmod = Date.parse(lastmod);
      if (parsedLastmod > lastcrawl) {
        algoliaJson.push(generateJson(loc, parsedLastmod));
      }
    };
  });
  console.log(algoliaJson.length);
  index.saveObjects(algoliaJson);  

サイトマップからloc(各ポストのURL)とlastmod(更新日時)を取ってきて、更新日時が前回のクロールした日時(ファイルに取ってある)より新しければスクレイピングするっていうだけで、後はcheerio-httpcliにおまかせ。jQuery使ったことある人だったら私のような普通のオジサンでも使いこなせると思います。

しかし、まぁこの差分っていうのが若干トリッキーで。 私のブログのようにまだ数百ポストしかなければなんでもイイわけですけど、そうじゃない場合もあるだろうし。 ファイルから読んだり書いたりするだけでも、プラットフォームによって色々あったりしそうだし、そのためにデータベースを、、っていうのもなんかね、と。。

そんなこんなでそろそろ大詰めのConversionの取得

検索で発生したリクエストがコンバージョンに結びついたかどうかをトラックするためには、そのクエリの情報を各ブログポストのページからアクセス出来るようにしなければならないわけで、セッションとかクッキーとかURL渡しとか色々方法はあるのですが、クライアントのVue.jsでやりくりしてるのでサーバーのセッションっていうのはちょっとアレだし、クッキーもクロスドメインとか考えるのも面倒だし、、ってことでURL渡しにしました。

コレもまた無知が多くて丸一日かかってしまいました。。んま、また詳細は別途書くとして、、

最終的には👇こんなのをページ下部に仕込んであげて、

    <p>👇Algoliaコンバージョン計測用</p>
    <p>
      <button
        @click="conversionInsights(route.queryID, [route.objectID])"
      >
        Conversion!!
      </button>
    </p>

各Post用のコンポーネントである、Post.vueの👇に突っ込んであげました。

    <div class="vuepress-blog-theme-content">
      <Content/>
      ★ ココ ★
      <hr/>
      <Comment/>
    </div>

ついでに、はてブのボタンも入れてみたけど、動くかな〜

ってか、そんなことを書いているうちに、検索経由じゃない場合にこのボタン押すとエラーになってしまうことが分かったので、👇こんなことしてあげたりして。

    <div v-if="route.queryID">
      <p>👇Algoliaコンバージョン計測用</p>
      <p>
        <button
          @click="conversionInsights(route.queryID, [route.objectID])"
        >
          Conversion!!
        </button>
      </p>
    </div>