かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Git 変更のあるファイルの一部だけをコミットしたい。

ファイルを色々変更しちゃったけど、コミットは分けたい時

git add -p を使う

-p オプションで変更のブロック = Hunk(ハンク)ごとにステージにaddするかどうか対話式で選択することができます。

$ git add -p <変更のあるファイル名>

コマンドを実行すると、ファイル内の変更のHunkごと、どうするかが聞きかれます。

  • ステージに追加する場合は y
  • ステージに追加しない場合は n でスキップ
  • 残りのハンクはチェックせずに終了する場合は q

基本的によく使うのはこの3つかなと思います。

変更箇所が7行以上空くと別のハンクとして扱われるそうですが、別にしたい箇所が同じハンクとして表示された場合は

  • s でハンクを分割
  • 上手くハンクを分割できない時は、e で手動でハンクを編集

とすればOK。

サンプル

次のようなステキなリストを作成しました。

// aikatsu.txt
スターライト学園
0. 神崎 美月
1. 星宮 いちご
2. 霧矢 あおい
3. 紫吹 蘭
4. 有栖川 おとめ
5. 藤堂 ユリカ
6. 北大路 さくら
7. 一ノ瀬 かえで
8. 神谷 しおん
9. 三ノ輪 ヒカリ
ドリームアカデミー
1. 音城 セイラ
2. 冴草 きい
3. 風沢 そら
4. 姫里 マリア

↓ 次のように変更してみました

@@ -5,10 +5,10 @@
 3. 紫吹 蘭
 4. 有栖川 おとめ
 5. 藤堂 ユリカ
-6. 北大路 さくら
-7. 一ノ瀬 かえで
-8. 神谷 しおん
-9. 三ノ輪 ヒカリ
+6. 一ノ瀬 かえで
+7. 神谷 しおん
+8. 三ノ輪 ヒカリ
+9. 北大路 さくら
 ドリームアカデミー
 1. 音城 セイラ
 2. 冴草 きい
 3. 風沢 そら
 4. 姫里 マリア
+その他
+夏樹 みくる

Hunk(ハンク)を分割してステージにaddする

みくるちゃん(推し)の追加と北大路劇場の並び替えは別々にコミットしたいと思います。
ターミナルに git add -p <ファイル名> を入力します。

$ git add -p aikatsu.txt
diff --git a/aikatsu.txt b/aikatsu.txt
index 3a2c5fe..d17369b 100644
--- a/aikatsu.txt
+++ b/aikatsu.txt
@@ -5,12 +5,14 @@
 3. 紫吹 蘭
 4. 有栖川 おとめ
 5. 藤堂 ユリカ
-6. 北大路 さくら
-7. 一ノ瀬 かえで
-8. 神谷 しおん
-9. 三ノ輪 ヒカリ
+6. 一ノ瀬 かえで
+7. 神谷 しおん
+8. 三ノ輪 ヒカリ
+9. 北大路 さくら
 ドリームアカデミー
 1. 音城 セイラ
 2. 冴草 きい
 3. 風沢 そら
 4. 姫里 マリア
+その他
+夏樹 みくる
Stage this hunk [y,n,q,a,d,/,s,e,?]?

Hunkが1つで表示されました。これを分割したいのでsを入力すると…

Split into 2 hunks.
@@ -5,12 +5,12 @@
 3. 紫吹 蘭
 4. 有栖川 おとめ
 5. 藤堂 ユリカ
-6. 北大路 さくら
-7. 一ノ瀬 かえで
-8. 神谷 しおん
-9. 三ノ輪 ヒカリ
+6. 一ノ瀬 かえで
+7. 神谷 しおん
+8. 三ノ輪 ヒカリ
+9. 北大路 さくら
 ドリームアカデミー
 1. 音城 セイラ
 2. 冴草 きい
 3. 風沢 そら
 4. 姫里 マリア
Stage this hunk [y,n,q,a,d,/,j,J,g,e,?]?

いい感じに分かるされました。y でステージにaddします。
残りの変更は今回コミットしたくないのでnでスキップするかqで終了します。
f:id:kikiki-kiki:20170627221439p:plain
👆 SourceTreeでステージの状態
Hunkをスキップした部分がワークス―ペース内に残った状態になっています。
これで、さくらちゃんの並び順の変更とみくるちゃんの追加を別々にコミットすることができます!

さらに、美月さんが卒業して、あかりジェネレーションが入学したのでリストを編集しました。

@@ -1,5 +1,4 @@
 スターライト学園
-0. 神崎 美月
 1. 星宮 いちご
 2. 霧矢 あおい
 3. 紫吹 蘭
@@ -9,10 +8,20 @@
 7. 神谷 しおん
 8. 三ノ輪 ヒカリ
 9. 北大路 さくら
+10. 大空 あかり
+11. 氷上 スミレ
+12. 新条 ひなき
+13. 服部 ユウ
+14. 紅林 珠璃
+15. 天羽 まどか
+16. 黒沢 凛
+17. 大地のの
+18. 白樺リサ
 ドリームアカデミー
 1. 音城 セイラ
 2. 冴草 きい
 3. 風沢 そら
 4. 姫里 マリア
 その他
+神崎 美月
 夏樹 みくる

Hunkが分かれていますが、 美月さんの卒業と、あかりジェネレーションの入学のコミットがいい感じに分かれていません。
美月さんの卒業をコミットした後で、あかりジェネレーションを追加、17, 18の ののりさは編入なので、これもコミットを分けたいと思います。

ターミナルに git add -p <ファイル名> を入力します。

$ git add -p aikatsu.txt
diff --git a/aikatsu.txt b/aikatsu.txt
index d17369b..2b59a87 100644
--- a/aikatsu.txt
+++ b/aikatsu.txt
@@ -1,5 +1,4 @@
 スターライト学園
-0. 神崎 美月
 1. 星宮 いちご
 2. 霧矢 あおい
 3. 紫吹 蘭
Stage this hunk [y,n,q,a,d,/,j,J,g,e,?]?

最初のHunkが表示されます。この部分はコミットしたいのでyを入力。
次のHunkに進みます。

@@ -9,10 +8,20 @@
 7. 神谷 しおん
 8. 三ノ輪 ヒカリ
 9. 北大路 さくら
+10. 大空 あかり
+11. 氷上 スミレ
+12. 新条 ひなき
+13. 服部 ユウ
+14. 紅林 珠璃
+15. 天羽 まどか
+16. 黒沢 凛
+17. 大地のの
+18. 白樺リサ
 ドリームアカデミー
 1. 音城 セイラ
 2. 冴草 きい
 3. 風沢 そら
 4. 姫里 マリア
 その他
+神崎 美月
 夏樹 みくる
Stage this hunk [y,n,q,a,d,/,k,K,g,s,e,?]?

この部分は分割したいのでsで分割します。

Split into 2 hunks.
@@ -9,9 +8,18 @@
 7. 神谷 しおん
 8. 三ノ輪 ヒカリ
 9. 北大路 さくら
+10. 大空 あかり
+11. 氷上 スミレ
+12. 新条 ひなき
+13. 服部 ユウ
+14. 紅林 珠璃
+15. 天羽 まどか
+16. 黒沢 凛
+17. 大地のの
+18. 白樺リサ
 ドリームアカデミー
 1. 音城 セイラ
 2. 冴草 きい
 3. 風沢 そら
 4. 姫里 マリア
 その他
Stage this hunk [y,n,q,a,d,/,k,K,j,J,g,e,?]?

分割され最初のHunkが表示されました。
この部分はコミットしたくないので n でスキップします。
( j で未確定にして次のHunkに進んでもOK。)

@@ -12,7 +20,8 @@
 ドリームアカデミー
 1. 音城 セイラ
 2. 冴草 きい
 3. 風沢 そら
 4. 姫里 マリア
 その他
+神崎 美月
 夏樹 みくる
Stage this hunk [y,n,q,a,d,/,K,g,e,?]?

この箇所はコミットしたい部分なので y を入力。
ステージは次のような感じになっています。
f:id:kikiki-kiki:20170627224136p:plain
神崎先輩の位置を移動させたものだけがステージに上がっているので、コミットします。

連続した変更箇所を手動で別のコミットにする

次にあかりジェネレーションのリストから、17,18 ののりさ を別にしてステージにaddしたいと思います。

$ git add -p aikatsu.txt
diff --git a/aikatsu.txt b/aikatsu.txt
index eef8b0c..2b59a87 100644
--- a/aikatsu.txt
+++ b/aikatsu.txt
@@ -8,6 +8,15 @@
 7. 神谷 しおん
 8. 三ノ輪 ヒカリ
 9. 北大路 さくら
+10. 大空 あかり
+11. 氷上 スミレ
+12. 新条 ひなき
+13. 服部 ユウ
+14. 紅林 珠璃
+15. 天羽 まどか
+16. 黒沢 凛
+17. 大地のの
+18. 白樺リサ
 ドリームアカデミー
 1. 音城 セイラ
 2. 冴草 きい
Stage this hunk [y,n,q,a,d,/,e,?]?

変更箇所が連続していて s でHunkを分割することができないので、e で手動で編集を行う必要があります。
e を入力すると下記のようなdiffを編集するエディタが立ち上がります。
そこから、差分を作成することで、Hunkを分割することができます。

Manual hunk edit mode -- see bottom for a quick guide.
@@ -8,6 +8,15 @@
 7. 神谷 しおん
 8. 三ノ輪 ヒカリ
 9. 北大路 さくら
+10. 大空 あかり
+11. 氷上 スミレ
+12. 新条 ひなき
+13. 服部 ユウ
+14. 紅林 珠璃
+15. 天羽 まどか
+16. 黒沢 凛
+17. 大地のの
+18. 白樺リサ
 ドリームアカデミー
 1. 音城 セイラ
 2. 冴草 きい
# ---
# To remove '-' lines, make them ' ' lines (context).
# To remove '+' lines, delete them.
# Lines starting with # will be removed.
#
# If the patch applies cleanly, the edited hunk will immediately be
# marked for staging.
# If it does not apply cleanly, you will be given an opportunity to
# edit again.  If all lines of the hunk are removed, then the edit is
# aborted and the hunk is left unchanged.

今回は17. 18. の追加を無しにしたいので下記のように、その行を削除してファイルを保存しました。

Manual hunk edit mode -- see bottom for a quick guide.
@@ -8,6 +8,15 @@
 7. 神谷 しおん
 8. 三ノ輪 ヒカリ
 9. 北大路 さくら
+10. 大空 あかり
+11. 氷上 スミレ
+12. 新条 ひなき
+13. 服部 ユウ
+14. 紅林 珠璃
+15. 天羽 まどか
+16. 黒沢 凛
 ドリームアカデミー
 1. 音城 セイラ
 2. 冴草 きい

ファイルの編集が完了すると、先程のdiffファイルの内容だけがそのままステージに反映されています。
f:id:kikiki-kiki:20170627225454p:plain
diffファイル内で削除した内容も元ファイルは変更箇所としてワークスペースに残っているので失われることはありませんでした!!
 

対話式コマンドのオプション
Stage this hunk [y,n,q,a,d,/,j,J,g,e,?]?

? でヘルプを表示することができます。

option mean
y stage this hunk
ハンクをステージにaddする
n do not stage this hunk
ハンクをaddしないでスキップ
q quit; do not stage this hunk or any of the remaining ones
このハンクをaddせず、残りの未確定なハンクもaddしないで終了
a stage this hunk and all later hunks in the file
これ以降のハンクを全てaddする
d do not stage this hunk or any of the later hunks in the file
これ以降のハンクはaddしない
g select a hunk to go to
指定したハンクへ移動
/ search for a hunk matching the given regex
正規表現でハンクを探す
j leave this hunk undecided, see next undecided hunk
このハンクは未確定のまま、次の未確定のハンクに移動
J leave this hunk undecided, see next hunk
このハンクは未確定なまま、次のハンクに移動
k leave this hunk undecided, see previous undecided hunk
このハンクは未確定のまま、前の未確定のハンクに移動
K leave this hunk undecided, see previous hunk
このハンクは未確定なまま、前のハンクに移動
s split the current hunk into smaller hunks
ハンクを分割
e manually edit the current hunk
手動でハンクを編集
? print help
ヘルプを表示

※ 当方、英語力に全く自信がありません!

まとめ・感想

git add -p を利用すると、興が乗ってしまい色々編集しちゃったファイルも後からコミットすべき単位に比較的簡単に分ける事ができそうです。
まぁ最初から計画的にファイル編集してこまめにコミットすれば済む話ではありますが。覚えておいて損はなさそうです!特にWEBさいととかのCSSとかではやってしまいがち…

また、GUIのSourceTreeは変更箇所はHunk毎に表示されているので、ボタンからハンク毎にステージにaddすることができます。
f:id:kikiki-kiki:20170627230332p:plain
ただ、ハンクを分けたり手動での変更はGUIだけでは難しいみたいです。

 
某会社でGitを本格的に導入するということで使い方のワークショップをさせてもらいました。
僕自身、現場で使いながら覚えたゆるふわ理解だったので、ワークショップをするにあたって改めて入門gitを読んだのですが、対話形式でステージにaddしたり、変更の1部 Hunk別にaddするの方法が書かれていたり、ログを検索する git blam の便利なオプションや、運用に当たってのブランチの作り方など、改めて勉強になることがたくさんありました!

入門git

入門git


[参考]

アイカツ!1stシーズン Blu-ray BOX1

アイカツ!1stシーズン Blu-ray BOX1

WordPress 投稿が0件でもpost_typeを取得したい。

WordPresspost_typeを取得する場合 通常 get_post_type() を使うのですが、投稿が無い時(0件の時) get_post_type()false を返すため今のページのpost_typeを取得できない場合があります。(カスタム投稿タイプを作って投稿が0件のアーカイブページとか)

Source File: wp-includes/post.php

<?php
function get_post_type( $post = null ) {
    if ( $post = get_post( $post ) )
        return $post->post_type;
    return false;
}

引用元: get_post_type() | Function | WordPress Developer Resources

これは投稿がないとglobal $postがNULLなためget_post( $post )が見つからないのでfalseが返る仕様になっているようです。

get_query_var() を使う

get_query_var( 'post_type' ) を使うと、投稿が0件で $post が NULL の時でも、そのページのpost_typeを取得することができます。

<?php
$post_type = get_query_var( 'post_type' );
echo  $post_type;

カスタム投稿タイプなど投稿が0件でもアーカイブページを表示したり、グローバルナビゲーションなどでpost_typeが必要になる場合はこちらを使うのが良いのではないかと思います。

EX: post_type を取得する関数

アーカイブページ・シングルページなどで分けてpost_typeを返す関数を作成してみました

<?php
function get_current_post_type() {
  // is_home() 投稿の一覧がページになっている時用
  if( is_archive() || is_home() ) {
    $post_type = get_query_var( 'post_type' );
  } else {
    $post_type = get_post_type();
  }
  return $post_type;
}

 
はてなblogさん。。。
マークダウンで引用内にコードブロック出力するにはどうしたら良いのですか???エンジニア系のblogだと結構必要じゃない?


[参考]

PHP56 Macを再起動したらlibphp5.soが消えてapacheが起動できなくなった。

Macを再起動して普段通りapacheを起動しようとしたら次の様なエラーが表示されるようになってしまいました。先方の環境に合わせてPHP56です

$ sudo apachectl start
httpd: Syntax error on line 170 of /usr/local/etc/apache2/2.4/httpd.conf: Cannot load /usr/local/opt/php56/libexec/apache2/libphp5.so into server: dlopen(/usr/local/opt/php56/libexec/apache2/libphp5.so, 10): image not found

HomebrewでインストールしてあるPHP56のディレクトリ(/usr/local/opt/php56/)を見に行くと、libexec ディレクトリが無くlibphp5.soが存在していませんでした。※ Macシャットダウン・再起動で消えたのか定かではありません。Macの再起動前までは問題なくApacheは起動していたのですが…

PHP56を再インストールしたら解決

HomebrewでPHP56を一度アンインスールし、--without-ldap--with-httpd24 オプションを付けてPHP56を再インストールしたらlibphp5.soが作られ問題が解決しました。

$ brew uninstall php56
$ brew install php56 --without-ldap --with-httpd24

参考にしたGitHubのissueには--without-ldap だけでOKのような感じだったのですが、今回の場合、--with-httpd24オプションを指定しないとlibphp5.soが生成されることはありませんでした。
しかし、なぜ突然この問題が発生したのかが謎です…

追記
PHP56を再インストールしたらlocal環境のWordPressでデータベース接続エラーになってしまいました。どうやらlocalhostのDBに接続できなくなっていたようなのでで、php.inimysql.sock関連を指定してあげる必要があるようです。
php.iniは/usr/local/etc/php/5.6にあります。

mysql.default_socket =mysql.sock のパスが記されているので、下記の箇所もこのパスを指定します。

  • mysqli.default_socket =
  • pdo_mysql.default_socket =

参考: [php]mysqliでNo such file or directoryが出る - Qiita


[参考]

↑ 今ならコレ解決できたかもしれない…

PHP Carbonを使って週表示のカレンダーを作りたい。

週だけ表示できる良い感じのカレンダーが見つからなかったのでPHPで作ってみました。
日付の処理はLaravelでも使用されているCarbonが便利らしいので、これを使うことにしました。

仕様

  • 簡易に曜日と日付が表示できればOK
  • 週の始めは月曜 / 日曜
  • 前後で月が変わる部分も表示する

CarbonをComposerでインストー

$ composer require nesbot/carbon

週カレンダーを作成するスクリプト

<?php
require 'vendor/autoload.php';
use Carbon\Carbon;

/**
 * 週カレンダーの配列を返す関数
 * @param: $startSun(:Boolean)
 *         true ... 日曜から始める
 *         false ... 月曜から始める
 * @param: $date(:String) ... 今日の日付
 */
function getWeekCalender($isStartSun = true, $date = "") {
  $today = new Carbon( $date );
  $todayDay = $today->day;
  $startDate = getStartDay( $today->toDateString("Y-m-d"), $isStartSun );
  $startDay = $startDate->day;
  // 週の最終日を取得
  // note. コピーを作成しないと元のインスタンスの値が変更される
  $lastDay = $startDate->copy()->addDay(7)->day;

  // 開始日のある月の最終日を取得
  $limitDay = $startDate->copy()->endOfMonth()->day;

  $month = $startDate->month;
  $offset = $limitDay - $startDay;
  $day = $startDay;
  $weekArr = [];
  $i = 0;
  while($i < 7) {
    $day = $startDay + $i;
    // 月を跨いだ時
    if( $day > $limitDay ) {
      $day = $i - $offset;
      if($day === 1) {
        $month += 1;
      }
      if($month > 12) {
        $month = 1;
      }
    }
    if($isStartSun) {
      $week = getWeekByIndex($i);
    } else {
      $week = getWeekByIndex($i+1);
    }
    $weekArr[] = [
      'month' => $month,
      'day'   => $day,
      'week'  => $week,
      'today' => $todayDay === $day? true : false,
    ];
    $i++;
  }

  return $weekArr;
}

/**
 * 週の最初の日を取得
 * @param $today(:String) "Y-m-d"
 */
function getStartDay($today, $isStartSun) {
  $dt = new Carbon( $today );

  // $today が週の内何日目か (Sun = 0)
  $w = $dt->dayOfWeek;

  // 月曜始まりのとき
  if( !$isStartSun ) {
    // 今日が日曜なら前の月曜
    if($w === 0) {
      $w = 7;
    }
    $w -= 1;
  }

  return $dt->subDay( $w );
}

function getWeekByIndex($i) {
  $arr = ['Sun.', 'Mon.', 'Tue.', 'Wed.', 'Thu.', 'Fri.', 'Sat.'];
  $len = count($arr);
  if($i >= $len) {
    $i -= $len;
  }
  return $arr[$i];
}

使い方

<?php
// 今日の日付を指定する場合は第ニ引数で指定
// ex: 月曜始まり 2017年3月3日 のある週カレンダー
$weekCalenderData = getWeekCalender(false, "2017-03-03");

// カレンダーを出力
foreach($weekCalenderData as $val) {
  $th .= "<th>{$val['week']}</th>\n";
  $td .= "<td>{$val['day']}</td>\n";
}
echo "<table><tr>${th}</tr><tr>{$td}</tr></table>";

↓ 出力

Mon. Tue. Wed. Thu. Fri. Sat. Sun.
27 28 1 2 3 4 5

感想とか

Carbon は月末日とか簡単に取得できて凄い便利なのですが、関数を使うと元のオブジェクトの日付が変更されてしまう破壊的メソッド(?)なので、元の日付から色々計算した日付を取得したい時はcopy()メソッドを噛ませてオブジェクトを複製しないとハマりそうだなって思いました。


Signalize!/カレンダーガール

Signalize!/カレンダーガール

CSSで三日月を描く

三日月は地球の影が月に重なってできています。なので、CSSで三日月を描くには同じように月になる円形の上に背景色と同じ円形をずらして重ねればOKなのですが、これでは背景がパターンだったりすると困ります。
月部分以外が透過になっている三日月をCSSで描く方法を考えました。

サンプル

See the Pen CSS CRESCENT MOON by KIKIKI (@chaika-design) on CodePen.

1. borderを使って描く

border-radiusで作った円形の中にborderの円を作り、これをずらして不要な部分をoverflow:hiddenで隠してしまう方法

.moon
  position: relative
  display: block
  margin: 2rem
  width: 10rem
  height: 10rem
  background-color: transparent
  border-radius: 50%
  overflow: hidden
  &:before
    position: absolute
    content: ''
    display: block
    top: -20px
    left: -45px
    width: 10rem
    height: 10rem
    border: 30px solid $moon-color
    border-radius: 50%

borderの円の位置をtopとleftで調整して三日月にするのですが調整が少し難しいです。

2. box-shadow を使って描く

border-radiusで作った円形の内側にbox-shadowを使って描く方法

.moon
  display: block
  margin: 2rem
  width: 10rem
  height: 10rem
  background-color: transparent
  box-shadow: inset -12px 5px 0 3px $moon-color
  border-radius: 50%

こちらの方がシンプルで描画やアニメーションを付けるにも調整しやすい感がありました。
box-shadow サポート状況


f:id:kikiki-kiki:20170613072232g:plain
全く関係ないけど、LGTMが透過で付けれるサービスが欲しい…
練習がてら自分で作ろうかな。

おうち用 NEW マシンをセットアップしたお話。

家族が使ってるマシンが古いせいか遅すぎてストレスがあると言うことだったので、新しいマシンを見繕いました。

  1. ちょっとしたWEB閲覧くらいでしか使用しない
  2. 起動などの動作が軽快であること
  3. 持ち運びが簡単だと良い
  4. 老眼になってきているので拡大できると良い

上記の条件から、新しいiPad (第5世代) を導入してみることにしました。(新しいiPadお安いですし)
f:id:kikiki-kiki:20170530135144j:plain
こんな感じです

自宅使用でのメールなどはやはりキーボードの方が書きやすいので、Apple純正の1つ前のキーボード(MC184J/B)を導入。JIS版でもBluetooth接続でiPad (第5世代) で問題なく使用できており、英数・かな キーでiPadの入力言語を切り替えられるのでMacのUSキーに慣れて無くても使用することができます!(最新のMagic Keyboardは上下キーが打ちにくいので、使わなくなったらこのキーボードは僕が貰おうと企んでる)

また、外出時でも使えるようにSIMフリー版にして、DMM mobileの1Gプラン(月額500円程度)を入れています。
DMMのプランはその月に余った分が持ち越しできるので、ほぼ自宅使用なら1Gでも十分ですし、なによりランニングコストが格安なので助かります。
SIMフリーで使えるセルラー版はAppleのストアでしか購入できないという点だけが少しメンドーでした。

現状はiPadスマートフォン的な使い方への慣れの問題で戸惑う部分もあるようですが、起動の速さや、設定で最初から大きな文字にできたり、WEBページを拡大できたりする部分での満足度は高いようです。
それと、自宅の机上で使うときとかに高さが出せるスタンドが、覗き込む姿勢になったり、片手でずっと持っておかなくて済むので楽で良いと好評でした。
 
今回やりたい事や今までPCでやってた事を聞いて、iPadを導入してみて使っているのを見ている限り、ネットとかあまり詳しくない家族がPCでやってた範囲のことはタブレット端末で出来ることで十分なように感じました。
個人的にラップトップとかデスクトップとかは、特にマウスとかは将来的にはプログラマとか研究施設とか特殊な仕事の人が使うものになっていって、タッチペンでノートのように使えるタブレットが一般家庭や事務職とかで使われていくようになるんじゃないかなぁ〜なんて考えてましたが、改めてそうなっていきそうだなって思いました。
(それより、Facebookでよく見る人のページをブラウザでブックマークしていたのを、「Facebookでブックマークしたからアプリでもブックマークしたの見れるはずだ!」とか言い張られた時にはビックリしました。ブラウザ自体の機能と、そこに表示されているWEBページ・WEBアプリ内の機能の違いを理解してないって結構あるんだろうなぁ〜って学びになりました。  

以下 今回導入したモノのリスト。

SIMフリー版 (セルラー版) は今の所Appleでしか取り扱ってないらしい…

Apple Wireless Keyboard (JIS) MC184J/B

Apple Wireless Keyboard (JIS) MC184J/B

個人的に上下キーがこちらの方が使いやすいという理由で導入。
JIS配列の英数・かなでiPad(第5世代)の入力言語の切替可。

iPadを縦・横置きできるスタンド。
常にiPadを持っておかなくて済む・机の上において覗き込む姿勢にならなくて済むという事で好評。
付いてる粘着シートはかなり強力。粘着シート使わなくても結構安定してます。

保護シート。
シートというよりガラス板だったけど、貼る用のガイドも付いていて大きな画面でもズレずに貼ることができた。(予備シートは無し)
ただ、厚さがそれなりにあるのでタッチパネルの反応は少し悪くなってるかもしれません。

iPad (第5世代)はnano SIM。
データ持ち越しプランは凄い!
(後はDMMが2段階認証と複数の決裁カードを登録できるようになるととてもありがたいです…)

なぜかAmazonでDMMのSIMが売っていて、ここで買うと初期手数料が掛からないらしいですが… 試してないので真実や如何に?

Node.js NPM 自分でインストールしたパッケージ名だけをリスト表示したい

npmでglobalにインストールしたパッケージが何だったか忘れてしまうことがよくあります。
プロジェクト毎にインストールしたものならpackage.jsonを見れば済むのですが、globaにインストールしたパッケージを見る時はコマンドでリスト表示する事が多いと思います。

globalにインストールしてあるパッケージは下記コマンドで見る事ができます。

$ npm list -g

ただ、このコマンドでは依存関係のパッケージもずら~っと表示されるので、自分でインストールしたものが分かりにくいです。

--depth 0 オプションを使う

--depth 0 オプションをつけると、依存関係のパッケージを非表示にした第一階層のパッケージ名だけが表示されるので、自分で何をインストールしたか判り易いです。

$ npm list -g --depth 0

愛の夢~リスト:ピアノ名曲集

愛の夢~リスト:ピアノ名曲集

WordPress テンプレートをまたいで使えるグローバル変数を作りたい。

header.phpfooter.phpなど別れているテンプレートで共通の表示や値を使いたい時、ハードコーディンしてると修正があった時面倒とか、管理画面から入力された値を使って出力したい場合、共通の変数にしてテンプレートで使いまわせると便利かもしれません。

global変数を作る

WordPressPHPでできていて全ページでfunction.phpが使われているので、ここにglobal変数を設定してしまえば、header.phpとかsingle.phpとかのテンプレート内でもこの変数を使うことができます。

■ function.php

<?php // function.php
function my_setup() {
  global $my_global_var;
  $my_global_var = "たーのしー!";
}
add_action( 'after_setup_theme', my_setup );

下記のようにfunction.phpのトップレベルのスコープに変数定義を書いてもWordPressグローバル変数になるようです。

<?php // function.php
$my_global_var = "たーのしー!";

■ header.php や single.php などのテンプレートで使う

<?php
global $my_global_var;
echo  $my_global_var; // "たーのしー!"

当然WordPressのglobal変数や使用しているプラグインの変数を書換えてしまう可能性もあるので、変数を取得できる関数を作成する方が安全だとは思います。
独自のglobal変数を使う場合はWordPressのglobal変数を汚染しないようにprefixなどを付けた変数名を付けるのが良いと思います。


[参考]

国連でも通じる 世界の非ネイティブ英語術

国連でも通じる 世界の非ネイティブ英語術

WordPress ページを使用しているテンプレートから取得したい

固定ページを取得したい時、ページ名が決まりきっているならget_page_by_title( $page_title )を使うのが手っ取り早いです。( get_page( $page_ID ) はテスト環境・本番環境で制作してると両者でIDが違ったりするので使いづらい )

しかしながら、get_page_by_title()もページ名で取得するので管理画面に入力された値に依存するハードコーディングな訳ですから管理画面からページのタイトルを変更されてしまうとエラーになる可能性がありるので、なんだかなー。です。

使っているテンプレートファイル名からページを取得する方法

1. get_pages() で取得する方法

<?php
$pages = get_pages([
  'meta_key'   => '_wp_page_template',
  'meta_value' => '[page-template-file].php',
]);

foreach($pages as $page){
  echo "{$page->ID}: {$page->post_title}<br>";
}
// 内部的に get_posts を呼んでいるようなのでメインクエリをリセット
wp_reset_postdata();

2. WP_Query() で取得する方法

<?php
$query = new WP_Query([
  'post_type'  => 'page',
  'meta_key'   => '_wp_page_template',
  'meta_value' => '[page-template-file].php',
]);

if( $query->have_posts() ) {
  while ( $query->have_posts() ) {
    $query->the_post();
    $pageID = get_the_ID();
    $pageTitle = get_the_title();
    echo "{$pageID}: {$pageTitle}<br>";
  }
}
// メインクエリをリセット
wp_reset_postdata();

まぁ固定ページのテンプレート外でページのデータを使いたいなんて結構特殊ケースだと思いますが、 例えば特定のページテンプレートにカスタムフィールドなどを付けていて、固定ページのテンプレート外でこの値を取得したような場合はこの方法でページテンプレートのファイル名からページを取得することできました。
※ ページテンプレートが複数のページで使われている場合、該当する全てのページが取得されます
 

いつも書いてるケド、久々のWordPress!!
いわゆる受注のWEBサイト制作ってまだまだWordPressで〜ってのが多いですね。積極的に受注案件をしてないので忘れた頃にやってきて毎回なにかしらハマってる気がする…


[参考]

WordPressのツボとコツがゼッタイにわかる本

WordPressのツボとコツがゼッタイにわかる本

Git Submoduleのディレクトリを変更したい

サブモジュールのディレクトリを変更するのにハマったのでメモ。

EX
環境: git version 2.12.2

サブモジュールの追加

$ git submodule add git@my_module.git

追加した my_modulevendor/my_module に移動させたい。

1. ディレクトリを変更する方法

  1. .gitmodules を開いて[submodule] と path= の2箇所のパスを変更
    [submodule “vendor/my_module”]
       path = vendor/my_module
       url = git@module.git
    
    $ git add .gitmodules
  2. サブモジュールを移動させる
    $ mk dir vendor
    $ mv -vi my_module vendor/my_module
    
  3. 旧サブモジュールのGit管理対象から除外する
    $ git rm –cached my_module
  4. .git/modules にあるサブモジュールを変更するパスと同じ状態に変更する
    1. vendorディレクトリを作成し、my_modulevendor内に移動させる
    2. .git/modules/vendor/my_module/config を編集
      worktree= に続く相対パスを移動させたサブモジュールになうるように変更 (ディレクトリを変更したら../の数に気をつける)
      worktree = ../../../../vendor/my_module
  5. サブモジュールの指定されているパスを変更
    vendor/my_module/.gitをエディタで開きgitdir:に続く相対パス4.で移動させたmy_moduleになるように変更する (ディレクトリを変更したら../の数に気をつける)
    gitdir: ../../.git/modules/vendor/my_module
  6. .git/configに記述されているサブモジュールのパスを変更する
    [submodule “vendor/my_module”]
     url = git@github.com:chaika-design/my_module.git
    
  7. 新しいサブモジュールのディレクトリをgit管理下に追加
    $ git add vendor
  8. 変更状態を確認
    $ git status
    On branch master
    Changes to be committed:
     (use “git reset HEAD …” to unstage)
    modified: .gitmodules renamed: my_module -> vendor/my_module
    サブモジュールがrenamedになっていればOK
    .git/modules/vendor/my_module/configvendor/my_module/.gitのパスを間違えているとgit statusした時にfatal: Could not chdirというエラーが出るのでその場合はパスを見直す
  9. 問題がなければ変更をコミット
    $ git commit
    $ git submodule status
    b5852af17275cXXXXX vendor/my_module (heads/master)
    
    わーい。できた〜!

2. サブモジュールを一度削除して再登録する方法

  1. サブモジュールの登録を解除
    $ git submodule deinit my_module
    .git/configからsubmoduleの設定が消える
  2. サブモジュールの削除
    $ git rm my_module
    .gitmodulesに記入されたsubmoduleの指定とサブモジュールのディレクトリが消える
  3. $ git commitでサブモジュールの削除をコミット
  4. 再度変更したいディレクトリを指定してサブモジュールを追加
    $ git submodule add git@my_module.git vendor/my_module

 
Git Submodule クセが強すぎて辛い。不用意にgit resetとかするとハマりまくる… ディレクトリの変更がうまくいかない場合は、サブモジュールを削除したコミットログが残ってしまいますが一度git submodule deinitでサブモジュールを削除して、再度変更するディレクトリにgit submodule add する方が楽かもしれないと思いました。(ディレクトリ変更の方法だと手順も多いし… )

 
記事内容とは関係ないけれど、
はてなブログのマークダウンでリスト内にコードブロックを書く方法が知りたい…
直接HTML書いてるんだけど……. つらい


[参考]