React RouterのBrowserRouterがbuildの時、使えない

症状 create-react-appを使って、プロジェクトを作成・開発して、npm startした時は、正しくコンポーネントが描画されるのですが、npm run buildすると何も描画されず、真っ白な画面しか表示され … “React RouterのBrowserRouterがbuildの時、使えない” の続きを読む

症状

create-react-appを使って、プロジェクトを作成・開発して、npm startした時は、正しくコンポーネントが描画されるのですが、npm run buildすると何も描画されず、真っ白な画面しか表示されない現象に出くわしました。
その上、build時にはエラーは出ず、successしてしまうので原因の見当がつかず困りました。

環境

package.jsonのdependenciesは以下の通り。

"history": "^4.9.0",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"react-redux": "^5.0.6",
"react-router-dom": "^5.0.0",
"react-router-hash-link": "^1.2.1",
"react-router-redux": "^5.0.0-alpha.9",
"react-scripts": "^2.1.8",
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0"

原因

ページの遷移にReact Routerを使っていたのですが、React Router V4からbuildする時には、BrowserRouterが使えないようで、これが原因でした。

この情報がなかなか見つけられず、骨が折れました。
解決できたのは、React学習用に買ったReact入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで にあったTipsに「GitHub PageにAppを公開する際は、BrowserHistoryだと動かない」という内容の記事を見つけて、試しにHashRouterに変更してbuildしたら動いたという幸運にめぐまれました。

React入門 にあったTipsをもう少し詳しく説明するとnpm startした時は、サーバが立ち上がり、どのようなURLのリクエストでもindex.htmlを返してくれる機能があるが、GitHub Pageではそのような対応をしてくれないため、Hash Historyを利用して、URLに「#」をつけて、ルートにあるindex.htmlを返すようにするということです。

このせいか、React Routerの仕様もBrowserRouterを使っていると機能しないようになっているのかもしれません。(本当のところは、わかりませんが。)

BrowserRouter使ってbuildしたい

HashRouterを使うとURLに「#」が入ってしまうのが、やっぱり気になります。少しだけ調べたのですが、Next.jsを使ってサーバーサイドレンダリングをする。もしくは、buildをreact scriptではなくwebpackを使ってバンドルしhistoryApiFallback を webpack.config.js に追加する方法があるようですが、まだ試していません。試した時は、また記事にしたいと思います。

参考ページ

Sublime3でReactを書く時のシンタックスハイライト設定

Win: Press Ctrl+Shift+P / Mac: Cmd+Shift+P installと入力、「Package control: Install Package」を選択 Babelと入力、「Babel-Sn … “Sublime3でReactを書く時のシンタックスハイライト設定” の続きを読む

  • Win: Press Ctrl+Shift+P / Mac: Cmd+Shift+P
  • installと入力、「Package control: Install Package」を選択
  • Babelと入力、「Babel-Snippets」を選択
  • Sublimeのメニューから「View > Syntax > Babel > Javascript」を選択

Git学習基礎まとめ

Gitを使った開発に慣れるまでの学習方法にとてもよくまとまっています。 上記記事/便利なサイトや書籍のgitをはじめからていねいにを一巡します。手を動かしながら読み進めるとgitの概要をつかみます。 gitコマンド まと … “Git学習基礎まとめ” の続きを読む

Gitを使った開発に慣れるまでの学習方法にとてもよくまとまっています。

上記記事/便利なサイトや書籍のgitをはじめからていねいにを一巡します。
手を動かしながら読み進めるとgitの概要をつかみます。

gitコマンド まとめ

基本

リッポジトリの作成

$ git init

ステージング

変更したファイルをstageする

$ git add ファイル名

全てのファイルをstageする

$ git add .

初回コミット前の git add を取り消す

$ git rm --cached [ファイル名]

最新のコミットの状態に戻す

$ git reset HEAD [ファイル名]

rm –cacheとresetの違い
https://proengineer.internous.co.jp/content/columnfeature/6969#53

staging areaにある変更内容がコミットメッセージとともにリポジトリに反映

このとき、stage されていたファイルの内容とコミットメッセージは「コミットオブジェクト」としてリポジトリ内に保存される。

コミット

コミットメッセージ付きコミット

$ git commit -m 'コミットメッセージ'

直前のコミットメッセージの修正

$ git commit --amend

変更したファイルを全てコミットする

$ git commit .

直前のコミットを現在stagingした内容で「やりなおし」

git commit --amend

間違ったコミットを取り消す

コミットだけを取り消す(ローカルのワークディレクトリの内容は変更しない)

$ git reset --soft

特定のコミットまで戻す

$ git log //戻す対象のハッシュ値を調べる
commit ************************

$ git reset --hard ハッシュ値
revert

revertは、不要なコミットログを残したまま戻るため、メンバーを混乱させてしまう可能性があります。

git revert [コミットid]

ローカルのワークディレクトリの内容も含め、コミットを取り消す

$ git reset --hard

直前の間違ったコミットを取り消す

$ git reset --soft HEAD^

「HEAD^」は、直前のコミットという意味を表すオプション

ファイルへの変更の取り消し

$ git checkout --

https://git-scm.com/book/ja/v2/Git-%E3%81%AE%E5%9F%BA%E6%9C%AC-%E4%BD%9C%E6%A5%AD%E3%81%AE%E3%82%84%E3%82%8A%E7%9B%B4%E3%81%97#_%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%B8%E3%81%AE%E5%A4%89%E6%9B%B4%E3%81%AE%E5%8F%96%E3%82%8A%E6%B6%88%E3%81%97

ここで理解しておくべきなのが、`git checkout — [file]`は危険なコマンドだ、ということです。 あなたがファイルに加えた変更はすべて消えてしまいます。変更した内容を、別のファイルで上書きしたのと同じことになります。そのファイルが不要であることが確実にわかっているとき以外は、このコマンドを使わないようにしましょう。

ファイルの削除+「ファイルを削除したよ」という情報を stage

$ git rm [ファイル名]

ログの確認

$ git log

qで抜け出す

ファイルの移動とその変更内容をstage

$ git mv [ファイル名] [移動先Dir/ファイル名]

ブランチ

新規ブランチ作成

$ git branch [ブランチ名]

分岐元を指定して新規ブランチを作成

$ git branch [新規ブランチ名] [分岐元ブランチ名]

ブランチを切り替える

$ git checkout [ブランチ名]

ログフォーマット化 (git graphで表示)

$ git config --global alias.graph "log --graph --date-order --all --pretty=format:'%h %Cred%d %Cgreen%ad %Cblue%cn %Creset%s' --date=short"

ブランチを削除

$ git branch -d [ブランチ名]

ブランチの確認

$ git branch

ブランチを切ってそこにチェックアウト

$ git checkout -b [ファイル名]

ブランチを戻りたいコミットに移動

$ git reset --hard [移動先コミットid]

マージ

マージ

$ git merge [ブランチ名]

Fast-foward以外でマージ

$ git merge --no-ff [ブランチ名]

マージしたときに競合が発生した場合には、手動でマージする

  1. ファイルを手動で修正
  2. git add <修正したファイル>として「競合を直したよ」と Git に伝える
  3. 全部直したら git commit でマージコミットを完成させる

今いるブランチが「履歴上のどこから分岐したのか」という過去を改変する

リモートリポジトリに新しいブランチを複製

$ git push [リモートリポジトリの名前] [手元のブランチ]:[リモートに作りたいブランチ]

手元のリポジトリでのブランチの名前とリモートリポジトリのブランチの名前が同一の場合

git push [リモートリポジトリの名前] [ブランチの名前]

リモートのブランチの削除

git push [リモートリポジトリの名前] (ここになにも書いてない):[リモートのブランチ]

fetch してマージ

git pull

分岐元から今までに行ったコミットの変更内容を、新しい分岐元からひとつずつイチから適用しなおしてくれる。

git rebase [ブランチ名]

bare repositoryを作る

作業ディレクトリなしで、リポジトリだけを複製する

git clone --bare [複製元] [複製される先]

作業ディレクトリ付きでリポジトリを複製

$ git clone [複製元] [複製される先]

追跡する ブランチを、ローカルに作成

$ git branch [手元のブランチの名前] [追跡したいリモートブランチの名前]

remote リポジトリを設定

$ git remote add [リモートリポジトリの名前] [リモートリポジトリの場所]

リモートリポジトリに存在するコミットやブランチを手元に持てくる

git fetch [リモートリポジトリの名前]

ブランチの追跡設定

$ git branch --set-upstream-to=[リモートリポジトリの名前]/[追跡したいリモートブランチ] [手元のブランチ]

リモートリポジトリーの確認

方法1
$ git remote -v
方法2
$ git remote show -n origin

git push の取り消し

運用ポリシー

master ブランチにコミットするものは「リリースするもの」だけ、ということにしましょう。開発途中のものをコミットするのは、「development」というブランチにします。そして、作業は development からトピックブランチを切って行います。

言い方を変えると、なにか作業をするときには development ブランチから topic ブランチを切って行います。そして、その作業が終わったら、develop ブランチでそのトピックブランチを merge します。これを繰り返して、development ブランチの状態が「リリースできるもの」になったら、master ブランチから development ブランチを merge します。

  • master が指してるコミットは、必ず 「最新のリリース」 である
  • development が指しているコミットは、「最新の開発版」である
  • 各トピックブランチが指しているコミットは、「作業途中の状態」である

すでにリリースしてしまったものに不具合が見つかったときにそれを緊急で修正しなければならないときには、master ブランチから hotfix ブランチを切って、ここで修正した内容を master ブランチに merge すること
そして、この緊急対応が無事にリリースされたなら、hotfix が取り込まれた master ブランチを development にマージすることにしましょう。このように運用することで、開発版にも、リリース版での修正を反映することができます。

WordPress:条件分岐まとめ

WordPressで利用する条件分岐をこのページで徐々にまとめていきます。 カスタム投稿タイプ 投稿タイプ 特定の投稿タイプかどうか判定します。 if (get_post_type() === ‘投稿タイプ名’) { / … “WordPress:条件分岐まとめ” の続きを読む

WordPressで利用する条件分岐をこのページで徐々にまとめていきます。

カスタム投稿タイプ

投稿タイプ

特定の投稿タイプかどうか判定します。

if (get_post_type() === '投稿タイプ名') {
  //処理
}

アーカイブページ

// 一つの投稿タイプを判定
if( is_post_type_archive( '投稿タイプ名' ) ) {
  // 処理
}

// 複数の投稿タイプを判定(いづれかの投稿タイプのアーカイブページであればtrue)
if( is_post_type_archive( array( '投稿タイプ名 A', '投稿タイプ名 B', '投稿タイプ名 C') ) ) {
  // 処理
}

Asana × Google Calendar 同期方法

今日は、プロジェクト管理ツールAsanaとGoogle Calendarの連携、同期させる方法を、Asanaのサイトの和訳をベースに紹介しようと思います。

Asanaについて

以前、プロジェクト管理ツールを探した時に、「無料」「使いやすい」「機能が充実」この3点が揃っていたのが、Asanaでした。
Asanaは、フェイスブックの共同創業者のダスティン・モスコビッツによって立ち上げられたプロジェクト管理ツールです。
2019年には、東京オフィスも出来るらしく、ここ数ヶ月、メディアの露出が増えて存在感を強めています。

Asanaを使いはじめた頃は、Asanaについての記事もあまり無かったんですけどね。
それでは、本題にまいりましょう。

はじめに

連携機能は、Googleカレンダー、Appleカレンダー、アウトルックもしく他のカレンダー(URLの登録ができるもの)上でタスクの期限を表示できます。
プロジェクト、タグ、My Tasksのリストをこれらのカレンダーと連携することができます。

連携すれば、タスクの期限を1日のイベントとして見ることができます。表示された各イベントををクリックするとAsanaのサイトに飛びます。

注意事項

  • 表示されるのは、タスクに指定された期限日だけです。
  • Asanaの情報を更新すれば、カレンダーに反映されますが、カレンダー側の情報を更新してもAsanaの情報に反映することは出来ません。
  • 期限を過ぎたタスクはカレンダーに同期されません。
  • サブタスクも同様に同期されます。
  • チームカレンダーは同期できません。
  • Outlook for Mac 2011は、URLでの連携ができません。
  • 初回の同期では瞬時に同期されますが、2回目以降では、同期に1日かかることがあります。

同期させたいプロジェクト、タグ、My Tasksを選ぶ

プロジェクトの同期URLを取得する

  1. 左メニューから同期したいプロジェクトを選択
  2. ヘッダーにあるプロジェクト名の横の「・・・」をクリック
  3. 「Export option」の上にカーソルを持ってきて、「Sync to Calendar」を選択

タグの同期URLを取得する

  1. タスクをクリックして表示される右側のパネル内から同期したいタグをクリック。タグ一覧に表示が切替わります。
  2. ヘッダーにあるタグ名の横の「・・・」をクリック
  3. 「Sync to Calendar」を選択

My tasksの同期URLを取得する

  1. 左メニューからMy Tasksをクリック
  2. ヘッダーにあるタイトルの横の「・・・」をクリック
  3. 「Sync to Calendar」を選択

Googleカレンダーと同期させる


Asanaの画面で出てきたポップアップの中で、Googleカレンダータブにあるリンクをコピーします。

*プロジェクトを複数登録する場合は、一つずつ登録する必要があります

Googleカレンダーにて

  1. 左メニューにて、「友達のカレンダーの追加」の隣にある「+」アイコンをクリック
  2. 「URLで追加」を選択

表示されたポップアップウィンドウにて

  1. 表示されたポップアップウィンドウに先ほどAsanaでコピーしたリンクをペーストします。
  2. 「カレンダーを追加」をクリック。これで、GoogleカレンダーにAsanaのタスクとしてスケジュールが表示されます。

タスクの詳細を知りたい場合


カレンダーに表示されたタスクの予定をクリックすると、Asanaのタスクへのリンクがあります。
詳細を確認したいときは、このリンクからAsanaのページに移動して確認しましょう。

同期を解除する

  1. 左メニュー内「他のカレンダー」の横にある矢印をクリック
  2. 削除したいカレンダーにカーソルを合わせるとバツ印が出るので、そのバツ印をクリック
  3. ポップアップが表示されるので、「リストからカレンダーを削除」をクリック

まとめ

AsanaとGoogleカレンダーの同期の手順は以上となります。
全てのスケジュールを一箇所で確認できるのは、とても便利です。カレンダーに表示されれば、うっかり締め切りを忘れるリスクを減らせると思います。まったく難しいものではないので、ぜひ設定してみてください。

WordPress:特定の親ページを持っているかどうか判定する

特定の親ページを持っているかどうかを判定したい時には、以下のコードで分岐できます。 <?php if ($post->post_parent) { $post_data = get_post($post-&g … “WordPress:特定の親ページを持っているかどうか判定する” の続きを読む

特定の親ページを持っているかどうかを判定したい時には、以下のコードで分岐できます。

<?php if ($post->post_parent) {

	$post_data = get_post($post->post_parent);
	$parent_slug = $post_data->post_name;

	if ($parent_slug === '判定したい親ページのスラッグ') { ?>
		<!-- ここにtrueの場合の処理 -->
	<?php } else { ?>
		<!-- ここにfalseの場合の処理 -->
	<?php }
} ?>

CSS:background-positionの%(パーセンテージ)指定

CSSでbckground-imageのポジションを%(パーセンテージ)で指定に関して、僕は、指定したbackground-imageの中心が、要素の横幅全体に対して指定した%が適用されると思っていましたが、そうではあり … “CSS:background-positionの%(パーセンテージ)指定” の続きを読む

CSSでbckground-imageのポジションを%(パーセンテージ)で指定に関して、僕は、指定したbackground-imageの中心が、要素の横幅全体に対して指定した%が適用されると思っていましたが、そうではありませんでした。

図を使って説明

例えば、幅1600pxの要素にbackground-imageを以下のように指定したとします。

.sample {
	background-image: url(images/square.jpg);
	background-size: 600px 600px;
	background-position: left 70% top 0;
}

誤った認識

以下のように背景全体に対してbackground-positiionで指定した%が適用されると思っていたのですが、これは誤りです。

7対3のイメージ その1

正しい認識

実際は以下のように、指定された背景画像の余白に対してbackground-positiionで指定した70%が適用されます。

7対3のイメージ その2

まとめ

background-positionで%指定をするときは、指定したbackground-imageの余白に対して、%が適用される。

WordPress:子テーマのディレクトリーURIを取得する

親テーマのディレクトリーURI get_template_directory_uri() 子テーマのディレクトリーのURI get_stylesheet_directory_uri()

親テーマのディレクトリーURI

get_template_directory_uri()

子テーマのディレクトリーのURI

get_stylesheet_directory_uri()

WordPress:複数のカスタムフィールドの値を元に記事を絞り込みたい時の書き方

複数のカスタムフィールドの値を元に記事を絞り込みたい時、’relation’パラメータの’OR’と’AND’を同時に使う書き方です。 以下のコードで … “WordPress:複数のカスタムフィールドの値を元に記事を絞り込みたい時の書き方” の続きを読む

複数のカスタムフィールドの値を元に記事を絞り込みたい時、’relation’パラメータの’OR’と’AND’を同時に使う書き方です。

以下のコードでは、カスタムフィールド’cf_date_01’での絞り込み条件に該当する記事、もしくは、カスタムフィールド’cf_date_02’での絞り込み条件に該当し、かつ、カスタムフィールド’cf_date_03’での絞り込み条件に該当する記事を返します。A もしくは B かつ C という条件です。

When you want to narrow down posts with multiple customfields we can use parameter Relation’s value ‘OR’ and ‘AND’ at the same time.
Code below show you how to use ‘OR’ and ‘AND’ at the same time.
It can be conditions that A or B and C.

$date = date("Y-m-d");

$query = new WP_Query( array(
	'meta_query' => array(
		'relation' => 'OR',
		array(
			'key' => 'cf_date_01',
			'value' => $date,
			'compare' => 'LIKE'
		),
		array(
			'relation' => 'AND',
			array(
				'key' => 'cf_date_02',
				'value' => $date,
				'compare' => '<='
			),
			array(
				'key' => 'cf_date_03',
				'value' => $date,
				'compare' => '>='
			)
		)
	)
));

参考:

AsanaとInstaganttの連携方法

プロジェクトマネジメントには、Asanaを利用しています。
基本的には、ほとんどの工程を自分一人で行うので、ほぼタスクマネジメントとして使っています。

Asanaを利用する際に他のサービスも調べましたが、Asana一択というほど優れているサービスです。
その決めての一つがガントチャート機能を無料で利用できることです。
AsanaとこのInstaganttを連携させることで、ガントチャートを利用することが可能になります。

サービスをまたぐので、利用する前は、ページの切り替えが面倒かと考えていましたが、決してそんなことはありませんでした。
ブラウザの2番目と3番目のタブには、いつもAsanaとInstaganttを開いています。

そのInstaganttとの連携方法をお伝えします。
連携と言っても特に難しい操作はありません、非常に簡単です。

まずInstagantt( https://instagantt.com )にアクセスします。
下図、赤枠の”SIGN UP WITH ASANA”からログインします。これだけです。

次にプロジェクトを連携させます。
ログイン後の画面の左メニューにある赤枠の「+」マークをクリックします。

次に「Connect Projects」をクリック。

ポップアップの画面が現れますので、連携したいプロジェクトを選択します。

無料版では、3プロジェクトまで連携することが可能です。
ここでオススメなのが、Asana上でアサインされているタスクの一覧”My tasks on 部署名”を連携させることです。
Asana上で全てのタスクに自分をアサインすれば、”My tasks on 部署名”内で、全てのプロジェクトをInstagantt上で管理できます。

この”My tasks on 部署名”と他に、主に動いているプロジェクト2つを連携させるようにすると良いでしょう。

連携が終わると、左メニューにプロジェクトが追加されます。
編集したいプロジェクトを選択します。

プロジェクトの右側にプロジェクトに作成されたtasksが現れるので、赤枠の中でガントチャートが作成しましょう。

このInstaganttが本当に便利で、進捗を一目で確認出来て、次にどのような作業をすれば良いのか把握しやすくなると思います。

プロジェクトマネジメントにお困りの方は、一度、Asana×Instaganttを使ってみてはいかがでしょうか。