この超メモ帳の中をランダムアクセスするボタンを作った。
やっべー、今日はプログラミングで遊んでたらブログを書く時間が随分と遅れてしまった。僕は何かにはまり込むと過集中ぎみになってしまう傾向があるから気をつけないと。でも、そのおかげで成果物はできたぜ。合わせて読みたいの下部にテスト運用的にランダム記事アクセスボタンを設置しましたぜ。こいつ。
記事を読んだ後にこのボタンをクリックすると・・・。無限にこの超メモ帳の中を彷徨うことができます。今まで投稿してきた記事をランダムにアクセスできるようにする処理を作ってみました。ボタンをクリックすると過去記事のどこかに飛びます。
や、見た目的には単純そうに見えるかもしれないけど、裏側でやってる処理は結構めんどくさいです。ちょっと今日の記事は時間も掛けられないからその処理を適当に説明するか。
まず、アクセスするためのURLのデータはGoogleスプレッドシートに保存してあります。これは夜中にクローラを回してRSSをスクレイピングしてURLのデータをGoogleスプレッドシートに保存する処理を作ってあります。このスクレイピングのGoogle App Scriptのコードに関しては、他人の作ったコードをパクッってきて動かしてるだけなので偉そうにここに貼り付ける訳にもいかんだろう。
こんな感じのデータベースです。
twitterの方で僕のアカウントをフォローしている人ならわかると思うけど、一日一回ランダムにツイートするシステムを組んであるでしょ。あれと参照しているスプレッドシートは一緒なんですよ。そこんとこからテキトーにランダムにデータを取ってきてからJSONとして吐き出すようにGASのスクリプトを組んであるんすね。こういうやつ。これをWebアプリとしてデプロイしてWebAPIにしてるんですね。
// 記事一覧を書き出すシート var TARGET_SHEET = "シート1"; // ツイート対象から除外するシート var EXCLUDE_SHEET = "シート2"; function getData_() { var ss = SpreadsheetApp.getActiveSpreadsheet(); var sheet = ss.getSheetByName(TARGET_SHEET); var lastRow = sheet.getLastRow() var obj = {}; // スプレッドシートの更新とタイミングが重なった場合は何も投稿しない if(lastRow == 0) return obj; var urls = sheet.getRange("D1").offset(0, 0, lastRow).getValues(); // ランダムに情報抽出 var is_exclude = false; while(is_exclude == false) { var rand = Math.ceil(Math.random() * lastRow - 1); var url = urls[rand][0]; var ex_row = findRow(ss.getSheetByName(EXCLUDE_SHEET), url, 1); if(ex_row === 0) { is_exclude = true; } } // 配列に格納して返す obj['url'] = url; return obj; } // シート内検索 function findRow(sheet, val, col){ if(sheet == null) return 0; var dat = sheet.getDataRange().getValues(); for(var i=1; i<dat.length; i++){ if(dat[i][col-1] === val){ return i+1; } } return 0; } // JSONを表示 function doGet() { var data = getData_(); if (data['url'] == null) return; return ContentService.createTextOutput(JSON.stringify(data)) .setMimeType(ContentService.MimeType.JSON); }
こいつをjqueryのajaxので受け取ってaタグのリンクを書き換えてるだけです。
<!-- この辺りでランダムリンクを取得して表示させてみる。 --> <div><a id="random_link" class="btn-stitch" href="javascript:void(0);">ランダム記事(テスト中)</a></div> <script> function get_past_article() { // aタグを無効にして、中身の方を読み込みアイコンに変える $('#random_link').css('pointer-events', 'none').attr('tabindex', -1); $('#random_link').html('<i class="fa fa-spinner fa-spin fa-1x fa-fw"></i>'); // 非同期で読み込んでリダイレクト jQuery.ajax({ type: 'get', url:'https://script.google.com/macros/s/***********/exec', // googleスプレッドシートでデプロイしたURL dataType:'json', data:{}, success:function(res){ document.location.href = res.url; }, error:function(){ console.log('jsonを取得できませんでした。(get_past_article)'); } }); } $(document).ready(function () { $("#random_link").on('click', function () { console.log('click'); get_past_article(); }); }); </script>
や、今日は時間がないから適当にしか説明してないけど、もうちょっとデザインとかは工夫したい。今日思いついて２時間ぐらいでぱぱっと作っちゃったシステムなのでバグがあるかも。Googleスプレッドシートが無料で使うことができる稼働時間とかもちょろっとしか調べてないからアクセスが集中したりすると止まるかも。できればテキトーに無料で使えるホスティングサービスを探してDBも用意してnode.jsで作った方が良いかも。ちょっと時間があればもうちょい詳しい説明の記事を上げます。
このランダムアクセスシステムについては自分が暇つぶしをするときに無限ネットサーフィンをするのに使えるかなと思って作ってみたのですね。ちょっと読者諸氏も適当に使ってみてバグとか見つけたらコメントの方から連絡ください。また、サイトが重くなるようなら止めますんで期間限定のシステムかもしんないです。まぁ、しばらく運用してみて問題なさげなら、他の人でも使えるようにドキュメントを書きます。