プログラマーですが何か?まだプログラマーですが何か?プログラマーネタとアスリートネタ中心。カスタマイズとして、アイテムをクリックした時のイベントをハンドリングする方法を上記で紹介しました。今回はその応用として「クリックしたアイテムがどれかわかるように視覚化する」カスタマイズです。具体例としてはこういう感じを想定しています。普通に棒グラフが描かれているとします:この左から2番目の棒をクリックしようとしているものとします。画面上ではマウスホバーまでしているので、左から2番目の棒の上にツールチップが表示されています:そしてこの左から2番目の棒をクリックした時に「ここがクリックされた」ことを明示することが目的です。下の例では左から2番目の棒のエリアを赤枠で囲って強調されるようにしています:具体的なコード例は以下になります。番目のアイテムがある箇所を強調表示する。の)コンテキスト変数を取得する、というのがミソです。機能や関数を使って自由に描画すればいいわけで、上の例では矩形を指定して色を付けるようにしています。ファイルはテキスト情報が含まれています。内をテキスト検索することができるようになっています:このテキスト部分だけを機械的に抜き出す、というのが今回紹介するテーマです。テキスト情報を抜き出すプログラムを実装してみました。扱うことのできるライブラリがいくつか存在していますが、今回はこれを使いました。ファイル名を指定して実行できるようにしています。(h2-takara-3.pdf)をダウンロードしておいてください。使って試すこともできますが、その場合もあらかじめダウンロードしておいてください。使っている部分を赤字にしました。エラー処理含めてこれだけです。実際に実行してみます。コマンドで実行します。•主要クラウドベンダー、ソフトウェア企業が賛同Kubernetesハンズオンへ日本語含めて正しくテキストが抽出できました。dotnsfむかーしから存在している技術なのですが、イメージマップという便利な機能があります(最近あまり使われなくなったという印象もあります)。ページ内の画像内にクリッカブルな領域を複数定義し、いずれかの領域がクリックされたら何らかの処理を行う、というものです。関数を実行するとか、・・)を変えることができる、というものです。こんな感じで実現します。いらすとやさんの『ホワイト企業~ブラック企業のイラスト』を例に紹介します:このイラスト画像は横650ピクセル、縦137ピクセルです。その中にホワイト企業~ブラック企業が5段階のイラストで表示されています。いう矩形でできています。属性でイメージマップの名称を定義します。記述すればリンクを作成することもできます。いうメッセージが表示されるようになります。元は1枚の画像でしたが、クリッカブルな領域を5箇所定義することができ、それぞれのクリックハンドラを個別に設定することもできました:(左から2番めのビルをクリックした時の様子)ここまでが普通のイメージマップです。このイメージマップ、非常に便利な反面で「レスポンシブ対応が難しい」という難点がありました。要はクリッカブルな矩形領域をピクセル絶対値で指定しているため、画像がそのまま表示された場合はいいのですが、レスポンシブ対応などで画面サイズに合わせて拡大縮小されて画面いっぱいに表示された場合、縮尺が変更になってしまい、絶対値で指定していたイメージマップの定義がおかしくなってしまうのでした。クリッカブル矩形部分となっていて、本来の位置からズレていました。プラグインを使うことで解決できました:以下に具体的な対応手順を紹介します。内でレスポンシブのための宣言をしておきます。画像サイズの調整を行います。dotnsfふと思い立って「モールモール」というパズルゲームを作ってみました。「ゲーム内で使う画像はいらすとや様から入手できるものに限る」という制約を自分に課してみました。いらすとや様から提供されている画像のみを、そのまま(書き足したり、一部だけ切り取ったりせずに)使ってゲームを作る、という条件にしてみました。向けにリリースされた、主人公のモグラを操作するパズルゲームでした。その後、他機種への移植や続編のリリースなどもされましたが、シンプルなルールや操作性もあってか、当時の素人プログラマー達が自分の所有していた機種に勝手に移植して雑誌で発表されていることも珍しくありませんでした。※雑誌にプログラムコードが数ページに渡って記載されていたり、「ソノシート」と呼ばれる片面レコードにプログラム情報が記載されて付録になっていたりした時代がありました。僕はパソコンの所有が大学4年生になってからと比較的遅かったのですが、高校生の頃にポケットコンピュータ(当時の通称は「ポケコン」)と呼ばれる、コンピュータというよりもプログラミング機能付き電卓を持っていました。よるプログラミングもできるものでした。この「縦複数行表示」が当時のポケコンでは珍しく、広い画面を使って「モールモール」をはじめとするゲームを勝手に移植して遊んでいたのでした。その意味で今でも思い入れあるゲームの1つです。この「モールモール」、キャラクターとして必要な画像は6種類(ドア、はしご、土、石、イモ、主人公)と比較的少なく、また基本操作も(パズルをギブアップする時などは例外ですが)上下左右の移動のみなので矢印キーだけで実現できます。敵という概念もないので考えている間にやられてしまったり、敵を撃つ必要もありません。リソース的にも非力なポケコンにピッタリのゲームでした(笑)。=もぐらのイラストこれらの画像に手を加えず、そのまま使っています。モールモールでは「土」がなぜか緑色なのですが、デジタルデータ風背景画像が遠くからみるとそれっぽく見えるのが大発見でした(苦笑)。「イモ」の画像は数種類あったのですが、一番イモっぽく見えたのが「スネークフルーツ」だったのも新発見でした。(^^;で、作ってみました。リポジトリはこちらです:https://github.com/dotnsf/molemoleリポジトリには画像は含まれていません。記載しているので、上記ページを参照ください。簡単に言うと「すべてのイモを取ってからドアまで行けばクリア」です。重力を意識する必要があることと、落ちてくる石をうまく使わないとクリアできない面があったりします。上図は第0ステージですが、この面は普通にイモを取りに行って、そのままドアまで向かえばゴールです。捻くれた取り方をしない限りは詰むことはないと思います。第1ステージはこうなります:この面の場合、何も考えずにイモを取りに行ってしまう↓と・・・、ドアにたどり着く術がなくなってしまいます。ボタンでリセットするしかありません。ステージ追加のカスタマイズ方法も乗せているので、興味ある人はダウンロード後に自分でステージを考えて追加して遊んでみてください。関数を使う機会があります。要素に比較的簡単にアニメーション要素を加えることができます。(矩形の右上)を指定しています。これだけで現在位置から目的位置までの間を(直線的に)移動するアニメーションが実現できます。移動させることで実現できています。ここで紹介したのは位置に関するパラメータでしたが、位置以外でも数字で指定できる要素を使って現在の値から目的の値までアニメーション処理させるだけであれば同様に実現できます。本ブログエントリで紹介するのは曲線的な軌道でアニメーション移動処理させたい場合の方法です。左下から右上まで、円軌道でアニメーション処理させたい場合にどうすればよいか、という場合の方法を紹介します。変化させているだけです)。関数の値が少しずつ変化するたびに、その値を引数(current)にして実行されるます。位置移動する、という方法によってアニメーション処理を実現します。関数を実行しています。軌跡を計算して返しています(※)。要素の位置を変える、という処理を加えています。要素の位置を円曲線に沿って移動させる、という処理を実現しています。求めることができます。)の平方根なので、この数値を計算して求めています。関数で要素を曲線軌道でアニメーション移動させることができます。ブログ検索」ブログパーツは、サービスを終了しました。