見出し画像

久々に機能アップデート

ロフトくん

実に5年以上ぶりの機能アップデート。公開から7年以上経過しますが、現在までご利用いただいておりありがたいことであります。ちなみに前回の機能追加は 2017年2月14日 の CSVダウンロード機能追加 でした。このCSVも自分の歴史を保存するのに便利なのでダウンロードしてみてね。

それでは最近のアップデートをご紹介していきます。

今年前半(2月～4月)は細かなアップデート

  • 一部のURLがhttpのままだったのをhttpsに変更

    • 棋譜(csaファイル)やTwitterでつぶやく際のURL

  • SNSシェア時にカードが付くようにOGPを書いた

    • 僭越ながら画像は私の検索結果スクショとなっている(しかもちょっと昔のデザインの頃のもの、さきほど新しいスクショにした)

裏話(ここは読み飛ばしてOK！) : 特に棋譜ファイルは、某VPSでUbuntu14.04(2019年にサポートが切れているめちゃくちゃ古いOSなのでhttps化できるようにパッケージをアップデートするとかいうレベルじゃなくOS自体をアップデートすべきなスーパー塩漬け環境)上のnginxで公開しており、パッケージなりOSなりをアプデするなり、このOSで動かしている機能(将棋クエスト本家サーバーからのヘッドレスブラウザによる棋譜ダウンロード機能や皆さまの対局履歴を蓄積するMongoDB)の安価な移行先を見つけ移行するなりにより、httpからhttpsにするお時間、お労力、お経済力がとてもとても払えずずっと塩漬けていました。もちろんVPSが悪いんじゃなくてOSのバージョンを上げていない私の怠慢です。VPSは便利なサービスですよ。この塩漬け環境は塩漬けのままとして、暫定対応ですが、ブラウザ <--https--> レンサバ(フロントエンド) <--http--> VPSのnginx(棋譜) となるようにしました。フロントエンドが稼働しているレンタルサーバ上でhttpで棋譜をGETするプロキシ的なコードを書くことで、VPSとフロントエンドはhttp、レンサバとブラウザの間はhttpsで通信にして、ユーザーはブラウザで閲覧しているhttpsなサイトのhttpな棋譜リンクからはダウンロードできないので、httpsな棋譜リンクにしてダウンロードできるようにしました。後述もしますがこの塩漬け環境は少しずつ機能を分解して、新しい環境に移行していく予定です。

秋のアップデート(10月)で使い勝手が大きく向上！

最近(というか、2年ぶりくらい？)、将棋クエストの対局や詰めチャレ熱が上がってきており、履歴検索β開発者である私自身も履歴検索βを利用することが多くなっており、細かい使い勝手にイラッとするところの改善に踏み切ることにいたしました。

サイト表示と同時に自動で検索

履歴検索βのサイトをブラウザやぴよ将棋から開いた際に、前回の検索条件(ユーザー名、持ち時間) がブラウザのCookieに残っている場合はその条件で検索し結果を表示するようにしました。

以下ビデオを見ていただくと分かりやすいです。クエスト棋譜検索ボタンを1クリックで検索結果が表示されます。

何気ない改善ですが、割りと最近の目玉改善です。特にアプリ版ぴよ将棋トップ画面に設置いただいている「クエスト棋譜検索」ボタンから棋譜を検索する際、たったのわずか1ワンタップのみで検索結果を得られ、検索ボタンを押さなくても良くなりましたので、で非常に体験が良くなったと考えております。

裏話(ここは読み飛ばしてOK！)
この機能、前々から付けようと前々から思っていましたが、私のやっつけコードにより、棋譜の検索処理が20回に1回くらい失敗する(原因も分かっていた)ので、真面目に綺麗なコードを書くことが先に必要で、今月そのコードをようやく綺麗にしたため、この"サイトアクセス時に自動で検索結果表示"機能を付けることができたという裏話があります。ちなみにアプリ版将棋クエストが履歴を表示する際に実施しているWebSocketと思われる履歴取得のための通信を律儀に真似るソケット通信処理を履歴検索βの検索処理のために書くことで検索を実現しています。最近、このソケット通信処理で別のAPIを呼び出すことで検索のみでなく、棋譜の取得もできることを検証しましたので、前述の塩漬けサーバーで動いているヘッドレスブラウザによる将棋クエストWebサイトからの棋譜ダウンロード処理をなくし、ソケット通信処理に移行することができそうで、そうなればヘッドレスブラウザは動かせないがソケット通信プログラムは動くレンサバでも稼働可能となるため、塩漬け環境の撤廃を前進できる材料を見出した状況です。なおこの塩漬けサーバでは皆様の対局履歴を保存しているMongoDBも動かしているのでその移行先も見つける必要がありますね、できるだけ某VPSより安く作りたいですが良い環境があるでしょうか？某クラウドのDBは多分高いですよね(詳しくは調べていない)、さすがに自分で手作業でDBのインストールや設定などの構築やメンテをやっている今よりはお値段は高いでしょうか、構築やメンテの労力は減りそうですが、エンジニアとしてそれも勉強ではあるのでどちらを取るかといったところですね。やりたいことは1. 将棋クエスト本家サーバーから棋譜のダウンロードをする(前述のソケット通信が動けばOK) 2. 棋譜をユーザーがダウンロードできるようにする(今はnginx) 3. 対局履歴のDB(今はMongoDB)への蓄積であり、OSのアプデなどという運用からは解放されたいですが・・・そこでxxxですよ！という方、是非アドバイスください。

プレイヤー名タップで検索

以下スクショは、検索対象ユーザー(loftkun)の対局相手の方にリンクがついている例です。このリンクをクリックでそのユーザーで検索し結果を表示します。このように、検索結果に表示されるユーザー名のリンクをタップでそのユーザーで検索できるようにしました。


ちなみに、プレイヤー名タップで検索した場合(や、URLに?user=などのパラメタが付与された状態でアクセスした場合)のユーザ名や持ち時間は、"サイト表示と同時に自動で検索"機能で使用される"前回の検索条件"にすると便利でしょうか？おそらくNoですよね。この場合"前回の検索条件"は更新されません。つまり、サイト(?user=などのパラメタがないURL)を訪れた際は、僕の私のいつもの検索条件(多くの人は自分のユーザー名と一番良く指す持ち時間だと思います)で自動検索してくれます。

裏話 : (ここは読み飛ばしてOK！)
この機能に対応すると、当然、呼び出される検索処理が増えますので、やはりこれも前述の裏話のコード清書が先に必要という裏事情がここにもありました。

Bootstrapを5系に更新

見た目の改善です。スマホ・タブレットを意識してボタンを大きくしてみたり、検索結果の表の横幅を短くコンパクトにしてみたり( 対局日時/勝敗/手数/要因/手合を1カラムに統合しました。先手・後手もそれぞれ1カラムに。 )、検索したユーザー名を緑、その対局相手をオレンジで囲ってみたりしました。スマホで縦長画面で見た場合に使いやすいようにしてみたつもりです。

裏話 : (ここは読み飛ばしてOK！)
本来は初めからスマホ・タブレット向けのデザインで作るのが良いのですが、もともとPC向けだったサイトデザインに、後からBootstrapのエッセンスを取り入れたくらいの改善となっています。
レスポンシブなサイトを作成できるフレームワーク・ライブラリを初めからふんだんに使ったサイトにしてみたいですが、その機会が訪れるかどうかは今のところは分かりません。。。フロントエンドに強い方、アドバイスいただけると助かります！

コラム : え！？ bot が 連続王手の千日手 で反則負け！？

たまたま観戦していたbotが連続王手の千日手で負けていたことで、新しい要因「連続王手千日手」見つけましたので、履歴検索βもこの要因を表示できるようにしました。

裏話 : (ここは読み飛ばしてOK！) 将棋クエストの要因(終局の理由)は内部的には英単語で表されています。全ての英単語を私が確認できている保証はなく、未知の英単語が発見されることがあります。今回はたまたま対局を観戦していて気づきました。英単語は検索結果に表示しても何のことなのか分かりづらいので、日本語にして表示する必要があります。このように英単語の発見とそれが日本語で言うと何かの対応付けをしておいて、そのような対局履歴がHITした際は日本語で検索結果に表示するようにしています。

まとめ
いかがでしたか？5年以上ぶりの機能アップデートとなりましたが、使い勝手が向上していましたら幸いです。裏話は書けば10話分くらい書けそうです(一言でいうと古い塩漬けになっている環境を捨て去りたい。。)が、機会があればまたこのようなアップデート情報を書き残していこうと思います。


この記事が気に入ったらサポートをしてみませんか？