2017-11-19

【刀剣乱舞】「玉集め進捗表」の機能を拡張するブックマークレット

リリースレポート技術 JavaScript ブックマークレット Webサービス

概要

有志によって非公式に運営されている秘宝の里サポートアプリの機能を拡張するブックマークレットを作りました。

deltarium.org

github.com

ブックマークレット公開に際し、「玉集め進捗表」(以下「元アプリ」)作者の@E_ium_alterさんからDMにて許可および情報提供をいただいております。

目的

元アプリは以下の機能を備えています。

回収した玉の数を記録する
報酬の獲得状況を可視化する
回収した楽器の数を記録する
全報酬獲得までの毎日のノルマを計上する

今回作成したブックマークレットは、「その日のAM5:00¹以降獲得した玉の数を計上する」機能を追加します。

f:id:wifeofvillon:20171119183525p:plain

使い方

ブックマークレットとしての導入方法はREADMEに記載してあります。

仕様上以下の2点に注意が必要です。

その日の最初のトライ前に必ず1回走らせる必要がある
次回以降のイベントでは定数の修正が必要である

処理概要

処理内容はざっくり以下のようになっています。

初回起動時、「回収済み累計数」「その日のAM5:00のUNIX時間」をCookieに記録
2回目以降起動時、日付が変わっていたら(AM5:00を過ぎていたら)Cookieの値を上書き
元アプリのCookieが持っている「回収済み累計数」とCookieに記録した「回収済み累計数」差をalertで表示

一度GitHubに公開後、元アプリ作者さんからCookie操作や日付操作に使用しているライブラリを教えていただいたのですが、走り出してしまっていたのでその辺は自分で実装しました。

罠

最初はCookieにexpires情報を持たせてAM5:00にCookieが自然消滅してくれることを想定していた
- expiresがうまく効いてくれなかったのでシステムリセット時刻との比較で日付変更タイミングをはかることにした
- ちなみに元アプリ作者さんにも「経験上expiresはうまくいかない」と言われた
main関数を短く書こうとしてwebpackなど使ってみようと思ったら環境構築がうまくいかなかった
- 結果的にほぼベタ書きした方が早かった
- 総開発時間12時間36分のうち多分3時間くらいはwebpackで彷徨ってる

参考

Cookie周りの参考にしたページはこの記事にまとめてあります。

qiita.com

あとMDNのDateオブジェクトのページは何回も参照しました。

developer.mozilla.org

minifierはこちらを使用しました。

jscompress.com

気づき

main部分だけなら60行くらいしかないスクリプトに1.5人日かかってるあたりアルゴリズムを考える部分の衰えを感じる
typeof関数はundefinedをstring扱いするの本当やめてほしい
もう二度とCookieのexpireには期待しない絶対にだ
Date.getDate()までは単数形でDate.getHours()以下は複数形

それでは~~マニ車~~秘境の里周回がんばりまっしょい

↓劇場版楽しみですね

【Amazon.co.jp限定】『刀剣乱舞-花丸-』歌詠全集(缶バッチ[歌詠全集描き下ろしジャケット版権使用]付)

アーティスト: 大和守安定(CV:市来光弘),加州清光(CV:増田俊樹),へし切長谷部(CV:新垣樽助),宗三左文字(CV:泰勇気),薬研藤四郎(CV:山下誠一郎),前田藤四郎(CV:入江玲於奈),五虎退(CV:粕谷雄太),秋田藤四郎(CV:山谷祥生),乱藤四郎(CV:山本和臣),平野藤四郎(CV:浅利遼太),厚藤四郎(CV:山下大輝),堀川国広(CV:榎木淳弥),和泉守兼定(CV:木村良平),歌仙兼定(CV:石川界人),燭台切光忠(CV:佐藤拓也),鶴丸国永(CV:斉藤壮馬),三日月宗近(CV:鳥海浩輔),陸奥守吉行(CV:濱健人),博多藤四郎(CV:大須賀純),山伏国広(CV:櫻井トオル),御手杵(CV:浜田賢二),鯰尾藤四郎(CV:斉藤壮馬),骨喰藤四郎(CV:鈴木裕斗),一期一振(CV:田丸篤志),にっかり青江(CV:間島淳司)と幽霊退治戦隊,今剣(CV:山下大輝),岩融(CV:宮下栄治),愛染国俊(CV:山下誠一郎),蛍丸(CV:井口祐一),明石国行(CV:浅利遼太)
出版社/メーカー: 東宝
発売日: 2017/12/06
メディア: CD
この商品を含むブログを見る

↓このバッグめっちゃ遠征向きなのでは？？

刀剣乱舞-ONLINE- いざ出陣! ポーチ付きボストンバッグBOOK (バラエティ)

出版社/メーカー: 宝島社
発売日: 2017/12/08
メディア: 大型本
この商品を含むブログを見る

↓陸奥守と歌仙と長曽祢の曲が好き

刀剣乱舞-ONLINE-近侍曲集其ノ一

アーティスト: 母里治樹(Elements Garden)志方あきこ
出版社/メーカー: キングレコード
発売日: 2017/12/27
メディア: CD
この商品を含むブログを見る

イベントマップに進入するためのアイテム補充がAM5:00(とPM5:00)に行われるため↩

2017-10-23

Googleカレンダーにn時間後を指定してイベントを作成するブックマークレット

リリースレポート技術 JavaScript ブックマークレット Google Webサービス

概要

Googleカレンダーに現在時刻からn時間後の時刻を指定してイベントを作成するブックマークレットを作りました。

github.com

ディレクトリ名のスペルが間違ってることはスルーしてください。

medium.com

目的

「艦隊これくしょん」の長時間任務や「刀剣乱舞」の極修行など、「32時間後」「96時間後」にリマインドしてほしいことがたまーに、月に1回くらいあります。

時間を指定してカレンダーにイベントを追加してくれるChrome 拡張機能はよくありますが、「n時間後」を自動算出してくれるものは見たことがないなーと思ってブックマークレットを作りました。

f:id:wifeofvillon:20171023115208p:plain

使い方

URLにsource.jsをコピペしてブックマークを追加する（名称は任意）
使用すると「イベント名」「何時間後に設定するか」を訊くダイアログが出るのでそれぞれ入力する（例：「長曽祢虎徹帰還」「96」）
新しいタブでGoogleカレンダーのイベント作成画面が開かれるので情報を追加・編集して登録

実装

大したことはしていないんですけど試したい場合は開発用htmlファイルを読んでください。

ん？このソース49-50行目の間にもう1行要る

罠

Date.getHours()の返り値が0〜23なので文字列整形前に1足す必要があります。

参考

2017-08-13

Tumblrの各画面とそれぞれのURLについて

Tumblr Webサービス Tips

概要

Tumblrテーマを自作しようと思ったらそもそもTumblrにどんな画面があるのか把握できていない

以下のTumblrを参考にどんなページがあるか確認する

https://good.tumblr.com

概要
ページ一覧
ページごとのマークアップ
参考

ページ一覧

URI	役割	表示できるもの
/	ホームページ(ポスト一覧)	新着n記事
/post/{postID}/	ポスト	特定記事
/likes	スキ！一覧	スキ！を一覧化
/archive	過去記事一覧	過去の記事を一覧化
/tagged/{tagName}	タグページ	特定タグのついた記事
/day/{yyyy}/{mm}/{dd}/	日付ページ	特定の日に投稿された記事
/search/{words}	検索結果一覧	検索結果一覧

他にもありそうだけど個人ブログとして使ってる限りは最低限これくらいあればいいかと

ページごとのマークアップ

Tumblrはひとつのテンプレートで上記のページをマークアップする

そのために{block:XXX}hoge {/block:XXX}のような独自記法で明示する必要がある

ページの種類	タグ
ホームページ(ポスト一覧)	`{block:IndexPage} {/block:IndexPage}` `{block:Posts} {/block:Posts}`
スキ！一覧	`{block:Likes} {/block:Likes}`
タグページ	`{block:TagPage} {/block:TagPage}`
日付ページ	`{block:DayPage} {/block:DayPage}`
検索結果一覧	`{block:SearchPage}{/block:SearchPage}`