棋譜作成用に BesoGo を使ってみる

使ってみる

Web ベースの SFG エディタとして、BesoGo を利用することができる。

f:id:matt-note:20190217002553p:plain

 

GitHub からダウンロードして、ローカルのブラウザで実行することもできる。HTML + JavaScript で作成されているので、軽量のツールとして使うことができる。ブラウザがあれば実行できるので、全ての OS で使うことができる。素晴らしい。ダウンロードが面倒な場合は、上記リンクから Web アプリとして利用できる。

f:id:matt-note:20190217003033p:plain

-> その他の HTML ファイルもブラウザで実行することができる。

 

使い方

白黒マークのボタンで、黒と白を順番に打っていくことができるようになる。

f:id:matt-note:20190217003214p:plain

 

ラベルボタンで、石に数字のラベルをつけることができるようになる。

f:id:matt-note:20190217003450p:plain

 

この2つを使うと、以下のようになる。

f:id:matt-note:20190217003853p:plain

 

「Comment」ボタンを押すとコメントを保存できる。また、「Save」ボタンを押すと、棋譜を保存できる。

f:id:matt-note:20190217004020p:plain

 

保存した棋譜は、「Open」ボタンを押すことで、読み込むことができる。読み込むと、一番左側の何もない状態からになるので、数字をクリックするとで、その時の状態に移動することができる。

f:id:matt-note:20190217004443p:plain

 

まとめ

棋譜作成や棋譜並べをする時に、BesoGo を使うと捗る。

 

bmp ファイルを jpg に変換してみる

以下のようにして、mogrify コマンドに -fomat オプションを指定して実行すれば、bmp ファイルを jpg ファイルに変換できるとのこと。

f:id:matt-note:20190213203033p:plain

 

なお、パスを指定する場合は、-path オプションを指定する。

これによって bmp ファイルを一括して jpg ファイルに変換することができる。

  • cd <bmp_file_path>
  • mkdir jpg
  • mogrigy -path ./jpg -format jpg *.bmp 

 

使ってみる

ここでは、以下の画像を使ってみた。

f:id:matt-note:20190213210331p:plain

f:id:matt-note:20190213210343p:plain

-> サイズを約 1/10 にすることができた。

 

kaminari をカスタマイズしてみる

使ってみる

ざっくりと Bootstrap4 のテンプレートを作成する。

  • bin/rails g kaminari:views bootstrap4

views/kaminari ディレクトリにファイルが作成される。

f:id:matt-note:20190213142246p:plain

コントローラとビューで設定を行うと、デフォルトのページネーションが作成される。

f:id:matt-note:20190213142355p:plain

 

ここで、「最後 >>」を非表示にしてみる。views/kaminari/_paginator.html.slim を編集して last_page_tag メソッドをコメントアウトしてみる。

f:id:matt-note:20190213142622p:plain

f:id:matt-note:20190213142818p:plain

-> 「最後 >>」が削除されたページネーションを作成することができた。

 

数字だけのページネーションにすることもできる。

f:id:matt-note:20190213144342p:plain

 

JavaScript のイベントオブジェクトを使ってみる

はじめに

ここでは、以下の記事を参考にしてイベントオブジェクトを使ってみることにする。

 

使ってみる

まずはイベントオブジェクトを出力してみる。

f:id:matt-note:20190211223526p:plain

f:id:matt-note:20190211223550p:plain

-> id="hoge" の要素をクリックすると、クリックイベントが発生し、その情報を格納しているイベントオブジェクトを出力することができた。イベントオブジェクトは、イベントを処理した要素の情報を格納しているため、clientX, clientY といった座標の値などが格納されている。

 

イベントオブジェクトは、イベントが起きた時にハンドラの引数として自動的に渡されるようになっている。ハンドラ内では、引数で渡されたイベントオブジェクトを使っていくことができるようになっている。

f:id:matt-note:20190211223659p:plain

 

なお、上記イベントオブジェクトの内部は以下のようになっている。

f:id:matt-note:20190211224108p:plain

 

イベントオブジェクトから座標を指定して出力してみる。

f:id:matt-note:20190211225152p:plain

f:id:matt-note:20190211225241p:plain

 

まとめ

イベントが起きた時に、ブラウザはイベントオブジェクトを作成する。イベント発生時に実行する関数(ハンドラ)は、引数でイベントオブジェクトを受け取って、ハンドラ内で処理できるようになっている。

 

JavaScript の addEventListener メソッドを使ってみる

はじめに

ここでは、以下の記事を参考にして addEventListener メソッドを使ってみることにする。

 

使ってみる

addEventListener メソッドの第一引数にはイベントの種類を指定して、第二引数にはイベントが起きた時に実行する処理を記述する。

f:id:matt-note:20190211222707p:plain

f:id:matt-note:20190211223252p:plain

f:id:matt-note:20190211222838p:plain

-> id="hoge" の要素をクリックすることで、指定した処理を実行することができた。また、ダブルクリックすることでも指定した処理を実行できている。

 

まとめ

addEventListener メソッドによって、1つのイベントに複数のハンドラを指定することができる。また、要素に複数のイベントを指定することもできる。

 

JSON.parse と JSON.stringify を使ってみる

はじめに

ここでは、以下の記事を参考にして JSON.parse と JSON.stringify を使ってみることにする。

 

使ってみる

JSON.stringify を使うと、javascript の値をJSON文字列に変換することができる。

f:id:matt-note:20190211213713p:plain

-> 数字のプロパティにも二重引用符がついて、JSON文字列とすることができた。

f:id:matt-note:20190211213958p:plain

 

JSON.parse メソッドに普通の JavaScript のオブジェクトを渡すと、エラーになる。

f:id:matt-note:20190211214153p:plain

 

JSON.parse メソッドを使う時は、引数が JSON として解析できる文字列になっている必要がある。

というわけで、以下のようにすると実行できる。

f:id:matt-note:20190211214413p:plain

 -> 文字列を解析して、JSONオブジェクトに変換することができた。