deploygateが便利になっていた

概要

通常iOSやAndroidの場合に実機でテストする場合にPC端末に繋いだ上でビルドする必要があります。
それでもAndroidの場合は、apkをメール等で配布すればいいのですがiOSの場合はそうはいきません。そこで
deploy gate で開発段階のアプリを配布する必要があります。その他にもiOSの場合はxcodeのバージョンによってビルドできない事があるのでそれを避ける事ができます。

ipaを配布する方法

deploy gate にログインし管理画面からipaもしくはapkをアップロードします。
実はこの部分が便利になっていました。

curl -sSL https://deploygate.com/cli/install/自分のid | bash
dg deploy

上記の方法で code deploy のdgコマンドが使えるようになりプロジェクトファイルまで移動してdeployコマンドを使えば自動的にdeploy gateにアップロードしてくれるようです。便利ですね。
ちなみにインストール中にgemをいくつかインストールしていたのでrubyを事前に入れておく方がいいと思います。

React基礎

概要

React.jsとはFacebook謹製のjsフレームワークです。
似たようなjsフレームワークにangular.jsがありますが、htmlを拡張していくのがangularでjs自体を拡張していくのが私の印象でした。(angular2はType.scriptでないといけないのでなるべくピュアなES6を勉強す流には向いているのか?)加えてReact.jsはjsの関数型機能をベースにつくられています。そういう意味ではReactを単なるビューを司るフレームワークという一般的な紹介には疑問を感じています。今回はこのReactの基本的な部分を紹介します。

コンポーネント

コンポーネント(component)とは日本語にすると構成要素とかという意味になります。
要するに部品という意味です。イメージ的には、よくあるheaderやfooterの共通化のようなものです。
このコンポーネントには主に2種類あります。
なんで2種類あるのというお話ですが、functional componet はstateを保持できません。逆に class componentは state を保持することができるという違いがあります。

functional (or stateless) componet

関数でコンポーネントを作成するのがfunctional componet です。
下記のような形になります。

function Hello() {
    return(
        <div>
            こんにちは
        </div>
    )
}

class component

クラスを宣言してReact.Componentを継承してコンポーネントを作成します。

class Hello extends React.Component {
    render() {
    return (
        <div>
            こんにちは
        </div>
    )
    }
}

htmlをエスケープさせないようにする

変数に格納したhtmlはReactDOM.reder内部でエスケープされてしまうので下記のようにする必要があります。

const textHtml = {__html:'<h2>test</h2>'};

<span dangerouslySetInnerHTML = { textHtml } />

コンポーネントの値(stateとprops)

propsとは

propsとはコンポーネントに値を渡すときに利用されるものです。
上記した functional componet を利用して書くと下記のようになります。
ReactDOM.render内部でHelloコンポーネントにpropsを渡しています。
propsはデフォルトの値を与えたり必須チェックを行うこともできます。

function Hello(props) {
    return(
        <div>
            こんにちは{props.name}
        </div>
    )
}

---

ReactDOM.render(
    <Hello name="名前" />, document.getElementById('root'));
registerServiceWorker();

---

Hello.propTypes = {
    name: React.PropTypes.string.isRequired
}
---
Hello.defaultProps = {
    name: 'デフォルト'
}

stateとは

stateとはclassコンポーネントの中で保持する値のことを言います。
constructorを宣言しその中で値を保持して利用します。

constructor() {
    super();
        this.state = {
            name: 'ステート'
        };
    }

wordpressの初期設定のつまづきポイント

wordpressの引越しを実施

久々にwordpressの引越しを実施しました。
今回はapacheからnginxへ移行しPHPもバージョンアップしました。
ただその中でひっかかった部分があったので備忘録を記述します。

プラグインをインストールできない。

プラグインをインストールしようとするとFTPをもとまられるようになりました。
これは下記の2つの変更を行う必要があります。

wp-config.phpの編集

下記の一文をwp-config.phpに追加する必要があります。

define('FS_METHOD', 'direct');

ディレクトル所有者と権限の編集

wp-contentの所有者を変更しました。
通常apacheだとwww-dataとかになっていると思いますが、nginxで実行しているのでnginxに変更します。

chown -R nginx:nginx wp-content

権限の変更

さらにプラグインのディレクトリの権限の変更を行います。

chmod 0707 wp-content/upgrade
chmod 0707 wp-content/themes
chmod 0707 wp-content/plugins

ここまで入れて問題なく動いたのですがなぜかjetpackが動きません。

jetpackがうまく動かない?

jetpackの機能を有効化しようとしたら下記のようなエラーが出ました。

SyntaxError: Unexpected token < in JSON at position 0

jsエラーなのであれれと思いましたがこちら下記のサイトに行って個別に機能の有効化ができました。

/wp-admin/admin.php?page=jetpack_modules

wordpressをupdateできない。

下記のメッセージが表示された場合にはパーミッションの変更が必要です。

いくつかのファイルをコピーできないため、最新版のインストールができません。これはたいていの場合、ファイルのパーミッションが適切でないことが原因です
sudo chmod -R 707 wp-includes

プラグインを入れるのに失敗する

その他プラグインを入れたときにファイルをコピーできないとエラーがでたら下記のコマンドを実行してパーミッションの変更を行います。

sudo chmod -R 707 wp-includes

終わりに

wordpressは問題が発生しても調べればすぐに答えが出てなんとか解決することができました。
またちょくちょく個別のカスタマイズをしていきたいと思います。

wordpressカスタマイズの基本

ユニットテストデータ

https://github.com/jawordpressorg/theme-test-data-ja
wordpress importerが進まないときは下記の変更を加える。

wp-content/plugins/wordpress-importer/parsers.php
if ( false && extension_loaded( 'simplexml' ) ) {

デバッグをオンにしてエラーを表示

define('WP_DEBUG', true);

ファイルとの対応関係

パーツテンプレート
header.php => get_header();
footer.php => get_footer();
slug-name.php => get_template_part($slug,name);
固定ページ = page.php
投稿詳細ページ = single.php
フロントページ = front-page.php

パラメーター

パラメーター

name = サイト名
description = キャッチコピー
charset = 文字コード

ループ

<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<p><a href="<?php the_permalink(); ?>"><?php the_title() ?></a></p>?>
<?php endwhile; ?>
<?php else : ?>
<p>記事がありませんでした</p>
<?php endif; ?>

アーカイブページ
ループ内の記事全てが表示される

シングルページ
ループ内でも1ページのみ表示

カスタムフィールド

the_meta();

ページ毎の条件分岐

is_home
is_front_page
is_singular

functions.php

プラグインと同様の効果を持つ

アイキャッチの有効化

add_theme_support(“post_thumbnails”)

カスタムフィールド

<?php the_meta(); ?>
<?php echo esc_html(get_post_meta($post->ID, 'フィールド名', true)) ?>

smart custom fields

smart custom fields

<?php scf::get('フィールド名'); ?>

カスタムクソノミー

custom post type ui

カスタムリンクの変更

httpd.conf

<Directory />
    Options FollowSymLinks
    AllowOverride None
</Directory>

AllowOverride None → All に変更する。
※ ちゃんとvar/www/htmlのディレクトリ内担っている事を確認する事!!!!

gulp.jsの基本

schooで勉強したgulpの使い方のメモ
全部授業を受けながら書いたもの。

gulpのインストール

mkdir gulp
cd gulp
npm init
npm install --save-dev gulp-cli

gulpのプラグインをインストール

使用するプラグインのインストール

npm install --save-dev gulp-sass
npm install --save-dev browser-sync

gulpfile.jsの作成

gulp:task(“タスク名”)
src:対象ファイル名
pipe:処理
gulp.dest
gulp コマンドで監視中になる

gulp-sass

var gulp = require("gulp");
var sass = require("gulp-sass");
gulp.task("basic", function(){
// ファイルの監視を行う
gulp.watch("css/style.scss", function(){
    gulp.src("css/style.scss")
// sassのコンパイルを行う
    .pipe(sass())
// destでコンパイル後のファイルの置き場所を指定
    .pipe(gulp.dest("css/"));
  });
});

browser-sync

ファイルの変更を行った時に自動でリロードしてくれる

インストール

npm install --save-dev browser-sync

使い方

デフォルトのタスクに追加する。

var gulp = require("gulp");↲
var browserSync = require("gulp-browsersync");↲
↲
gulp.task("default", function(){↲
 browserSync.init({↲
>...server:{↲
>...>...baseDir: "./src"↲
>...}↲
 });_↲
↲
gulp.watch("src/**", function(){↲
>...browserSync.reload();↲
>...});↲
});↲

リリースファイルの作成

リリースフォルダにファイルをコピーしてその後開発ファイルを削除する。

var gulp = require("gulp");↲
var del = require("del")↲
↲
gulp.task("copy", function(){↲
>...return gulp.src("src/index.html")↲
>...>....pipe(gulp.dest("dist"));↲
});↲
↲
gulp.task("clean", function(){↲
>...del("index.html");↲
});↲
↲
gulp.task("default", ["copy", "clean"]);↲

タスクを個別実行

gulp タスク名

上記の中で非同期実行でなく同期実行をさせるには上記のようにタスクをreturnする。

その他

下記のエラーが表示された場合

Local gulp not found in

下記を実行すると直る

npm link gulp