アナログCPU:5108843109

ゲームと音楽とプログラミング(酒と女とロックンロールのノリで)

('ω') < 転職した

jQuery入門 #2:classとid

※「jQuery入門する人向け記事」じゃなくて「自分がjQuery入門してみた記事」です

前回作った「コンテンツの開閉スクリプト」と「div自体をリンクにするスクリプト」ですが、
これは汎用的に使えそうですね。
jQuery入門 #1:導入方法と簡単なスクリプト作成 - アナログCPU:5108843109

なので、idを明確に指定して作るのはよろしくない気がします。

idはその名前通り(というかプログラマが「ID」と聞いて想像する通り?)
そのページでユニークに設定できる値です。
1つのページでそのidを持つのは1つの要素だけで、
1つの要素が持てるidは1つだけ。

一方、classというものがあり、
これはidと似た使い方ができるものの、
同じページ内でも複数の箇所で使うことができ、
さらに1つの要素が複数のclassを持つこともできます。

参考
本当のID と Class の違い | CSSPRO

これを踏まえると、idとclassをうまく使い分けてスクリプトを書く必要がありそうです。

div自体をリンクにするスクリプトを汎用化する

まずは簡単そうなこちらから。

前回書いたものは以下のとおり。

<HTML>

<div id="linktest" url="https://google.co.jp">リンクテスト</div>

<JS>

$(function(){
 $("#linktest").click(function() {
  location.href = $(this).attr('url');
 });
});

これは単純にidをclassにしてしまえばOKでした。

<HTML>

<div class="linktest" url="https://google.co.jp">リンクテスト(1)</div>
<div class="linktest" url="https://yahoo.co.jp" >リンクテスト(2)</div>

<JS>

$(function(){
 // ↓idで判別するときは「#id」、classで判別するときは「.class」の書き方
 $(".linktest").click(function() {
  location.href = $(this).attr('url');
 });
});

コンテンツの開閉スクリプトを汎用化する

こちらはスイッチ用のdivとコンテンツ本体のdiv、2つを関連付ける必要があります。

まず、前回書いたものがこちら。

<HTML>

<div id="switch">ここを押すと開閉する</div>
<div id="contents" style="display:none">(開閉したいコンテンツ)</div>

<JS>

$(function(){
 $(".accordion_switch").click(function() {
   obj = document.getElementById($(this).attr(id)).style;
   obj.display = (obj.display == "none") ? "block" : "none";
 });
});

開閉したいコンテンツを増やしつつ、
スクリプトを1つで済ませることができるように書き換えてみます。

HTMLはスイッチ部分に共通のクラスを設定し、
さらにスイッチとコンテンツ本体の組み合わせごとに番号を割り振っていきます。

<HTML>

<div class="acc_switch" acc_id="1">ここを押すと開閉する(1)</div>
<div id="acc_contents_1" style="display:none">(開閉したいコンテンツ 1)</div>
<div class="acc_switch" acc_id="2">ここを押すと開閉する(2)</div>
<div id="acc_contents_2" style="display:none">(開閉したいコンテンツ 2)</div>

jQuery側では、
クリックされたacc_switchの番号に対応するacc_contentsの開閉を切り替えます。
(もっとスマートな書き方があるかもしれませんが、
 いずれにしろこのような感じの考え方で作ることになると思います)

<JS>

$(function(){
 // 「acc_switch」クラスを持つ要素がクリックされたときの処理
 $(".acc_switch").click(function() {
   // 「acc_contents_*」IDを持つ要素のスタイル(へのポインタのようなもの)を取得
   // 「$(this).attr("acc_id")」で、クリックされたacc_switchに含まれるacc_idの値がわかる
   obj = document.getElementById("acc_contents_" + $(this).attr("acc_id")).style;
   // none <=> block の切り替え
   obj.display = (obj.display == "none") ? "block" : "none";
 });
});

これで両方とも汎用化できました。
決めたとおりの命名でタグを書いていけば、
これ以上はスクリプトを書き足すことなく同じ処理を作ることができます。

jQuery入門 #1:導入方法と簡単なスクリプト作成

※「jQuery入門する人向け記事」じゃなくて「自分がjQuery入門してみた記事」です

今までPHPMySQLでバックエンドばっかりごりごり書いてきたツケが回ってきてjsで苦労しているのできちんと勉強したい(言うだけタダ)
とりあえず今のPJがjQueryなので、jQueryの基本的なところをさわってみました。

jQueryの導入

公式ページからダウンロード
  • http://jquery.com/download/
  • 必要なバージョンとかは適宜調べること
    • 今回はとりあえず「Download the compressed, production jQuery 3.3.1」をDL
  • リンクを右クリックでリンク先保存するなり、リンク先をコピペするなり。
使いたいHTMLから読み込む

こんな感じで。

<!doctype html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>jQueryテスト</title>
 <!-- ここでjQueryを読み込んでいる(パスは適宜調整) -->
 <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
jQueryテスト
</body>
</html>

とりあえずこれだけで導入準備が完了、jQueryを使える状態になりました。

参考
年末までにjQueryをマスターしたい人必見!導入マニュアル+すぐ使える厳選プラグイン | Find Job! Startup

スクリプトを書いてみる その1

こんなHTMLがあるとします。

<div>ここを押すと開閉する</div>
<div>===== ↓ここから↓ =====</div>

<div>
(開閉したいコンテンツ)
</div>

<div>===== ↑ここまで↑ =====</div>

ここで、
「1つめのdivをクリックすると、3つめのdivを表示したり消したりする」
というのを考えることにします。

まず「クリックに反応させたい部分」と「表示したり消したりしたい部分」に名前を付けます。
また、表示したり消したりしたい部分はデフォルトでは消しておくこととします。

<div id="switch">ここを押すと開閉する</div>
<div>===== ↓ここから↓ =====</div>

<div id="contents" style="display:none">
(開閉したいコンテンツ)
</div>

<div>===== ↑ここまで↑ =====</div>

ここからがjQueryの出番。
スクリプトjQueryの読み込み部分より後ろに設置します。

<script>
 $(function(){
  // 「id=switch」のかたまりをクリックしたときに起こる処理のかたまり
  $("#switch").click(function() {
    // 「id=contents」のスタイル(へのポインタ的なもの)を取得
    obj = document.getElementById("contents").style;
    // スタイルがnoneならblockに、blockならnoneに書き換える
    obj.display = (obj.display == "none") ? "block" : "none";
  });
 });
</script>

参考
JavaScript・jQueryの関数について
クリックすると展開表示する"折りたたみメニュー"をホームページに簡単に作る方法 | ふかふか交易所

スクリプトを書いてみる その2

こういうただのdivブロックがあるとして、

<div>リンクテスト</div>

この部分を丸ごとリンクにしてみます。

まずはdivに名前を付け、遷移先のURLを指定します。

<div id="linktest" url="https://google.co.jp">リンクテスト</div>

そして以下のスクリプトをやはりjQueryの読み込み部分より後ろに設置するだけ。

<script>
 $(function(){
  $("#linktest").click(function() {
   // 「url」要素に設定されたURLへ遷移させる
   location.href = $(this).attr('url');
  });
 });
</script>

参考
[ド素人メモ] divタグをリンクにする方法(jQueryをさらりと使います)

別ファイル化

先ほどの例であれば、↓の内容で別ファイルに保存します。

/* コンテンツ開閉 */
$(function(){
  $("#switch").click(function() {
    obj = document.getElementById("contents").style;
    obj.display = (obj.display == "none") ? "block" : "none";
  });
});

/* divをそのままリンク化 */
$(function(){
  $("#linktest").click(function() {
    location.href = $(this).attr('url');
  });
});

保存したファイルを、jQuery本体と同じようにHTMLから読み込むだけ。

<script src="js/test.js"></script>

SourceTreeでコミット~プッシュする手順

SVNを長年使っていたのでそもそもまだGitの概念に慣れていない

  • コミット(=ローカルPCのリポジトリ更新)
    • 「作業ツリーのファイル」から、反映したいファイルを選ぶ
      • 「作業ツリーのファイル」は例えば「コミットされていない変更があります」部分をクリックすると出てきたりする
      • ファイル名をクリックし、変更内容を確認し、「インデックスに追加」する
      • 「Hunkをステージへ移動」で、その部分だけを反映することも可能
      • 「Hunkを破棄」で、変更内容を取り消せる
    • 「Indexにステージしたファイル」がある状態で、上部の「コミット」を押す
    • 必要に応じてコメントを入力
    • もう一度差分などを確認し、コメント右下の「コミット」を押すとコミットが完了する
  • プッシュ(ローカルのリポジトリをGitへアップロード)
    • コミットが完了しているとき、上部の「プッシュ」を押す
    • プッシュ先リポジトリとブランチを確認し「OK」

サクラエディタのマクロの作り方

忘れがちなのでメモ。

  • マクロを作って保存
    • 保存先はどこでもよさそうだが1か所にまとめておくべきか
    • 拡張子は「.mac
  • マクロをサクラエディタに登録
    • 設定>共通設定の「マクロ」タブを開く
    • 「マクロ一覧」の参照ボタンを押下し、マクロを保存したフォルダを選択
    • 「名前」に好きな名前を入力
    • 「File」に保存したマクロファイルを選択
    • 「設定」を押下
  • 登録したマクロをキーに割り当て
    • 設定>共通設定の「キー割り当て」タブを開く
    • 「種別」に「外部マクロ」を選択
    • 「機能」で、さきほど入力したマクロを選択
    • 「キー」で割り当て先を選択
    • 「割付」を押下

尚、サクラエディタのオンラインヘルプはこちら。
マクロについても記述あります。
サクラエディタ ヘルプ目次

指定の文字列と同じものをすべて強調表示するマクロ

過去に同じタイトルの記事を書いたのですがそれは秀丸マクロ版。
指定の文字列と同じものをすべて強調表示するマクロ - アナログCPU:5108843109

今回はサクラエディタ版。

なんと1行でOK。

S_SearchClearMark(0);

強調表示を解除するときは何も選択せずに再実行。

複数プロジェクトの開発環境構築

メモレベルというか、結構雑。
気が向いたら掘り下げるかもしれないし掘り下げないかもしれない。

ざっくり環境

手順

GitLab

リポジトリの場所を教えてもらっておく。
自分で作る場合の話は割愛。

SouceTree

これをインストール。
https://ja.atlassian.com/software/sourcetree

たぶん特別な設定は不要。
リポジトリをクローンします。

eclipse(pleiades)

ここから好きなのをインストール。
まあ普通に最新版でよいのでは。
http://mergedoc.osdn.jp/

これも特別設定がいるものではないと思うけど
とりあえず過去に書いた設定系記事を貼っておく。
PHP書くためにEclipseをインストールしたら最初にやる設定 - アナログCPU:5108843109
Eclipseでコード補完ができないとき - アナログCPU:5108843109

クローンしたローカルのリポジトリeclipseで扱えるようにするには
ファイル>インポート>Git>…
で状況に応じてインポートする。

インポートしたリポジトリを例えばPHPプロジェクトとして認識させたい場合は
作業ツリーで右クリックして「プロジェクトのインポート」で
いい感じにやってくれる。

SourceTreeとか介さずに直接Git操作できる気もするけど
現場でSourceTree指定だったのでとりあえずこれで。

XAMPP(PHPのバージョン切り替えに対応)

PHPのバージョンを複数使い分けたいので、
xampp内臓のPHP(とその呼び出し設定)をそれぞれ設置して、
設定を切り替える仕組みを作る。

まずは通常通りxamppをインストール。たぶん最新版でよい。
https://www.apachefriends.org/jp/index.html

ちなみに、ショートカットを作成する場合、
必要そうであれば常に「管理者として実行」してくれるようにしておくと便利。

一旦起動して、Apacheのstartとstopを確認してみる。
大丈夫なら閉じる。

xamppに含まれておらず追加したいPHPをダウンロードしてくる。
https://windows.php.net/download
追加したいバージョンの「VC14 x86 Thread Safe の zip ファイル」を選択。
ダウンロード・解凍したら、以下手順でxamppの諸々を改造。

  • phpを複数設置する
    • xamppのphpディレクトリをバージョン名つけるなどしてリネーム
    • ダウンロードしてきたphpを同じくバージョン名つけるなどして同じところに設置
  • phpのメジャーバージョンが異なる場合はxamppのphp呼び出し部分を切り替えられるようにする
    • xamppのapache/conf/extra/httpd-xampp.conf をバージョン名つけるなどしてリネーム
    • それをコピーして、中身を書き換える(「7」になっているところを全部「5」にするとか)
  • 切り替えを楽にする
    • 例えばシンボリックリンクを利用することにして、以下のようなバッチファイルを用意
      • 実行時は「管理者として実行」
rmdir "C:\xampp\php"
mklink /D "C:\xampp\php" "C:\xampp\php-7.2"

del "C:\xampp\apache\conf\extra\httpd-xampp.conf"
mklink "C:\xampp\apache\conf\extra\httpd-xampp.conf" "C:\xampp\apache\conf\extra\httpd-xampp-php7.conf"

両バージョンで「バッチファイル実行→xampp起動→apache起動」の流れが確認できればOK。

参考
XAMPP の PHP だけをアップデートする | Thought is free
XAMPPで複数のPHPを切り替える (プロジェクト毎にPHPを切り替えてみる)

XAMPP(指定ディレクトリ以下をブラウザで見られる設定にする)

XAMPPの apache/conf/httpd.conf の末尾に以下のような感じで追記する。

# hoge.localhost
<virtualHost *:80>
    ServerName hoge.localhost
    DocumentRoot "C:/dev/hoge/html/"
</virtualHost>

<Directory "C:/dev/hoge/html/">
    Options Indexes FollowSymLinks Includes ExecCGI
    AllowOverride All
    Require all granted
</Directory>

hostsの末尾には以下を追記。

127.0.0.1     hoge.localhost

これでブラウザに「hoge.localhost」でアクセスすれば
例えば C:/dev/hoge/html/index.html が見れるはず。
複数ある場合は単純に全部追記するだけ。

PostgreSQL

まずは本体をインストール。
https://www.enterprisedb.com/downloads/postgres-postgresql-downloads

インストーラに従うのみですが、以下は変更しました。
あと、途中で入力するパスワードは絶対に覚えておくこと。
インストール後、「postgres / (指定パスワード)」でログインできます。

  • Installation Directory(インストール先)を任意の位置に
    • 権限の問題でインストールが失敗したのでユーザーディレクトリよりも下にしました
  • Data Directory(データの保存先)を任意の位置に
    • 少なくともVista時代はProgramFiles以下はちょっと面倒だったようなので
  • Advanced Options(ロケール
    • 「C」にしました

インストールが完了したら設定を変更。
xamppの、php/php.iniの以下4か所のコメントアウトを解除して有効にします。

  • extension=php_pdo_pgsql.dll
  • extension=php_pgsql.dll
  • extension_dir = "ext"
    • フルパスにした方がいいかも(例: "C:\xampp\php\ext")
  • extension=php_mbstring.dll
    • これがないとPHPのmb系関数が使えない

参考
WindowsでPostgreSQLを使ってみよう | Let's Postgres
XAMPPのPHPから接続からPostgreSQLに接続するには | システムエンジニアの憂鬱
XAMPP環境でPHPからPostgreSQLに接続 - 職業プログラマの休日出勤
[PHP] mb_convert_kana() / mb_convert_encoding() などが使えずエラーが発生する時の対処法 | tekboy
PHP - PDOドライバが有効になりません・・・(PHP)(1450)|teratail
Windows版PHPでPDOを有効にする: つれづれネット散歩

あとは開発するだけ

たぶん。
eclipse以外はじめての環境なのでいまいち自信がない。

サクラエディタをsolarizedカラーにする

設定変えるのこわい、という場合は複製して一番下に置いておけばOK

参考
サクラエディタ設定メモ

画面中央に「あ」とか「A」とか出てくるのを消す方法

MicrosoftIMEを使う場合、
デフォルトで画面の中央に「あ」「A」などのポップアップが出る設定になっています。
これを消したい場合以下のように設定すればOKです。

  • タスクトレイの「あ」(または「A」)の上で右クリックし、「プロパティ」を選択
  • 「MicrosoftIMEの設定」画面が表示される
  • IME入力モード切替の通知」の「画面中央に表示する」をオフにする

FEH #9:最近の高難易度マップクリア状況

サイアス

f:id:honey8823:20180521225851p:plain:w300
ペイン吐息ルセアさん&ポールアクス遠反バアトルさん
そして踊り子二人という何も考えてない構成。

伝承リン

f:id:honey8823:20180521225902p:plain:w300
ここ最近だと一番キツかった。
とにかくエフラムを引き離して追撃を取ってもらう感じ。

カンナ

f:id:honey8823:20180521225937p:plain:w300
初めて意識して伝承効果を使ってみた。
フィルさんに風の祝福を持たせてるので、
伝承リン+スリーズで伝承効果をつけて、さらにバレンタインリリーナ様を合わせて
攻撃・速さ・守備の指揮をプラス。
f:id:honey8823:20180521225943p:plain:w300
こんな感じ。ほとんど無双状態でした。

ユリウス

f:id:honey8823:20180521225951p:plain:w300
ここ最近では一番楽だった。
ストーリーとかにとりあえず連れていく感じのメンツでそのままクリア。

特に関係ないのですが

今回はひむかいさんコンビとついでに封印唯一の杖要員であるクラリーネを紹介。

ファ 守備↑HP↓
f:id:honey8823:20180521230845p:plain:w400
たぶんわりとスタンダードな型。
Bは回復にしたり殺し系にしたり。
明鏡の呼吸も付けようかどうか悩み中。
支援相手は↓のレイくん。

レイ 基準値
f:id:honey8823:20180521230900p:plain:w400
敢えて、チュートリアルでもらったレイくん。
斬馬刀がレアすぎるので、貴重な赤の対騎馬要員です。
速さが足りないので状況に応じた殺し系スキルに付け替え。
支援相手は↑のファ。

クラリーネ 速さ↑攻撃↓
f:id:honey8823:20180521231003p:plain:w400
「かわいいから」というだけの理由で花嫁リンからキャンドルを強奪。
f:id:honey8823:20180521231145p:plain
かわいい。
攻撃がかなり低いので回復スキルはほぼリバースで固定。
あとはいざというときに一発二発受けられるような構成のつもり。
Cは騎馬パ以外では付け替えることも。

FEH #8:音ゲーの楽しみ方

まあ音ゲーマーなので単純にスコア詰めはやるんですが
(これは4~5月開催分)
f:id:honey8823:20180521222627p:plain:w250f:id:honey8823:20180521222638p:plain:w250
f:id:honey8823:20180521222643p:plain:w250f:id:honey8823:20180521222649p:plain:w250

最近はよくこんな感じで遊んでいます。
これは「必殺技よろしく何故か武器名を叫ぶ人たち(ただし丸腰)」です。
ロイ様に至っては、武器持ってない方が正しいのでは?と思うくらい自然な構えです。
f:id:honey8823:20180521222921p:plain:w400

普段はアニメオフにしがちなので、
新しく引いたユニットのボイスお披露目会もしてもらっています。
f:id:honey8823:20180521223222p:plain:w400

このサーリャさんのポーズめっちゃ可愛くないですか。
f:id:honey8823:20180521223345p:plain


音ゲーとは全く関係ないんですがロイ様が3人ともだいたい完成したので紹介。

ロイ 守備↑HP↓
f:id:honey8823:20180521223444p:plain:w400
まずは通常ロイ様。
守備は29ですが、1距離攻撃の相手に受けから入りさえすれば
封印の剣と近距離防御×2を合わせると29+4+6+6で実質45。
支援相手をどうしようか悩み中。

ロイ(総選挙) 速さ↑守備↓
f:id:honey8823:20180521223451p:plain:w400
魔防↓が引けたら乗り換えるつもり。
おそらく説明不要なスタンダードタイプ。めっちゃ強い。
Bは一撃離脱に置き換えることもあります。
支援相手はセシリアさん。

ロイ(バレンタイン) 攻撃↑魔防↓
f:id:honey8823:20180521223458p:plain:w400
バレンタインガチャでリン様が出てくるまでの間に6回出てきたロイ様を全部重ねたやつ。めっちゃ強い。
Bスキルは場合によって入れ替えることもありますが、
基本的には支援相手であるバレンタイン父上が苦手としている斧に有利を取りたいので斧殺し。