*いしのなかにいる*

oops ! I am in rock !

ホストで使っているシェルを調べる方法など

ホストで使っているシェルを調べる方法など。

毎回忘れてしまうのでメモ

使用しているシェルを調べる方法

$ echo $SHELL
/bin/bash

ホスト上で使用可能なシェル一覧

$ cat /etc/shells
/bin/sh
/bin/bash
/sbin/nologin
/bin/dash
/bin/zsh

使用可能なシェルを追加する方法

$ vim /etc/shells

自動で追加されないこともあるので新しいシェルを追加した場合は一応チェックしておきましょう

感想

ほんと何回やってもシェルの調べ方が覚えられない。 記事にしたことで記憶に残りますように!

【Xcode9】実機でiPhoneアプリをテストしようとしてハマッた話

f:id:malor:20170929175553p:plain

自作iPhoneアプリを実機でデバッグしようとしたら、いくつかエラーが出て動きませんでした。

また同じことをしない様にメモ。同じ事象で悩んでいる方がいたらお試しあれ!

Development cannot be enabled while your device is locked.

下のメッセージが表示されていつまでたってもアプリが起動しない。
デバイスのロックは解除しているのに出るのはなぜ…

Development cannot be enabled while your device is locked. 
Please unlock your device and reattach. (0xE80000E2).

【解決策】

設定の”位置情報とプライバシーをリセット”を実行したら解消しました。

設定 → 一般 → リセット → 位置情報とプライバシーをリセット

実行するときに

位置情報とプライバシーの設定を工場出荷時のデフォルト
状態にリセットします。

と、「工場出荷状態時の状態にリセット」という言葉が出て来てドキドキしますが、特に弊害はないので大丈夫です。

位置情報を使うアプリを起動した時なんかに許可するかの確認が入るくらいです。

iPhone is busy: Preparing debugger support for iPhone

f:id:malor:20170929180152p:plain:w600

下のメッセージが表示されていつまでたってもアプリが起動しない。マジ困る。

iPhone is busy: Preparing debugger support for iPhone
Xcode will continue when iPhone6 is finished.

【解決策】

前回と同様 "位置情報とプライバシー" をクリアすれば治るのかと思ったけどそうでもない。

ので、とりあえずデバイスの再起動を実施。

起動後にビルドしたらエラーは解消していました!

再起動が効いたのかわからないけど動く様になりました。

App Installation filed This application's application-identifier entitlement

f:id:malor:20170929180240p:plain:w600

下のメッセージが表示されてビルド失敗。ナニコレ。

App Installation filed
This application's application-identifier entitlement
does not match that of the installed application.
These values must match for an upgrade to be
allowed.

【解決策】

これはビルドチームを変更したりすると起きるようです。

iPhone側に残っている古いアプリを削除すれば解消。

まとめ

以上、実機でデバッグするのも一苦労ですね。
上記事象でハマっている方がいましたら解消しますように。

Reactアプリを IE11 で表示すると 「オブジェクトは 'startsWith' プロパティまたはメソッドをサポートしていません。」 が発生する

create-react-app で作った ReactアプリをIE11で表示したら画面が真っ白に!

create-react-app で作った Reactアプリ をIE11で表示したら画面が真っ白になりました。

コンソールには以下のエラーが…

オブジェクトは 'startsWith' プロパティまたはメソッドをサポートしていません。

Possible Unhandled Promise Rejection (id: 0):
  TypeError: 未定義または NULL 参照のプロパティ '_currentElement' は取得できません

Chromeでしか動作確認をしていなかったのもあれなのですが、開発も終盤にきたタイミングでこれは困る〜。

解決までに半日ほど要してしまったので、次回またハマらないようにメモしておきます。

原因はsetState??

コンソールと睨めっこしたりデバッグコード埋め込んだりして見た結果、どうやら setState のタイミングでエラーが発生していることが判明

どうやら create-react-app で生成されるコードで startsWith() を呼び出しているんだけど、「IE11にはそんな関数が定義されていないよ」ってことが問題みたいです。

解決策

とりあえず、IE11にES6の新機能を使わせるには 『ポリフィル』 が必要になるそうです。

調べがついた解決策は、以下の2つ。

  1. es6-shimを使う
  2. babelのpolyfillを使う

1 es6-shim を使う

一つ目は es6-shim を使う、という方法

これは index.html で es6-shim のライブラリを読み込んであげるだけで良いようです。

  <head>
    
    <!--[if lt IE 10]>
    <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.5.7/es5-shim.min.js,es5-shim/4.5.7/es5-sham.min.js,es6-shim/0.35.1/es6-sham.min.js,es6-shim/0.35.1/es6-shim.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>
    <![endif]-->
    <script src="https://as.alipayobjects.com/g/component/??es6-shim/0.35.1/es6-sham.min.js,es6-shim/0.35.1/es6-shim.min.js"></script>
    
  </head>

詳しくはコチラ(英文)

2 babelのpolyfillを使う

二つ目は babel の polyfill を使う方法。

babel-polyfill とか babel-runtime とか 色々用意されているようです。 (詳しくはこちらの記事が参考になりました。)

私はとりあえず babel-polyfill を選択しました。

導入はこんな感じ

# yarn の場合
$ yarn add babel-polyfill

# npm の場合
$ npm install --save babel-polyfill

後は index.js の先頭で import してやれば IE11 なんかでも ES6 の新しい機能が使えるようになります。

import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

これで IE11 でもReactアプリが(とりあえず)動くようになりました。

まとめ

今回は「とりあえず動くようにした」という感じ。

babel とか トランスパイル とか、その辺は全然理解できていないことが認識できました。

まぁその辺を考えたく無いからお手軽な create-react-app を使っている、というのもあるんですけどね。

とはいえ違うブラウザで動かすたびに(特にIE)で時間を取られるのもなんなので時間をとって勉強する必要があるな〜と感じました。

Local by Flywheel が起動しない!アップデート後に起動しなくなった時の対処法

Local by Flywheel が起動しない!!

ローカルWordpress環境を簡単に構築できる Local by Flywheel ですが、 アップデートしたら起動しなくなってしまいました。

f:id:malor:20171004050236p:plain:w600
”Starting Local Machine.”のメッセージのまま画面が表示されない・・・

アプリを再起動してもMacを再起動しても変わらず。 VirtualBox内でVMは起動しているのを確認

対処方法

Flywheel の コミュニティに対処方法が載っていました。

  1. まず、 Local by Flywheel アプリを起動していたらアプリを終了。

  2. 次に、ターミナル(terminal.app)を開いて以下のコマンドを実行。

"/Applications/Local by Flywheel.app/Contents/Resources/extraResources/virtual-machine/vendor/docker/osx/docker-machine" kill local-by-flywheel
"/Applications/Local by Flywheel.app/Contents/Resources/extraResources/virtual-machine/vendor/docker/osx/docker-machine" restart local-by-flywheel
"/Applications/Local by Flywheel.app/Contents/Resources/extraResources/virtual-machine/vendor/docker/osx/docker-machine" env local-by-flywheel

以上!
これで無事に起動する様になっているはず。

local.getflywheel.com

感想

サクサク動く便利なwordpress環境なだけに、いきなり動かなくなってしまってヒヤッとしました。
でも今のところはコミュニティが活発なのでエラーが起きても安心。 f:id:malor:20171003154636j:plain

S3バケットにアップロードしたファイルを一括ダウンロードする方法

f:id:malor:20171004094925p:plain:w600

S3に置いてあるファイルを一括でタウンロードしたい

既存の Wordpress サイトを Local by Flywheel に移行するため、S3に上げたファイルを一括ダウンロードする必要が出てきたのですが、、

S3のファイルってAWSコンソールからだと一つずつしかダウンロードできないのですね。。

リソースが少ない場合はそれで問題ないのですが、私は画像ファイルやらなんやらをたくさん置いていたので大問題。

結論、AWS-CLIを使えば可能!

google先生に聞いた結果、AWS-CLI(AWS Command Line Interface )というものを使えばできる!ということがわかりました。

AWS-CLIってなんじゃい!という方はこちらをご参照ください。

やり方がわかってしまえばあとは簡単。

$ aws s3 cp s3://S3バケット名/ ダウンロード先パス --recursive

はい、コマンド一発!

一応コマンドの補足をしておきますと、

  • aws s3: S3を操作するAWS-CLI のコマンド名
  • cp: コピーして持ってくるということ(S3のファイルはそのまんま)他にmv, rm, ls などがある
  • S3バケット名: 名前の通りS3のバケット名
  • ダウンロード先パス: ローカルの保存先(例: ~/Downloads)
  • --recursive: バケット内のフォルダを再帰的に辿ってくれる。要はバケットの中身全部持ってくるということ

感想

AWS-CLIはすごい便利!
どんどんコマンドを覚えていこうと思いました。

たったの3ステップでローカルWordPress環境が構築できる Local by Flywheel が便利すぎる

f:id:malor:20170928045328j:plain

Webサイトを構築するときにWordPressを利用している人は多いと思います。

でも少しデザインを変えたいとか、新しいテーマを試してみたい、という場合に運用しているサイトを直接いじるのは勇気がいりますよね。

そんな時は自由に試せるWordPress環境を作ってしまいましょう。
新しいプラグインを試すのも、サイトをカスタマイズするのも全然平気!誰にも迷惑をかけません。

ただ、わざわざちょっとしたカスタマイズを試すために1つサイトを作るのは面倒なんですよね。

なので簡単に自分のPC上に WordPress 環境を作成できる Local by Flywheel を試してみました。

このアプリ、サイト構築の手間を全部すっ飛ばしてわずか3ステップで環境構築ができてしまう優れものです。

実際に使ってみたところあまりに簡単にサイトを構築できてしまったので、インストールからセットアップまでの手順をご紹介します。

ダウンロード〜アプリ登録

まず手始めにFlywheelをアプリを登録します。 以下のサイトからダウンロードできます。

local.getflywheel.com

ダウンロード

サイト右上の DOWNLOAD ボタンからダウンロードします。

f:id:malor:20170927170923p:plain

ボタンをクリックすると、名前とかメアドを聞かれます。
ここはメールアドレスだけ入力すればOKです。

f:id:malor:20170927170902p:plain

ダウンロードサイズは500MBくらいあります。結構時間がかかるのでゆっくり待ちましょう。
私の環境(Mac)の場合、サイズは466MBで5〜6分ほどかかりました。

あっという間にローカルWordPress環境が作れてしまうFlywheelですが、ダウンロードやバージョンアップにはかなり時間がかかります。

唯一イマイチなところです。

アプリケーションを登録

f:id:malor:20170927112425p:plain

ダウンロードしてきたファイル(local-by-flywheel-x-x-x-mac.zip)を解凍すると 「Local by Flywheel.app」 というファイルが出てくるのでそのままアプリケーションに移動させます。

Local br Flywheel のインストール 〜 WordPressサイトの構築

インストール

Local by Flywheel.appを起動すると、初回起動時はインストール画面が表示されます。

画面下部の LET'S GO! ボタンを押すとインストールがスタート。

f:id:malor:20170927170919p:plain

VirtualBoxがインストールされていない場合は合わせて自動でインストールしてくれます。
この辺り、自分で設定していたりすると意味不明なエラーが出てハマったりするので助かります。というかすっごい楽!

WordPressサイトのセットアップ

インストールが完了したらあとはサイトのセットアップだけです。

画面真ん中の CREATE A NEW SITE をクリック

f:id:malor:20170927170853p:plain

STEP 1 サイト名を入力

What's your site's name? と聞かれるのでサイト名を入力します。
ここに入力したサイト名 + .dev がデフォルトのドメイン名になります。

f:id:malor:20170927170912p:plain

サイト名にハイフンを含めた場合、ドメイン名からは省かれるようです。

ADVANCED OPTIONS を指定するとローカル環境のドメイン名やサイトの格納先パスを細かく設定できます。
必要に応じて設定してください。

f:id:malor:20170927170931p:plain

STEP 2 環境を選択

ここでは

  • PHP のバージョン
  • Web Server
  • MySQLのバージョン

が指定できます。

特にこだわりがなければ Preferred で OK です。
こちらも必要に応じて設定を変更しましょう。

f:id:malor:20170927170906p:plain

STEP 3 環境を選択

最後にWordPressのログインに使用するユーザ名とパスワード、サイトのメールアドレスをしたら完了です。

ADD SITE ボタンを押すと サイトの構築が開始します。
(だいたい30秒〜1分くらいで完了)

f:id:malor:20170927170928p:plain

サイトの確認

構築が完了すると、出来上がったサイトの設定内容が表示されます。

f:id:malor:20170927170934p:plain

右上の VIEW SITE ボタンをクリックすると、出来立てホヤホヤのサイトが確認できます。

f:id:malor:20170928043814p:plain

もう一つの ADMIN ボタンからは サイトのダッシュボードにアクセスできます。
残念ながら初期状態は英語です。

f:id:malor:20170928043820p:plain

まとめ

以上の手順でローカル環境にWordPress環境が構築できちゃいます。

言語を日本語に変更しなければならないのはちょっと面倒ですが、インストールが完了していればローカルサイトの構築がものの2、3分でできてしまいます。

驚くべきスピード!

実際にローカルサイトをパブリックに公開するには一手間が必要ですけど、「ちょこっと試してみたい!」とか「サッとすばやく WordPress サイトを構築したい」というときに非常に役立ちます。

アフィリサイトを量産するのにも使えそうですね!

WordPressサイトの構築は最初は敷居が高いイメージがありますが、このアプリを使えば全然怖くないのでぜひぜひお試しあれ!

f:id:malor:20171003154636j:plain

【Ruby】配列内の文字列を数値に一括変換する

カンマ区切りの数字の文字列を一気に数値に変換したいときってありませんか?

たとえばこんなやつです。

“1,2,3…”

これ、何も考えずにカンマで分割すると、文字列の配列になっちゃうんですよね。

こんな感じに

> "1,2,3".split(",")
=> ["1", "2", "3"]

ActiveRecordの検索に使う分には問題ないのですが、数値として使いたいときとかにちょいちょい不便。

なので、配列内の文字列を数値に一括置換する方法を調べてみました。

map(&:to_i)を呼び出して一括変換

> "1,2,3".split(",").map(&:to_i)
=> [1, 2, 3]

これだけです!

ちなみにmapは新しい配列を作って返すだけなので、元のリストを書き換えちゃっていい場合はmap!を使いましょう。

map, map! (Array) - Rubyリファレンス - AmiWiki

mapメソッドは、要素の数だけ繰り返しブロックを実行し、ブロックの戻り値を集めた配列を作成して返します

とのことなので、結局やっていることは配列内の各要素のto_iをしているだけなんだろうけど、 メソッドを呼ぶだけで一発で変換できるのは気持ちいいですね!

リストに文字列が含まれている場合は?

ちなみに配列の中に文字列が入っていた場合は 0 に変換されるようです。
(これはto_iの動作ですね)

> ["1", "2", "hoge"].map(&:to_i)
=> [1, 2, 0]

以上!