習得した必殺技

React開発環境構築ではじめにすること

プロジェクトの初期化

mkdir project
cd project
npm init -y

初期設定で何度もENTERを押さないといけないので、-y オプションをつける。
プロジェクトのフォルダ名には使えない文字があるっぽい。。。（「_」が含まれているとエラーに）

Webpackのインストール

npm install --save react react-dom
npm install --save-dev webpack babel-core babel-loader babel-preset-es2015 babel-preset-react

Webpackコンフィグの作成

package.jsonと同じ階層にwebpack.config.jsを作成し、編集

const path = require('path');

module.exports = {
    entry: {
        bundle: './js/sourse/app.js'
    },
    output: {
        path: path.join(__dirname, ''),
        filename: '[name].js'
    },
    module: {
        loaders: [
            {
                loader: 'babel-loader',
                exclude: /node_modules/,
                test: /\.js[x]?$/,
                query: {
                    cacheDirectory: true,
                    presets: ['react', 'es2015']
                }
            }
        ]
    }
};

コマンドを登録

production develop watchの三つのコマンドを追加

{
  "name": "webpack-tutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "production": "webpack -p",
    "develop": "webpack -d",
    "watch": "webpack -d --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^0.14.2",
    "react-dom": "^0.14.2"
  },
  "devDependencies": {
    "babel-core": "^6.1.21",
    "babel-loader": "^5.4.0",
    "webpack": "^1.12.4"
  }
}

ウォッチモード開始！

npm run watch

圧縮！

npm run production

Angular2を使用してモダンWeb開発に挑戦！

まずはパソコンに環境構築！

Angular2開発に必要なソフトウェアは５つ！

１．Angular CLI（command line interface）

Angular CLIを使用するためには、Node.jsとnpm（CLIをnpmコマンドでインストールするために必要）が必要

  • Node.js: 6.9.x以上
  • npm: 3.x.x以上

Angular CLIのインストール

npm install -g @angular/cli

正常にインストールされていれば、「ng」コマンドが通るはず。

ng version

２．Node.js

３．Google Chrome

４．Git

 

プロジェクト作成！

プロジェクトのひな形を作成

ng new プロジェクト名

 

プロジェクトフォルダ内に移動

cd プロジェクト名

 

実行！！

ng serve

 

ブラウザで確認！

http://localhost:4200/

 

新規サイト制作時に最低限必要なSEO対策

  • 2015年11月15日
  • SEO

ページ・サイト構造の施作

  1. ページタイトルを30文字以内の具体的な言葉にする 
    <title>ゼンガーデン | 広島市佐伯区にあるウェブシステム制作会社</title>

    29文字

  2. 検索結果のスニペットに使用されるメタデータは、最初の50文字で重要なことを書ききる 
    <meta name="description" content="広島市佐伯区を拠点にウェブ制作、ウェブシステム開発をしている会社です。">

    35文字

  3. タイトル、メタデータ、コンテンツの重複が起きないようにする
    ・タイトル、メタデータの重複
    [確認]：検索のデザイン -> HTMLの改善

 

 

検索エンジンの施作

Googleが提供している「Google Search Console」を使用していきます。

  1. より確実にGoogleサイトにクロールされるようにするために、トップページのクロールをリクエストする
    クロール -> Fetch as Google
  2. サイトマップを追加して、クロールされやすくする。
    クロール -> サイトマップ

リサイズ時の画質（圧縮率）を変更

普段使っていると中々気づきにくいですが、wordpress のデフォルトの画像圧縮率は90%になっています。
年々、デバイスの解像度が上がっていて画質は気になってきますので、下記設定は必須になりそうですね。

function.php

add_filter('jpeg_quality', function($arg){return 100;});

PCとスマホの画像切り替え

レスポンシブサイト構築で、PCとスマホで画像の縦横比率が異なる場合、PC横100%画像をスマホで表示すると地平線になってしまいます。そんな時は、下記スクリプトで画像を切り替え！

JSファイル

$(function(){
	
	changeImg();
	
	function changeImg() {

		var w = $(window).width();
		var break_point = 640;

		$("img[data-sp]").each(function(){

			if( w <= break_point ){
				// スマホ
				$(this).attr("src", $(this).data("sp"));
			}else{
				// PC
				$(this).attr("src", $(this).data("pc"));
			}

		});
                
	}
	
	$(window).resize(function() {

		changeImg();
	});
	
});

HTMLファイル

<img src="/img/sample.jpg" data-pc="/img/sample.jpg" data-sp="/img/sp/sample.jpg" alt="" />

パラメータをURLに付加

URLにパラメータを付けて値をGETで渡したい場合、wordpressでは無視されますので、下記設定をする必要があります。下記は、パラメータ名「add_param」の場合です。予約語は設定できません。

<?php
function add_meta_query_vars( $public_query_vars ) {
    $public_query_vars[] = 'add_param';
    return $public_query_vars;
}
add_filter( 'query_vars', 'add_meta_query_vars' );
?>

 

管理画面メニュー項目を整理 

<?php
function remove_menu() {
  remove_menu_page('index.php'); // ダッシュボード
  remove_submenu_page('index.php', 'index.php');
  remove_submenu_page('index.php', 'update-core.php');
  remove_menu_page('edit.php'); // 投稿
  remove_submenu_page('edit.php', 'edit-tags.php?taxonomy=post_tag');
  remove_menu_page('upload.php'); // メディア
  remove_menu_page('link-manager.php'); // リンク
  remove_menu_page('edit.php?post_type=page'); // 固定ページ
  remove_menu_page('edit-comments.php'); // コメント
  remove_menu_page('themes.php'); // 概観
  remove_menu_page('plugins.php'); // プラグイン
  remove_menu_page('users.php'); // ユーザー
  remove_menu_page('profile.php');
  remove_menu_page('tools.php'); // ツール
  remove_menu_page('options-general.php'); // 設定
  remove_submenu_page('themes.php', 'customize.php?return=%2Fwp-admin%2Fthemes.php');
}
add_action('admin_menu', 'remove_menu', 999);
?>

 

拡張子にhtmlを付ける 

<?php
    add_action( 'init', 'wp_init' );
    if ( ! function_exists( 'wp_init' ) ) {
      function wp_init() {
        global $wp_rewrite;
        $wp_rewrite->use_trailing_slashes = false;
        $wp_rewrite->page_structure = $wp_rewrite->root . '%pagename%.html';
      }
    }
?>