ページが見つかりませんでした – Sitommy https://sitommy.com 未経験なんて関係ない! やれば必ず転職できる! Web制作者になった元飲食店員が語るBLOG Fri, 18 Jun 2021 07:42:20 +0000 ja hourly 1 https://wordpress.org/?v=6.4.3 株式会社REA-FT、設立しました!! https://sitommy.com/blog/2763/ https://sitommy.com/blog/2763/#respond Thu, 05 Nov 2020 16:21:00 +0000 https://sitommy.com/?p=2763 どうも、Tommy(@SitommyBlog)です。

この度、2020年11月6日に株式会社REA-FTを開設しました。
今年に入って、コロナ影響もあり環境が著しく変わっていきました。

その中で、独立する流れが急激に来たと感じ思い切って独立をしようと決断したっと言うのが今月設立した最大のきっかけだと思っています。

このチャンスをものにするために、今後は個人ではなく法人として活動することにしました。
いつも記事を読んで頂いている方、今後もどうぞよろしくお願いいたします。

会社名の由来

株式会社REA-FT

これが、私の会社名となります。

REA-FTとは、「REAL」と「GIFT」の造語で命名しました。
社名の由来と我社のミッションは、

『私たちの考える最大のミッションは社会に点在するあらゆる課題をWEBテクノロジーで向き合います。

課題を乗り越えるためには豊富な経験や知識が必要です。

お客様一人では向き合えないことが多い今、私たちのフィルターを通して繋がり解決するための道しるべを生み出します。

必要なのは今をより面白く、そして豊かにするためのアイデアと実現力。

あらゆるキッカケを考え作りあるべき未来を共に創出します。』

これがミッションでもあり、経営理念でもあります。

事業内容

  • WEBサイト制作
  • WEBアプリケーション開発
  • システム開発

この3つを主軸として活動し、他にも

  • 動画コンテンツ制作
  • WEBサービス
  • ブログ更新

の活動もしていきます。

なにかご相談があれば是非問い合わせください!

独立した動機

もともとこのWEB業界に入る時に、最終的には独立をしたいと思って日々勉強をし仕事に取り組んでいました。

一番の動機としては、

お金をもらう立場から、お金を稼ぐ立場になりたいということです。

そして、自分が思い描いたサービスで少しでも社会貢献できれば、父親として子供に胸を張って未来は楽しいと言えるなっと思っております。

『楽しんで生きる、1歩前へ踏み出し挑戦する選択をする

成功の反対は失敗ではなく、それは挑戦しないことである

未来をもっと面白く豊かにするために我々は、イノベーションし続ける』

これが私の動機です。

]]>
https://sitommy.com/blog/2763/feed/ 0
【WordPress】ステージング環境をサブドメインで構築する方法 https://sitommy.com/wordpress/2736/ https://sitommy.com/wordpress/2736/#respond Fri, 11 Sep 2020 15:23:40 +0000 https://sitommy.com/?p=2736 どうも、Tommy(@SitommyBlog)です。

今回は、WordPressを使ったWebサイトのステージング環境を構築する方法について書いていきます。

参考とする方:
・WordPressサイトを作成している人
・テーマやプラグインのアップデートをしたいけど、エラーとなって閲覧できなくなる心配がある人

ステージング環境を作る際に、いくつか方法はありますがここでは「サブドメイン」を使った方法を紹介します。

なぜ、ステージング環境を構築するか?

WordPressの案件を受けることになったとして、その本番ドメインが「example.com」としましょう。

「example.com」が新ドメインだった場合は、そのまま開発しその後本番として公開することになるかと思います。

最初は問題ないのですが、公開後に絶対訪れるWordPress本体のアップデートが来ます。
その際に、たまにアップデートしたことで今まで使用できていたプラグインが使用できなくなるケースがあります。

そうなると、最悪システムがエラーとなりWebページが表示されなくなります。

そのため、ステージング環境を構築することでまずステージング環境でアップデートをし問題がなければ、本番環境をアップデートすることで、表示されなくなるリスクを防ぐことができます。

これが自分自身のサイトならエラーになっても問題はないのかもしれませんが、案件となるとそうは行きません。

責任問題にもなりかねないので、ステージング環境は必須といえるでしょう。

サブドメインを作る

「example.com」という本番ドメインだとすると、サブドメインは「staging.example.com」とするとわかりやすいかと思います。

レンタルサーバーによって、サブドメインのとり方は多少違うかと思いますがそこまで難しくないので調べて見てください。

ここでは、ロリポップで説明していきます。
まずは、サブドメイン設定を押します。

その後、新規作成ボタンを押します。

サブドメインエリアに任意の名前を入れます。
ここでは、「staging」として「example.com」を選択します。

公開(アップロード)フォルダエリアには、「staging-example」としておくとディレクトリーを確認する際にわかりやすいです。

入力できたら、作成ボタンを押し完成です。

サブドメインに関してはこれでOKかと思います。

新しくデータベースを用意する

データベースを押します。

作成ボタンを押します。
作成すると、ここにどんどん追加されていきます。

項目を入力して作成ボタンを押すと完了です。

後に、データベース名やパスワードなど必要になりますのでメモするなりしておくとスムーズに進められます。

これで、staging用のデータベース(入れ物)が完成しました。

整理してみましょう。
現在は、
・example.com(本番)ドメイン
・example.com用のDB
・staging.example.com(ステージング)ドメイン
・staging.example.com用のDB
がある状態です。

・example.com(本番)ドメイン
・example.com用のDB
こちらには、すでにWordPressデータが入っていて、本番公開をしているとします。

本番のデータをコピーする

まず、FTPから本番のデータをすべてローカルにコピーします。

ここでのすべてとは、「example.com」の中のデータ全てです。

例えば、プロジェクトディレクトリーが、

cms ------------ WPデータ
.htaccess
index.php

とすると、全てです。

このデータは、WordPressのメディア、プラグイン、テーマなどいろいろデータが入っています。

本番のDBからエクスポートする

次に、本番サイトで使用しているデータベースに入ってデータをエクスポートします。

ここでは、phpMyAdminを使って入ります。

ユーザー名・パスワード・サーバーの選択を求められるので、データベースの中に入りましょう。

エクスポートを押します。

エクスポート方法では、簡易ではなく詳細を選びましょう。

テーブルでは、全選択を選びましょう。

フォーマットでは、SQLを選びましょう。

それ以外は、デフォルトのままでいいので実行ボタンを押してデータファイルをわかりやすいところに保管しておきます。

すぐ使うので、デスクトップでいいかと思います。

これで、本番用のデータをすべてコピーすることができました。

次は、ステージング環境にペーストしていきます。

ステージング環境に本番環境のデータをインポートする

まずは、FTPを開いて「staging.example.com」に本番からコピーしたプロジェクトディレクトリーデータすべてを入れてください。

その後に、「wp-config.php」ファイルをエディターで開いて修正します。

// ** MySQL 設定 - この情報はホスティング先から入手してください。 ** //
/** WordPress のためのデータベース名 */
define( 'DB_NAME', 'ステージング用のものに変更' );

/** MySQL データベースのユーザー名 */
define( 'DB_USER', 'ステージング用のものに変更' );

/** MySQL データベースのパスワード */
define( 'DB_PASSWORD', 'ステージング用のものに変更' );

/** MySQL のホスト名 */
define( 'DB_HOST', 'ステージング用のものに変更' );

/** データベースのテーブルを作成する際のデータベースの文字セット */
define( 'DB_CHARSET', 'utf8' );

/** データベースの照合順序 (ほとんどの場合変更する必要はありません) */
define( 'DB_COLLATE', '' );

本番用からコピーされたものなので、修正前は本番用のデータベースの情報が入っていますのでステージング用に変更して再度FTPにアップしてください。

ここまでは、いわゆるフロント側のものです。

ここからはバックいわゆる、データベースをインポートしてステージング用に書き換える作業をします。

では、ステージング環境のデータベースphpMyAdminにログインしましょう。

そして、インポートを選択してください。

先程、デスクトップに保存しておいたデータをここにインポートします。

そして実行を押すと、完全に本番と同じデータベースが出来上がります。

ここで消して終わらない!!

ここで作業を終わると、本番環境とステージング環境のデータベースが同じものなのでエラーが生じて、ややこしくなってしまい私も一度どちらのデータもアウトになってしまった経験があります。

その時は、あまり知識がなかったためなぜWordPressにログインできなくなったのかわからなくなりいろいろ触ってしまって結局修復不能になってしまいました。

やらなくてはいけない作業とは、データベースの中に、「wp_options」という項目があります。

siteurl・home・blognameをステージング用に変更しなくてはいけません。

ここでは、
siteurl:https://staging.example.com/cms
home:https://staging.example.com/
blogname:staging.example
とします。

これは、ステージング環境WordPressの一般設定で変更できる箇所に当たります。

ここを変更しておかないとややこしくなるので忘れずにやっておきましょう!

完成!!

これで、本番環境のWordPress管理画面とステージング環境のWordPress管理画面とそれぞれログインできるようになりました。

ステージング環境の方のWordPressログイン・パスワードは変更していないので、本番環境と同じ物を入れてください。

ただし、それぞれアクセス場所が違うので注意しましょう。

当然、本番環境は「https://example.com/cms/wp-admin/」でステージング環境は「https://staging.example.com/cms/wp-admin/」です。

まとめ

無事、ステージング環境が構築できたことを願っております。

データベースなど触るため、結構毛嫌いされる方も多いかと思いますが単純な作業かと思いますので是非やってみてください。

正直、この理屈がわかればステージング環境構築ではなく、WordPressサイトの引っ越しも同じ用にできます。

この作業だけでも、結構お金になるので覚えたほうがいいですよ!

プラグインを使って、楽にデータをエクスポートできたりするんですがプラグイン使うまでもないかと思っています。

あと、結構調べたんですがステージング環境をする際にプラグインを使う記事が多くて個人的にはプラグインなしの記事がほしかったので書きました。

少しでも、参考になっていただければ幸いです。

]]>
https://sitommy.com/wordpress/2736/feed/ 0
【必見】2020年版Gulp4設定はこれ!! https://sitommy.com/gulp/2723/ https://sitommy.com/gulp/2723/#respond Tue, 08 Sep 2020 10:23:47 +0000 https://sitommy.com/?p=2723 どうも、Tommy(@SitommyBlog)です。

Webサイトを制作するにあたって、テンプレートエンジンを使用することがあります。
そのときに、私自身が使用しているテンプレートエンジンはEJSを採用しております。

EJS以外にも、テンプレートエンジンはありますがマークアップエンジン上がりの私にはマークダウン方式を採用しているPugよりhtmlの書き方と同じように記述できるEJSの方が楽かなっと思っています。

案件で、Pugを使ったものが出てきた際にはそちらも勉強しようかなっとは思っております。
決して、EJSの方が優れているとか競った考えはしておりません。

話を戻すと、私がWebサイトを構築する際に以下のものを自動化してくれるようにしてます。

  • EJSからHTMLに
  • SCSSからCSSに
  • JSをmin化
  • imageの圧縮
  • JSONファイルの使用

これらを自動化するために、タスクランナーGulpを使用しています。

その設定(gulpfile.js)を紹介したいと思います。

gulpfile.js設定

const { src, dest, watch, lastRun, parallel } = require('gulp');
const sass = require("gulp-sass");                  // Sassを使う
const glob = require("gulp-sass-glob");             // sassのimportを楽にする
const postcss = require("gulp-postcss");            // Autoprefixと一緒に使うもの
const autoprefixer = require("autoprefixer");       // Autoprefix
const plumber = require("gulp-plumber");            // エラーでも強制終了させない
const notify = require("gulp-notify");              // エラーのときはデスクトップに通知
const replace = require('gulp-replace');            // 文字列置換をする
const cmq = require('gulp-combine-media-queries');  // メディアクエリー
const cleanCSS = require("gulp-clean-css");         // cssの圧縮
const del = require("del");                         // ファイル、ディレクトリの削除
const minifyHTML = require('gulp-minify-html');     // htmlの圧縮
const ejs = require("gulp-ejs");                    // EJS(htmlのパーツ化)
const rename = require("gulp-rename");              // ejsの拡張子を変更
const concat = require("gulp-concat");              // ファイルの結合
const order = require("gulp-order");                // 指定した順番で並べる
const uglify = require("gulp-uglify");              // script圧縮用
const pngquant = require("imagemin-pngquant");      // 画像圧縮
const imagemin = require("gulp-imagemin");          // 上と同じ
const mozjpeg = require("imagemin-mozjpeg");        // 上と同じ
const browserSync = require("browser-sync");        // ブザウザ読み込み・反映
const fs = require('fs');//jsonファイルを使用するときに必要
const mode = require('gulp-mode')({
    modes: ["production", "development"],
    default: "development",
    verbose: false
});
// 読み込むパスと出力するパスを指定
const srcPath = {
    html: {
        src: ["./src/ejs/**/*.ejs", "!" + "./src/ejs/**/_*.ejs"],
        dist: "./dist/"
    },
    json: {
        src: ["./src/**/*.json"]
    },
    styles: {
        src: "./src/scss/**/*.scss",
        dist: "./dist/css/",
        map: "./dist/css/map"
    },
    scripts: {
        src: "./src/js/**/*.js",
        dist: "./dist/js/",
        map: "./dist/js/map",
        core: "src/js/core/**/*.js",
        app: "src/js/app/**/*.js"
    },
    images: {
        src: "./src/img/**/*.{jpg,jpeg,png,gif,svg}",
        dist: "./dist/img/"
    }
};


/// htmlの処理自動化 ////////////////////////////////////////////
const htmlFunc = () => {
    const json01 = JSON.parse(fs.readFileSync('./src/json/pages.json', 'utf8')),
        json_arr = { pages: json01 };

    return src(srcPath.html.src)
        .pipe(
            plumber({ errorHandler: notify.onError("Error: <%= error.message %>") })
        )
        .pipe(ejs(json_arr))
        .pipe(rename({ extname: ".html" }))
        .pipe(
            mode.production(
                minifyHTML({ empty: true })
            )
        )
        .pipe(replace(">\n\n", ">\n"))
        .pipe(replace(/[\s\S]*?(<!DOCTYPE)/, "$1"))
        .pipe(dest(srcPath.html.dist))
        .pipe(browserSync.reload({ stream: true }));
};


/// Scssの処理自動化 ////////////////////////////////////////////
// 開発用
const stylesFunc = () => {
    return src(srcPath.styles.src, { sourcemaps: true })
        .pipe(
            plumber({ errorHandler: notify.onError("Error: <%= error.message %>") })
        )
        .pipe(glob())
        .pipe(sass({ outputStyle: "expanded" }).on("error", sass.logError))
        .pipe(
            postcss([
                autoprefixer({
                    cascade: false,
                    grid: true
                })
            ])
        )
        .pipe(cmq())
        .pipe(replace("}\n\n", "}\n"))
        .pipe(dest(srcPath.styles.dist, { sourcemaps: "./map" }))
        .pipe(browserSync.reload({ stream: true }));
};
// 本番用
const stylesCompress = () => {
    return src(srcPath.styles.src)
        .pipe(
            plumber({ errorHandler: notify.onError("Error: <%= error.message %>") })
        )
        .pipe(glob())
        .pipe(sass({ outputStyle: "compressed" }).on("error", sass.logError))
        .pipe(
            postcss([
                autoprefixer({
                    cascade: false,
                    grid: true
                })
            ])
        )
        .pipe(cmq())
        .pipe(cleanCSS())
        .pipe(dest(srcPath.styles.dist))
        .pipe(browserSync.reload({ stream: true }));
};


/// scriptの処理自動化 ////////////////////////////////////////////
const scriptFunc = () => {
    return src(srcPath.scripts.src, { sourcemaps: true })
        .pipe(order([srcPath.scripts.core, srcPath.scripts.app], { base: "./" }))
        .pipe(
            plumber({ errorHandler: notify.onError("Error: <%= error.message %>") })
        )
        .pipe(concat("init.js"))
        .pipe(uglify({ output: { comments: /^!/ } }))
        .pipe(
            rename({
                suffix: ".min"
            })
        )
        .pipe(dest(srcPath.scripts.dist, { sourcemaps: "./map" }))
        .pipe(browserSync.reload({ stream: true }));
};


/// 画像圧縮の処理自動化 ////////////////////////////////////////////
const imagesBase = [
    pngquant({
        quality: [0.7, 0.85]
    }),
    mozjpeg({
        quality: 80
    }),
    imagemin.gifsicle(),
    imagemin.mozjpeg(),
    imagemin.optipng(),
    imagemin.svgo({
        removeViewBox: false
    })
];
const imagesFunc = () => {
    return src(srcPath.images.src, { since: lastRun(imagesFunc) })
        .pipe(plumber({ errorHandler: notify.onError("<%= error.message %>") }))
        .pipe(imagemin(imagesBase))
        .pipe(dest(srcPath.images.dist));
};


/// マップファイル除去 ////////////////////////////////////////////
const cleanMap = () => {
    return del([srcPath.styles.map, srcPath.scripts.map]);
};


/// ブラウザの読み込み処理 ////////////////////////////////////////////
const browserSyncFunc = () => {
    browserSync({
        port: 8080,
        server: {
            baseDir: "./dist/",
            index: "index.html"
        },
        reloadOnRestart: true
    });
};


/// 監視フォルダ ////////////////////////////////////////////
const watchFiles = () => {
    watch(srcPath.html.src, htmlFunc);
    watch(srcPath.json.src, htmlFunc);
    watch(srcPath.styles.src, stylesFunc);
    watch(srcPath.scripts.src, scriptFunc);
    watch(srcPath.images.src, imagesFunc);
};

exports.default = parallel(imagesFunc, watchFiles, browserSyncFunc);
exports.build = parallel(htmlFunc, stylesFunc, scriptFunc, imagesFunc);
exports.scsscompress = stylesCompress;
exports.cleanmap = cleanMap;

2年弱ほどgulpを使っていろいろ試行錯誤してきましたが、これが今の私の2020年版ベストgulpfile.jsかなっと思っております。

と言いつつすぐにバージョンアップする可能性もありますが今回はこちらを紹介できればと思います。

上から順に説明していきます。

変数エリア

const { src, dest, watch, lastRun, parallel } = require('gulp');
const sass = require("gulp-sass");                  // Sassを使う
const glob = require("gulp-sass-glob");             // sassのimportを楽にする
const postcss = require("gulp-postcss");            // Autoprefixと一緒に使うもの
const autoprefixer = require("autoprefixer");       // Autoprefix
const plumber = require("gulp-plumber");            // エラーでも強制終了させない
const notify = require("gulp-notify");              // エラーのときはデスクトップに通知
const replace = require('gulp-replace');            // 文字列置換をする
const cmq = require('gulp-combine-media-queries');  // メディアクエリー
const cleanCSS = require("gulp-clean-css");         // cssの圧縮
const del = require("del");                         // ファイル、ディレクトリの削除
const minifyHTML = require('gulp-minify-html');     // htmlの圧縮
const ejs = require("gulp-ejs");                    // EJS(htmlのパーツ化)
const rename = require("gulp-rename");              // ejsの拡張子を変更
const concat = require("gulp-concat");              // ファイルの結合
const order = require("gulp-order");                // 指定した順番で並べる
const uglify = require("gulp-uglify");              // script圧縮用
const pngquant = require("imagemin-pngquant");      // 画像圧縮
const imagemin = require("gulp-imagemin");          // 上と同じ
const mozjpeg = require("imagemin-mozjpeg");        // 上と同じ
const browserSync = require("browser-sync");        // ブザウザ読み込み・反映
const fs = require('fs');//jsonファイルを使用するときに必要
const mode = require('gulp-mode')({
    modes: ["production", "development"],
    default: "development",
    verbose: false
});

上記は、Gulpプラグインをインストールしたものを変数に置いています。

const srcPath = {
    html: {
        src: ["./src/ejs/**/*.ejs", "!" + "./src/ejs/**/_*.ejs"],
        dist: "./dist/"
    },
    json: {
        src: ["./src/**/*.json"]
    },
    styles: {
        src: "./src/scss/**/*.scss",
        dist: "./dist/css/",
        map: "./dist/css/map"
    },
    scripts: {
        src: "./src/js/**/*.js",
        dist: "./dist/js/",
        map: "./dist/js/map",
        core: "src/js/core/**/*.js",
        app: "src/js/app/**/*.js"
    },
    images: {
        src: "./src/img/**/*.{jpg,jpeg,png,gif,svg}",
        dist: "./dist/img/"
    }
};

こちらは読み込むパスと出力するパスを事前に指定しています。

srcが読み込みをするパスで、distが出力するパスとしています。

mapは、sourcemapを出力するパスです。

coreやappに関しては、後ほどJSの部分で説明しますがそれぞれ役割をもっとフォルダーを用意して管理しやすいようにしています。

HTMLの処理自動化(JSONファイル読み込み)

const htmlFunc = () => {
    const json01 = JSON.parse(fs.readFileSync('./src/json/pages.json', 'utf8')),
        json_arr = { pages: json01 };

    return src(srcPath.html.src)
        .pipe(
            plumber({ errorHandler: notify.onError("Error: <%= error.message %>") })
        )
        .pipe(ejs(json_arr))
        .pipe(rename({ extname: ".html" }))
        .pipe(
            mode.production(
                minifyHTML({ empty: true })
            )
        )
        .pipe(replace(">\n\n", ">\n"))
        .pipe(replace(/[\s\S]*?(<!DOCTYPE)/, "$1"))
        .pipe(dest(srcPath.html.dist))
        .pipe(browserSync.reload({ stream: true }));
};

こちらがEJSをHTMLにコンパイルして、なおかつJSONファイルを使ってEJSと紐付けています。

そして、開発用と本番用で出力方法を分けています。

本番時の書き出しはHTMLをmin化にさせる用に設定しています。
min化することでいろいろ不都合が起きることもあります。

例えば、クライアント側で更新などを目的としている場合はmin化にすると更新が難しくなったりやりにくくなったりしますのでmin化はしません。

JSONファイルをなぜ使用するのかと言うと、metaデータなどページごとに設定する必要があるものページごとに管理すると修正や更新がとてもめんどくさくなります。

でも、JSONファイルで一括管理すればJSONファイルだけ開いて作業することで効率がいいのです。

ここでは、詳しい説明は省かせてもらいますがJSONファイルを使用するのとしないのとでは作業が全然違います。

使用するためには、EJSの方でも書き方はありますがこちらは別途記事にしたいと思います。

Scssの処理自動化

こちらも、開発用と本番用があります。

// 開発用
const stylesFunc = () => {
    return src(srcPath.styles.src, { sourcemaps: true })
        .pipe(
            plumber({ errorHandler: notify.onError("Error: <%= error.message %>") })
        )
        .pipe(glob())
        .pipe(sass({ outputStyle: "expanded" }).on("error", sass.logError))
        .pipe(
            postcss([
                autoprefixer({
                    cascade: false,
                    grid: true
                })
            ])
        )
        .pipe(cmq())
        .pipe(replace("}\n\n", "}\n"))
        .pipe(dest(srcPath.styles.dist, { sourcemaps: "./map" }))
        .pipe(browserSync.reload({ stream: true }));
};

// 本番用
const stylesCompress = () => {
    return src(srcPath.styles.src)
        .pipe(
            plumber({ errorHandler: notify.onError("Error: <%= error.message %>") })
        )
        .pipe(glob())
        .pipe(sass({ outputStyle: "compressed" }).on("error", sass.logError))
        .pipe(
            postcss([
                autoprefixer({
                    cascade: false,
                    grid: true
                })
            ])
        )
        .pipe(cmq())
        .pipe(cleanCSS())
        .pipe(dest(srcPath.styles.dist))
        .pipe(browserSync.reload({ stream: true }));
};

html同様に出し分けをしています。

本番用は開発用と違って、コンパイルされたCSSをmin化することです。

こちらも状況によってはmin化せず納品する場合はあります。

scriptの処理自動化

const scriptFunc = () => {
    return src(srcPath.scripts.src, { sourcemaps: true })
        .pipe(order([srcPath.scripts.core, srcPath.scripts.app], { base: "./" }))
        .pipe(
            plumber({ errorHandler: notify.onError("Error: <%= error.message %>") })
        )
        .pipe(concat("init.js"))
        .pipe(uglify({ output: { comments: /^!/ } }))
        .pipe(
            rename({
                suffix: ".min"
            })
        )
        .pipe(dest(srcPath.scripts.dist, { sourcemaps: "./map" }))
        .pipe(browserSync.reload({ stream: true }));
};

こちらはJSファイルの自動化に当たります。

上記で少しお伝えしたcoreとappについてですが、coreに関してはjQuery本体を入れる場所、appはプラグインを入れる場所として管理しています。

順番もjQuery本体・プラグイン・自身で書くJSファイルの順にまとめてmin化してくれるようになります。

画像圧縮の処理自動化

const imagesBase = [
    pngquant({
        quality: [0.7, 0.85]
    }),
    mozjpeg({
        quality: 80
    }),
    imagemin.gifsicle(),
    imagemin.mozjpeg(),
    imagemin.optipng(),
    imagemin.svgo({
        removeViewBox: false
    })
];
const imagesFunc = () => {
    return src(srcPath.images.src, { since: lastRun(imagesFunc) })
        .pipe(plumber({ errorHandler: notify.onError("<%= error.message %>") }))
        .pipe(imagemin(imagesBase))
        .pipe(dest(srcPath.images.dist));
};

PSDデータなどで書き出した画像をそのまま使用すると結構重いことがあるので、できる限り圧縮して使用したほうがいいです。

フリーソフトなどで画像圧縮もありますが、自動でやってくれるなら楽なので採用しています。

ただ、デメリットとしてはプロジェクトファイルに画像データが倍の量格納されるということなので、ファイル全体としては重くなります。

マップファイル除去

const cleanMap = () => {
    return del([srcPath.styles.map, srcPath.scripts.map]);
};

ソースマップを削除させるために使用しますが、こちらは本番時にのみ処理をします。

ブラウザの読み込み処理

const browserSyncFunc = () => {
    browserSync({
        port: 8080,
        server: {
            baseDir: "./dist/",
            index: "index.html"
        },
        reloadOnRestart: true
    });
};

gulpを起動した際に、自動でブラウザを立ち上げます。

localhost:8080で立ち上がり、なおかつIPアドレス + 8080と出力できるようになるので開発者としてはとても重宝しています。

IPアドレス + 8080をSPの実機で入力することで、開発の時点から実機確認ができます。

監視フォルダ

const watchFiles = () => {
    watch(srcPath.html.src, htmlFunc);
    watch(srcPath.json.src, htmlFunc);
    watch(srcPath.styles.src, stylesFunc);
    watch(srcPath.scripts.src, scriptFunc);
    watch(srcPath.images.src, imagesFunc);
};

このwatchで修正・更新等をチェックし都度反映してくれます。

実行するためには

exports.default = parallel(imagesFunc, watchFiles, browserSyncFunc);
exports.build = parallel(htmlFunc, stylesFunc, scriptFunc, imagesFunc);
exports.scsscompress = stylesCompress;
exports.cleanmap = cleanMap;

基本的には開発スタートなので、デフォルトのタスクランナーを走らせます。

gulp

HTMLをmin化して本番用として切り替えるときはこちら。

gulp --prodution

CSSをmin化して本番用として切り替えるときはこちら。

gulp scsscompress

ただ、ファイル更新するのみの場合はこちら。

gulp build

ソースマップを削除する場合はこちら。
本番用として出力する際にこちらをしておきましょう。

gulp cleanmap

Gulpについて

上記のgulpfile設定は、Gulp4の設定構築です。

まだ、Gulp3で作業されている方もいるかと思いますので、事前確認はお願いいたします。

ちなみに確認方法はこちら。

gulp -v

まとめ

プロジェクトによっては、設定を変更していただければとおもいます。

今後は、この設定にJavaScriptの部分をTypeScriptに変更して行ければなっとは思っております。

また、この設定構築をブラッシュアップしていければとも思っております。

]]>
https://sitommy.com/gulp/2723/feed/ 0
基礎編 新ブロックエディター調整方法【Gutenberg】 https://sitommy.com/wordpress/2588/ https://sitommy.com/wordpress/2588/#respond Tue, 16 Jun 2020 04:40:00 +0000 https://sitommy.com/?p=2588 どうも、Tommy(@SitommyBlog)です。

今回は、WordPressの新エディター『Gutenberg』の調整方法(基礎編)について書いていこうと思います。

私自身、カスタムブロックを使用するためにいろんなサイトやWP公式サイトを見ました。
まだまだ勉強中ではありますが、少しでもOUTPUTしたいのと同じ悩みで行き詰まっている人に共感していただけたらと思い書いていこうと思います。

今回の目的とは?

基礎編ということなので、今回はブロックエディターの調整をするところまで書いていこうと思います。

『調整とは?』

  • エディター側にもCSSを使ってよりリッチに見せる
  • そのCSSでサイト側の表示とエディター側の表示を一緒にする

こうすることで、プレビューをしなくてもエディター側でどういう風にサイト側で表示されるかわかるようにするということです。

事前準備

エディター側にCSSを読み込まさないといけません。

そのためには、『functions.php』に以下のコードを追加する必要があります。

function add_my_assets_to_block_editor() {
    wp_enqueue_style( 'block-style', get_stylesheet_directory_uri() . '/assets/css/editor.css' );
}
add_action( 'enqueue_block_editor_assets', 'add_my_assets_to_block_editor' );

こうすることで、『editor.css』がエディター側のスタイルとして効いてくるようになりました。

ただ一つ注意点があります。

それは、サイト側は『style.css』を読み込んでスタイルが付与されています。

そして、エディター側は『editor.css』を読み込んでスタイルが付与されるということなので、『editor.css』にスタイルを記述しても、実際サイト側ではスタイルが付与されていない状態になります。

エディター側とサイト側では別々のCSSが読み込まれているため、このようになってしまいます。

今回の目的は『サイト側の表示とエディター側の表示を一緒にする』なので、
headエリアに『editor.css』をlink設定させることで『editor.css』に記述したものもサイト側に反映されます。

調整開始

私のサイトの場合、最大コンテンツ幅が『約905px』なのでエディター側も同じように広げたいと思います。

エディター側のデフォルト幅は『580px』なので同じように広げます。


エディター側で、デベロッパツールを開いて幅指定しているクラスを探しましょう。

.editor-styles-wrapper .wp-block{
 max-width: 905px;
}

これで、エディター側の幅も『約905px』に調整することができました。

まとめ

上記で説明してきたのは、あくまでも私がやっているものなので正しいかどうかは正直わかりません。

また、もっといいやり方があるかもですが今のところはこんな感じでってことで!
私自身も、勉強中ですので完了をどんどんしていきたいと思っています!

今回は、基礎編としてエディター側の調整をしましたが今後はカスタマイズなどの記事も書いていきたいと思っています。

]]>
https://sitommy.com/wordpress/2588/feed/ 0
【PhotoShop】アセット生成で効率アップ! https://sitommy.com/design/2606/ https://sitommy.com/design/2606/#respond Mon, 18 May 2020 14:23:00 +0000 https://sitommy.com/?p=2606 どうも、Tommy(@SitommyBlog)です。

Webサイトを制作している人必見です。

コーディングをする際に、スライスという作業が発生します。
そのスライス作業で、今回お伝えする『アセット』というものを使用することで時短が出来ます。

また、SVGや2倍の大きさに書き出すことも可能なので、覚えておくと重宝すること間違いなし!

アセットの設定方法

Adobeソフト イラストレーター(AIと省略)にもアセットの機能があり、とても使いやすいのですが、PhotoShop(PSDと省略)でアセットの機能を使うためには少し設定作業が必要です。

PSDデータを開いたら『ファイル → 生成 → 画像アセット』にチェックを入れます。

これで、今開いているPSDデータではアセット機能が使えるようになっています。

他のPSDデータを開いた場合は、同じように『画像アセット』にチェックを入れましょう!

アセットの書き出し方法

PSDでは、この書き出し方がよくわからないっていう人も多いんではないでしょうか?

AIでは、右クリックすれば書き出しができるんですがPSDではないです。

実は、PSDではレイヤー名を変更することで自動で書き出しをしてくれます。

上記の画像アセットにチェックをしていないと書き出しがされません!

では、実際に書き出し手順を踏まえてやっていきましょう。

上記のPSDデータでやっていきます。

レイヤーは次のようになっています。

ボタン全体を書き出したい場合は、素材レイヤーをフォルダーに入れて管理すること!

ここでは、レイヤー名の『btn』というフォルダーが親になります。
このレイヤー名を『btn.png』と拡張子を入れて変更します。

書き出し先は、PSDデータを置いているフォルダーに新たに『〇〇-assets』とフォルダーが出てきます。
〇〇は、PSD名が入ります。

上記のように、『btn.png』が書き出していれば成功です。

当然、拡張子をjpg・gif・svgにするとその拡張子で書き出し可能です。

アセット命名ルール(レイヤー名)

命名ルールとして、いろいろオプションがあるので私自身がよく使うものを紹介します。

サイズや複数の指定

サイズ指定したい場合は、『レイヤー名の前』に記述します。

倍で書き出したい場合は、

  • 200% btn.png

複数画像の書き出しをしたい場合は、『,』を使用します。
例えば、

  • btn.png, btn.gif
  • 200% btn@2x.png, btn.png

このように『,』 で区切ることで複数指定できます。
『,』後の半スペは、必須ではないです。

JPGの画質指定

普段JPGでスライス書き出しする際に、画質指定をしているかと思います。

その画質指定もアセットで可能です。

  • btn.jpg10
  • btn.jpg5
  • btn.jpg15%

このように、指定します。

100%や50%の画質の場合は、数字のみで大丈夫です。
『%』は省略できますが、10%ずつのみとなります。

15%や77%みたいに細かい設定をする場合は必ず『%』をつけてください。

指定しないデフォルトは『80%の画質』になります。

PNGの画質設定

PNGも『8・24・32』bitの画質設定があります。
こちらもアセットで可能です。

  • btn.png8
  • btn.png24
  • btn.png32

このように、指定します。

基本デフォルトでいいかとは思います。

デフォルトは『32bit』になります。

GIFの画質設定

GIFの場合は、特にオプションがないです。
なので、拡張子のみになります。

デフォルトは透過GIFになります。

SVGの書き出し

SVGだけ少し問題があります。

今まで通り、レイヤー名に拡張子で『.svg』とつけても、うまくキレイに表示されなかったりします。

SVGにしているのに、全く表示されなかったり、荒く表示されていたり、ぼんやりして見えるというケースがあります。

その場合、SVGをエディターで開くと

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="17" viewBox="0 0 12 17">
  <image id="icon01.svg" width="12" height="17" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAARCAYAAADpPU2iAAAAvklEQVQokdWQsQrCMBRFTytOSkEhkFUqFIdOLq7+kjiJs5M/4O5/uLo4uahY3CRQpCCiqwTSEmtp6+idknvveQ+egyVfihBYAmPjboBppOJ92soAX4o+sAM8PnUHhpGKz9p1rWheUNbyTEYeCAvKX5kNXEuALLOBVQmQZY30kTyep267dTMXahr7BUwiFa/TnpMf5UvRAUbmu41UnJRsrpbjSzEAFkCvon0BZho4AEHNBUf3h7JWYJ+1lv4eAN6ANiREb1l4aAAAAABJRU5ErkJggg=="/>
</svg>

このようにimageタグで書き出されています。

まず、表示されない原因は『xlink:href=”data:img/png;・・・・』と書かれている場所がありますが、
imgからimageと変更することで表示されるようになります。

『xlink:href=”data:image/png;・・・・』にすれば表示されます。

ただSVGなのに、ぼやけてしまって意味を出していません。

SVGで書き出す際に、注意しなければいけないことは『シェイプ』にしているかどうかです。

AIからコピペで、『スマートオブジェクト・ピクセル・パス・シェイプレイヤー』と4つから選択することができます。

デザイナーは、頻繁に使うアイコンは『スマートオブジェクト』にして使用しているケースが多いかと思います。

ただ、スマートオブジェクトのまま書き出してもパスとして取得せず、imageとして書き出されてしまいます。

なので、必ず『シェイプ』かどうか確認してSVGの書き出しを行ってください。
すると、

<svg xmlns="http://www.w3.org/2000/svg" width="12.16" height="17.906" viewBox="0 0 12.16 17.906">
  <defs>
    <style>
      .cls-1 {
        fill-rule: evenodd;
      }
    </style>
  </defs>
  <path id="icon01.svg" class="cls-1" d="M1266.05,13.225a3.845,3.845,0,1,1-3.85-3.847A3.846,3.846,0,0,1,1266.05,13.225Zm2.23,8a2.144,2.144,0,0,0-2.14-2.139h-7.88a2.15,2.15,0,0,0-2.14,2.139v6.057h12.16V21.226Z" transform="translate(-1256.12 -9.375)"/>
</svg>

このようにパスで書き出してくれます。

シェイプ同士で結合したイラストの場合も、『シェイプコンポーネントを結合』をチェックしないと中抜け状態で書き出されることがあります。

まとめ

PSDでアセット生成するには、レイヤー名を変える作業があり少しめんどくさいと感じる方もいるかと思います。

毎回、ダブルクリックでレイヤー名を変更するのは結構しんどいので、ショートカットに登録しておくと効率がよくなります。

PSD開いて、『編集 → キーボードショートカットとメニュー』と押してください。

『レイヤー → レイヤー名の変更』にキーボードショートカットを割り当てればOK。

私の場合は、『command+control+A』に指定しております。

アセットを使いこなせると、今までスライスしていた作業工数が馬鹿らしくなってきます。
少しクセはあるかとは思いますが、アセットを活用していただければと思います。

昔からPSDを使っている人で頑固な人に限って、最新の技術を取り得れようとしません。
「今のやり方が染み付いてこっちの方が早い!」という方が多く見受けられます。

そんな人達に、ドヤ顔で
「アセット使ってないんですか??」
っと言ってやりましょう!

是非、今後のコーディング作業を少しでも楽にしていただければと思います。

]]>
https://sitommy.com/design/2606/feed/ 0
サイトリニューアルしました! https://sitommy.com/blog/2578/ https://sitommy.com/blog/2578/#respond Fri, 03 Apr 2020 14:55:00 +0000 https://sitommy.com/?p=2578 どうも、Tommy(@SitommyBlog)です。

やっとサイトがリニューアル出来ました!

多少、いろいろあったので少し書いていこうかなっと書いていこうかなっと思います。

はじめ

正直、思っていたより遥かに時間がかかってしまいました。

当初は、昨年12月から年明け1月末で作業を終えるつもりが、仕事の影響などで時間を作れなかったことが大きな原因でした。

デザインや、ページコーディングは割と早く完成出来たんですが、投稿のカスタム(ブロックカスタム)に結構手こずっていて実は現在進行形でカスタムをしています。

ブロックカスタムのおかげで、以前よりかなり記事を書くのが楽になっていますし、やりたいことができるようになることがめちゃくちゃ楽しくて記事を書くよりカスタムすることに時間をかけてしまっていました。

あと、今まで書いた記事もテーマを変更したため修正が必要になってしまいました。

前は、クラス名を付与しないとスタイルが効かなかったり、『カスタムHTML』を使用したりとかなり反映性が悪かったこともありすべての記事の修正対応でもかなり時間がかかりました。

これに関しては、想定内でした。
そもそも、リニューアルしたかったのもクラス名を付与しなくても反映できるようにしたかったので。

今後の目標は?

もっと投稿を書きやすくするためにブロックカスタムを充実させて、自分だけのテーマを完成させたいと思っています。

反映出来たカスタムは、記事にして共有もできればと思っています。

私は、現在ブロックカスタムをプラグインなしバージョンと、プラグイン『Block Lab』バージョンと混合している形です。

どうしても複雑で、まだすぐに実現できなそうなものは『Block Lab』で対応しています。

まだまだ、紹介できるレベルではないですが引き続き勉強し記事にしていきたいと思っています。

最後

自分だけのテーマを作り上げたいと思って、リニューアルしたいと思いましたし仕事にも反映できそうなので一石二鳥だと思いました。

やっぱり、エンジニアである以上、他人が作ったテーマではなく自分自身で作りたいという気持ちになりますよね。

ただ、勉強のためにもいくつか有料テーマを購入してどうやって作っているのか見たりしています。

開発時と、製品にしたソースは多少違ってきますが、なんとなく理解できるのでとても勉強になります。

将来、テーマを製品化する際にも参考になるなと思っています!
※まだまだ、先の話ですが。。。

]]>
https://sitommy.com/blog/2578/feed/ 0
ブログリニューアルします! https://sitommy.com/blog/2306/ https://sitommy.com/blog/2306/#respond Tue, 26 Nov 2019 07:42:25 +0000 https://sitommy.com/?p=2306 どうも、Tommy(@SitommyBlog)です。

タイトル通り、来年の始めに向けてこちらのブログサイトをリニューアルしたいと考えております!

私が、このブログを作成した目的は、

  • WordPressスキル向上
  • デジタルメモとして残す
  • ノウハウの共有
  • 収益化を生む

この4点がもっとも大きな要素でした。

当然、最初から完璧なものなどできるはずも無いのでブログとして機能させることを第一目標として制作をしました。

次に、収益化を目標としてGoogle AdSenseの申請を出し合格するまで試行錯誤してきました!

Google AdSenseの合格に関して詳しく知りたい方は、下記の記事を是非見てみてください。

サイト自体もオリジナルテーマとして制作してきて、WordPressのスキル向上にもなりましたが、まだまだ納得は言っていませんでしたので、リニューアルも兼ねて改めてオリジナルテーマを完成させたいと思っております。

今後は、ブロックエディターがメインとなるテーマが必須だと思うので、カスタムをどんどんしていきたいと考えております。

最終的には、誰でも扱いやすいWordPressテーマを自身で作りたいのでその第一歩としても今回のリニューアルは考えております。

デザインに関して

デザインに関しても、少し?結構?変更したいので、急にデザインが切り替わる可能性がありますがご了承ください。

現在考えているのは、今よりもう少しシックで落ち着きのあるものにしたいと考えております。

メインビジュアルもしっかりとしたものを追加しようと思っています。
初めて訪れた方にも、良い印象を与えられたらと思います。

SEO対策や読み込み時間等

SEO対策は、現在のサイトも行っていますが本当に必要なものとそうでないものを切り分けたいと思っています。

また、ページ読み込み等の時間も短くするための組み込みも想定して作成しようと思っています。

有料オリジナルテーマの作成が目標!

上記にも書きましたが、来年は誰でも扱える有料テーマを提供するという目標を掲げて行きたいので、リニューアル後も当然改良して行きます。

リニューアル制作時に、調べたことや気づいたことはまとめて改めて記事にしていきたいと思っているので、すみませんがしばらくお待ち下さい!

リニューアル時期

これに関しては、正直まだ目処が立っていませんが年明けのなるべく早い段階でリニューアル公開したいと思っています。

最後に

リニューアル公開準備のため、なかなか記事書くことができず申し訳ございません。

公開後、たくさん記事を書いていきたいと思っておます。
よろしくお願いします!

]]>
https://sitommy.com/blog/2306/feed/ 0
モチベーション効果をもっとも上げる方法 https://sitommy.com/mind/2286/ https://sitommy.com/mind/2286/#respond Fri, 18 Oct 2019 11:00:44 +0000 https://sitommy.com/?p=2286 どうも、Tommy(@SitommyBlog)です。

勉強にしろ、仕事にしろ、モチベーションが低くなってしまうと効率が下がってしまうのはもちろん、継続ができなくなり結局やめてしまうってことになりますよね。

ここでは、『勉強 = プログラミング学習』ということにしていますが、なかなかモチベーションを維持し続けることは大変なことです。

仕事に関しては、勉強と違って、お金が密に関わってきます。
モチベーションが上がらないから今日はできません。なんてことも言えず、低下したまま仕事をし、最終的には仕事をやめて無職になるっていう方も少なくないかと思います。

この記事では、モチベーションを下げないためにはどういった思考を持てばいいか。
また、人間の心理についてわかっていればうまく自分の心をコントロールできるようになるというお話をしていきたいと思います。

  • 勉強してもいつも続かない
  • 仕事先がころころ変わる
  • 期待度より不安度の方が勝って一歩踏み出せない

こういった方に是非見てほしいと思っています。

モチベーションを上げる要因とは?!

そう。
モチベーションを上げるもっともの要因とは、『前に進んでいる』という実感を得るということです。

実は、この『前に進んでいる』という実感を得ることを、体現できている人は多くないんです。

途中でやめてしまう人は、これが原因でやめてしまいます。

つまり、継続をさせるためには『前に進んでいる』という要因を作り出さないと行けないということです。

では、どうするか・・・
ほんとに小さなゴールを立てることです。

この『前に進んでいる』の過程の中には、当然敗北も存在しています。

小さな勝利と小さな敗北が折り重なって、『前に進んでいる』ということになります。

なので、失敗したら駄目なんだということでは決して無いということです。

95%の人が誤解してる・・・

95%の人がわかっていても、続けられないのは誤解をしているからなんです。

人は、成功を夢みて行動を起こしたいと思ってしまう傾向があります。
また、その夢が大きいと現在のスキルから到底叶わないと諦めてしまい怖気づきます。

そうならないように、必ず、

  • 大きな目標を細分化させる

ということをしなくてはいけません。

その際に、ただ細分化をするのではなく『マインドマップ』を使って細分化します。

マインドマップとは、頭の働きを活性化してくれるノートのとり方です。

頭で考えているのことを、『見える化』させることで継続的に考えることができ習得や達成を促すようにしてくれる方法の一つです。

そして、マインドマップを書くことでもっとも重要なのが『曲線で書く』ということです。

自然界に直線というものはなく、必ず曲線になっていることから人の頭にストレスなく情報が入ってくるのは、曲線なんです。

直線だと、一見きれいで見やすく覚えやすいと思ってしまいますが、これは頭の中でストレスを与えてしまっていて記憶に残りにくいと科学的にも証明されています。

そして、人は視覚も持っている為、色で分類を分けてあげるとなお良いということも証明されています。

マインドマップを知らなかった人は、一度試して見てはいかがでしょう。

A4サイズの紙を横にして書くことをオススメしています。
1つの目標に対して1枚として使いましょう。

それが、いくつも作って大きなマップにしていきましょう!

始めのうちは、1つのことに対して3つ枝を増やすイメージで、その3つそれぞれまた3つ枝を増やすまでに収めておくといいと思います。

エフェクチュエーションのテクニック

先程も言いましたが、なにか始めようとした時、チャレンジしようと思った時、大半の人は「成功できるかな!?」や「失敗したらどうしよう・・・」っと考えます。

そうではなく、
チャレンジした時に、「私はどれだけ失敗に耐えられるか」「どれだけ屈強に耐えることができるのか」を考えることが重要です。

新しいことを始めるときに、
「こういう事を始めて、もし半年後収益が出なかったとしてもこういう風に耐えて行こう」

という風に、失敗に耐えられかということをリストアップすることで、人は前に進みやすくなります。

なぜなら、先程も言いましたが、
人は『成功の喜び量よりも失敗の不安量の方が大きい』からです。

4倍もやる気になれる計画の立て方

『日にち単位で管理する』ということです。

例えば、この3ヶ月でHTML/CSSを勉強する。
と計画を立てるとします。

少なからず、挫折する人や、3ヶ月経っても本1冊すら終われないっという状況になったことがあるかと思います。

これは、何なのか。
それは、3ヶ月と月単位で計画を立てると心に少しだけ余裕ができてしまいます。
3ヶ月って結構長いから今日は休もうとか思いがちです。

ただ、日にち単位で管理すると『90日』となると数字が毎日のように減って行き危機感を覚えやすいのです。

気づけば残り『60日』ってなるとヤバ!って心理的になりやすいのでやる気が芽生えやすいんです。

物事が近くに感じられるので、行動が早くなります。

仕事のタスク管理も、日にち単位で管理することで予定が早く立てられる傾向になるし、見通しが良くなります。

まとめ

モチベーションを上げるというのは、個人だけの問題ではないと私は思っていて特に、会社の従業員に対してモチベーションをあげてもらうためには、会社側も上げてもらうような行動をしないと行けないですね。

私が思うに、
『会社 × 個人 + a × 上司』
で従業員のモチベーションが上がると思っています。

会社全体が、教育に対して力を注いでいても、本人が全くやる気が無いっとなると数値は上がりません。

逆もしかりですね。

+ aというのは、その人が持っているスキルによって変わってくるかなっと思います。

結論、個人でも、会社間でも、小さなモチベーションを与えるようにしていかないといけないということです。

人の心理が理解できると、自身のコントロールもできより良いエンジニアライフがおくれるようになれると思います。

モチベーションを上げたいと思っているのであれば、上記の考え方を見直すことから始めてみてはいかがでしょうか。

最後に1つ、人間の心理をついたサービスの実験結果を紹介します。

10杯コーヒーを飲むと、1杯無料のスタンプカードを配った時と、 12杯コーヒーを飲むと、1杯無料のスタンプカードを配った時の検証実験をした際。

12杯のスタンプカードには、予め2つスタンプが押されています。
つまりどちらも、10杯コーヒーを飲むと、1杯無料になるということです。

どちらも同じなのに対して、予め2つスタンプを押したときの方が客足が多かったという実験結果がでました。

これは、2つスタンプが押されていることで小さなモチベーションができたということです。
0より2つ進んだということが、人を前に進めさせたということになったんです。

モチベーションを上げる要因を理解することは、今後自身にとって幸運をもたらしてくれる以外に無いです。

]]>
https://sitommy.com/mind/2286/feed/ 0
レスポンシグRetina対応!srcsetを使っていこう! https://sitommy.com/html/2201/ https://sitommy.com/html/2201/#respond Tue, 15 Oct 2019 11:00:16 +0000 https://sitommy.com/?p=2201 どうも、Tommy(@SitommyBlog)です。

今回は、『srcset』について紹介していきたいと思います。

srcsetとは、HTML5から使用できるようになったもので、とても便利なのでまだ使ったことない人や知らなかった人はこの機会に是非使って下さい。

srcsetとは?!

昨今では、Retinaディスプレーを使用するユーザーが圧倒的に増えてきてます。
srcsetを使うことで、Retinaディスプレーなどの高解像度を使用しているかどうか、画面サイズが変更したかどうかなど自動で判断をしてそれぞれにあった画像を選択して表示してくれるようになります。

設定方法

設定方法は大きく2つあります。
それは、解像度で切り替えする仕様と、画面サイズで切り替えする仕様です。

もちろん、解像度の切り替えと画面サイズの切り替えを同時に設定することも可能です。

解像度で切り替えする

<img src="img/sample.jpg"
     srcset="img/sample.jpg 1x,
             img/sample@2x.jpg 2x"
     alt="サンプル画像">

上記のコードで、『2x』が書かれている箇所がRetina時に対応させるものになります。

まず、画像の名前の付け方は任意ではありますがパッと見てわかりやすいように『任意の名前@2x.拡張子』とするのが一般的になります。

そして、必ず画像パスの後に『半角スペース 2x』と記述するのをお忘れなく。

画面サイズで切り替えする

<picture>
  <source media="(max-width: 450px)" srcset="img/sample-sp.jpg">
  <img src="img/sample-pc.jpg" alt="">
</picture>

上記のコードのように、画面サイズが450px以下の場合『smaple-sp.jpg』画像が表示され、451px以上の場合『sample-pc.jpg』が表示されるようになります。

これでスマホ時とPC時の画像の入れ替えが楽になります。

また、次のようにRetina対応時も自動で対応させることができます。

<picture>
  <source media="(min-width: 320px)" srcset="img/sample-sp.jpg 1x, img/sample-sp@2x.jpg 2x">
  <source media="(min-width: 640px)" srcset="img/sample-pc.jpg 1x, img/sample-pc@2x.jpg 2x">
  <img src="img/sample-pc.jpg" alt-"">
</picture>

これで、画面サイズ320px以上でRetina対応なら『sample-sp@2x.jp』を読み込んでくれるようになります。

srcsetの本領発揮はここから!

上記で書いてきたことはとても序の口に過ぎません。
srcsetのもっとも重要で本領発揮することとしては、『DPIの高さも計算される』というところです。

どういうこと?!
と感じている方もいるかと思います。
下記のコードを見て下さい。

<img src="img/sample.jpg"
     srcset="img/sample-320.jpg 320w,
             img/sample-640.jpg 640w"
     alt="サンプル画像">

上記のコードで書いている内容とは、画面サイズが320px 以上の時『sample-320.jpg』が表示され、画面サイズが640px 以上の時『sample-640.jpg』が表示されるという意味になります。

先程言った『DPIの高さも計算される』ということは、つまり、Retinaディスプレイで見た時画面サイズが320pxだったとしても640pxの画像を読み込んで表示されるということになるんです。

Retinaだと2倍の解像度なので、『320 × 2 = 640』になるということです。

また、『sizes』を組み合わせることでより柔軟に画像を選択できるようになります。

<img src="img/sample.jpg"
     sizes="(min-width: 640px) 50vw, 100vw",
     srcset="img/sample-320.jpg 320w,
             img/sample-640.jpg 640w"
     alt="サンプル画像">

こうなると、とてもややこしいですが、画面サイズが640px以上のときは画面サイズの半分の大きさの画像を読み込んでくれます。
つまり、ここだと『sample-320.jpg』が読み込まれます。

そして、639px以下の時は画面サイズに対して100%の画像が読み込まれます。

グリッドデザイン等で、重宝するだろうなっと思っています。

まとめ

正直、私自身も後半のようなコードで書いたことは少ないですが、前半で書いた画面サイズによって切り替わる手法で頻繁に使用しています。

srcsetを使えば、必要としない画像に対しては読み込まないっということなのでとてもブラウザにとっても優しいです。

もしブラウザ対応していないとしても、srcsetを読み込まず、srcで設定したものを読み込んでくれますし、『picturefill.js』を入れると対応してくれます。

是非、みなさんもsrcsetライフを送っていただければと思います。

]]>
https://sitommy.com/html/2201/feed/ 0
【header追尾】sticky?fixed?どちらを使用したほうがいいか?! https://sitommy.com/javascript/2115/ https://sitommy.com/javascript/2115/#respond Sat, 12 Oct 2019 08:04:22 +0000 https://sitommy.com/?p=2115 どうも、Tommy(@SitommyBlog)です。

今回は、実際に私自身が悩んで決断した方法をお伝えしたいと思います。

Webサイト制作において、headerを追尾させる実装はここ最近当たり前のように使われているかと思います。

その際、みなさんはどういったもので実装されていますか?
jsで実装される方や、cssのみで実装される方で、分かれるかと思います。

私は、cssのみで実装できるものならそれが一番良いと考えており今回もそのつもりで制作しておりました。
ここで、思わぬ誤算が生じてしまい、その体験談を記事にしていこうと思いました。

同じように悩んだ方がいるかと思いますので、是非参考にしてください。

実装したいこととは?

そもそも、実装したいこととは、

  • headerの追尾
  • フルリキッドではなく、ブレイクポイントで切り替える
  • そのため、windowを縮めた際にスクロールで表示をさせたい

この条件からすると、『sticky』で十分だと判断しました。

ここで問題発生!!

IE11の問題です。
なんと、IE11だとスクロールした際に『ちらつき』が生じるということです。

sidenavの追尾では問題ないのに、header追尾のみ『ちらつき』が出てしまう現象が起きてしまって、いろいろ試みましたが、header追尾は『fixed』での対応にしようと決めました。

ただ、ここでも問題が発生!!

ある程度、cssを理解している人はすでに気づいているかとは思いますが、『fixed』を使用するということは、固定されるということになります。

つまり、windowを縮めた際に横スクロールでの対応ができないということになります。

対処法を見つけることはできたのですが、cssだけでの対応はできずjsでの対応をせざる負えなかったということでした。

こちらの対処法は、後ほど改めて紹介いたします。

せっかくですので、『sticky』と『fixed』の実装方法をお伝えしたいと思います。

stickyで実装した際は、、、

初めに『sticky』を使っての実装を試みました。
cssのプロパティで、ここ最近見かけることが多くなってきているものです。

この『sticky』はとても便利で、jsを使わずにコンテンツ内の追尾実装をやってくれる頼もしいプロパティです。

下記に、サンプルを表示させてますのでもし、stickyを知らない方は参考にどうぞ!

See the Pen
header追尾
by Tommy-Box (@Tommy-box)
on CodePen.

stickyの実装をする際のポイントとしては、topに値を入れないといけないということです。

上記のソースでは、
『 top: 0;』という値を入れております。

そうすることで、header要素の一番上にスクロールが来た時点で追尾が開始されるということになり、結果header要素は、常に追尾されることになります。

今まで、jsで書いていたことをstickyを使うだけで、実装できるようになったことはとてもありがたいですね。

シンプルに、楽になった!

fixedで実装した際は、、、

『fixed』を使った方法は、大抵の方は実装されたことあるかと思いますが、軽く紹介させていただきます。

See the Pen fixed jsなし by Tommy-Box (@Tommy-box) on CodePen.

まず上記のソースは、jsなしの状態です。
横スクロールしてもheaderエリアは固定のままなのでスクロールしない状態になっております。

ここから、今回の記事も本題に入りますが、下記のjsコードを入れてみて下さい。
*こちらはjQueryでの対応です。

$(window).on("scroll", function(){
     $("#fixed").css("left", -$(window).scrollLeft());
});

leftの値を取得してリアルタイムで代入してくれるので、スクロールが効くようになりました。

jsを入れたサンプルも一応、載せておきます。

See the Pen fixed jsあり by Tommy-Box (@Tommy-box) on CodePen.

これで、今回実装したかったものができるようになりました。

まとめ

IE11以下を、業界全体で破棄していただけたらと常々思う今日この頃。
といっても、まだまだ対応しないと行けないので仲良く付き合っていくしかないなっと思ってます。

ただ、なぜ『ちらつき』が出ているのかが不明なところが気がかりですが。
今は、いいとしております。

おまけでは無いですが、jQeryを使いたくない人向けに、jsのみで書いたソースも載せておきます。
参考にどうぞ!

const header = document.querySelector("#fixed");
    window.addEventListener('scroll', HeaderScroll, false);

    function HeaderScroll() {
        header.style.left = -window.scrollX + "px";
}

脱jQeryの方向けですね!

]]>
https://sitommy.com/javascript/2115/feed/ 0
gitignoreの書き方【あるある】除外設定したのに反映されない時の解決法 https://sitommy.com/git/2068/ https://sitommy.com/git/2068/#respond Mon, 16 Sep 2019 14:37:32 +0000 https://sitommy.com/?p=2068 どうも、Tommy(@SitommyBlog)です。

今回は、gitignoreの設定方法と、除外設定したのにも関わらず反映されないときの解決法をお伝えしていきます。

設定方法については、私自身が設定している方法になります。
いろいろ書き方はあるかと思いますが、ご了承いただければと思います。

gitignoreの設定方法

初めに、『gitignore = ギットイグノワァー』と言います。
大半の方は、理解しているかと思いますが一応説明させていただきました。

たからくん たからくん

gitignoreって何?!

じぃじ じぃじ

gitignoreとは、Gitリポジトリ(Git管理)上で、意図的に追跡対象から外すためのファイルを設定するものなんじゃ!

全てのファイルをGitの追跡対象にしてしまうと、制作時にトラブルが起きてしまうケースがあります。

その為に、gitignoreファイルを設定する必要があります。

コメントアウトする場合

# コメントアウトです。

特定の拡張子を無視する場合

# 拡張子がhtmlとなっている全てが無視される
*.html

# aboutフォルダー内の拡張子がhtmlとなっているものが無視される
about/*.html

特定のファイルを無視する場合

about.html

特定のディレクトリーを無視する場合

 末尾に「/」をつける
about/

git管理対象にする場合

# 最初に「!」をつける
!about.html

ルート設定も可能

# 最初に「/」をつける
/about/

上記のルート設定は、『gitignoreファイル』が置かれている場所とします。

gitignoreに除外設定したのに反映されない解決法

たからくん たからくん

どうして、設定したのに反映されないの?!

じぃじ じぃじ

それはじゃな!
一度Gitにアップしてしまったものを、追加でgitignoreに記述をしてもキャッシュにインデックスが残っている為、反映されないという原因なんじゃよ。

キャッシュを切るコマンドはこちらです。

$ git rm --cached `git ls-files --full-name -i --exclude-from=.gitignore`

コマンドを打ち問題なくgitignoreに設定したファイル等が無視できていれば成功です。

ただ、稀にエラーが表示されるケースがあります。
その原因も説明しておきます。

その原因としては、(Macの場合になってしましますが)『High Sierra』から『Mojave』にアップデートした際に『Xcord』が消えてしまう現象があるらしいです。

なので、今一度『Xcord』をインストールしておきましょう。

インストールできたら、改めて上記のコマンドを叩いてください。

まとめ

私も実際、gitignoreの反映されないと嘆いていた際にたくさん調べましたが、コマンドの記述や原因は説明されているサイトはありましたが、その通りにやってもエラーが出てキャッシュが切れないという現象に陥っておりました。

そのエラーコードをまるまる検索かけた際に『Xcord』をインストールしてくださいっと出ていることに気づきました。

もし、検索してその通りにそってやっていても、人それぞれ環境が違うためエラーが出る方もいるかと思います。

その際は、エラーコードをそのまま検索にかけてみたり、英訳にかけてみたりしてもいいかと思います。

]]>
https://sitommy.com/git/2068/feed/ 0
Google AdSenseに20回近く不合格!ブログを初めて約8ヶ月にしてやっと合格!! https://sitommy.com/web/1910/ https://sitommy.com/web/1910/#respond Mon, 26 Aug 2019 11:15:21 +0000 https://sitommy.com/?p=1910 どうも、Tommy(@SitommyBlog)です。

本日は、みなさまにご報告したく記事にしました。
ブログを初めて約8ヶ月にしてやっとGoogle AdSenseに合格しました。

計20回近く申請をしましたが、待ちに待った合格通知!
合格までの過程をお伝えしようと思います。

今現在、合格するために頑張っている方に少しでも力になればと思います。

合格までのストーリー

2019年1月、ブログサイト制作に入りました。
私の場合、仕事がら『WordPress』での制作をしました。

もちろん、ブログサービスを使っているからと合格をしないわけではないので安心してください。

たから たから

よく耳にするけど、WordPressサイトの方が合格しやすいってホント??

じぃじ じぃじ

そんなことはないぞ! 安心してブログサービスも使ってえーぞ!

2月に入り、やっとブログ開設をし2月末にGoogle AdSenseに初申請!

その時は、全8記事ほど書いて申請しました。
カテゴリー分けも4つほどしてました。

申請してから約2週間ほどしても、いっこうに連絡がありませんでした。
とても不安を感じていた事を覚えております。

申請を出したことを、改めてGoogle AdSenseに報告をしたら、翌日にメールが来ました。
不合格。

内容は、
『価値の低い広告枠(コンテンツが複製されているサイト)について』とされました。

正直、一発で合格できるとは思っていなかったのですが、「複製?」にとまどいはありました。

記事をコピペなどしていないのになぜ?
と、はじめ思っていたのですがいろいろ調べていくと理解出来ました。
同じような記事がたくさんあるため、価値の低いっと言われているのだと。

3月からも、記事を増やしては申請を繰り返しましたが結果は、
不合格。

さすがに、一人では解決できそうにないため、AdSenseヘルプフォームに問い合わせしてみました。
いろいろコメントやサイト全体の指摘などもいただけてとても参考になりました。

上記の修正等もこなしてから、申請するも翌日、
不合格。

また、AdSenseの記事を丁寧にかかれていた『ふくろぐ』というブログサイトを発見しました。

ブログの管理者:高木とおる様に、すがるよう思いでお問い合わせフォームからご連絡させていただきました。
とても丁寧に相談に乗っていただきました。

教えていただいてから、何度も申請を出しては『不合格』の繰り返しで、正直6月申請を出して『不合格』がきた時点でメンタルをやられました。

何をしても、不合格の理由は、最初と同じで『価値の低い広告枠(コンテンツが複製されているサイト)について』で諦めようかなっと思い始めました。

なので、7月は申請も出さず、記事も1記事しかかけない状態でした。

そんな中、8月16日にふとAdSenseのことを思い出し、1ヶ月何も更新してないけどダメ元で申請した結果翌日、
『合格』!!

正直、理由がわかりません。
ただ、『やれることは全てやったのなら後は、申請し続ける勇気だ』という言葉を、目にして申請をした。
っというのが真実です。

現在、頑張って合格したいと思っている方に対してこれといったことが言えませんが、私の合格までのストーリーはこうして合格に至りました。

私が取った行動・作業とは?

上記の話でも、お話した内容もありますが少しでも詳しくお伝えしたいと思います。

また、『ホワイトハットSEO』に基づいたサイト作りを前提にしていただければと思います。

最初は6〜8記事くらい書いて申請

まず、いろいろ調べたら数記事書いて申請だしたら合格したっと言っている方も見受けられ6〜8記事くらい書いたらとりあえずいいかなっと思い申請しました。

ブログのコンセプトがもっとも重要になってくるかと思いますが、私のようなブログのコンセプトは、いわばプログラミングについての記事がメインです。

やはり、ライバルも多いため、同じ内容になってしまいがちな記事が多いと不合格になりやすいと思います。

申請を出して返答が遅い場合は問い合わせる

私の場合、最初に申請した後、約2週間ほど経っても連絡がありませんでした。
その場合は、こちらから「申請出したので確認お願いします。」と問い合わせした方がいいですよ。
時間がもったいないので。

AdSense 審査状況確認フォームから出来ます。

アイキャッチ画像以外の画像を削除

記事内に入っている画像に関して、全て削除しました。
フリー素材で商用ありの画像も含めて削除しました。

ただ、ここで問題が一つ。
画像がないと、うまく記事をかけないことに気づきました。

特に、プログラミングについて説明する際に画像があるのと、ないのとではクオリティーが明白です。
また、画像がないと説明する文字量も多くなるため読者からしても見にくいものになると判断。

なので、記事に必要な画像に関しては『OK』としました。

カテゴリーを狭める

初めカテゴリー分けを、このようにしてました。

  • デザイン
  • HTML
  • CSS
  • JavaScript
  • Web制作について
  • ブログ

このように、6つもカテゴリーを分けていましたが、それぞれ記事数は1〜2記事くらいでトータル8記事っとなってました。

カテゴリーを分けるのであれば、カテゴリーごとに記事は3〜6記事程度が無難だと知り、合格するまでカテゴリーを狭めることにしました。

トータルも重要ですが、カテゴリー自体の記事数も気をつけるようにしました。

コピーチェッカーで全記事をチェック

コピーチェッカーというものがあります。
これは、コピーされた文字なのかどうかをチェックしてくれるツールです。

私が使っているツールですので、よかったら使ってみてはいかがでしょう。

私は、全ての記事が緑色に変わるまで修正・変更しました。

最低1,500字以上の記事にすること

どの記事に対しても、必ず1,500字以上に修正をしました。
どうしても、増えない場合は2つの記事を合わせるようにすればいいかもしれません。

とにかく、文字数を意識すること。

アフィリエイトリンクを全て削除

一部、アフィリエイトリンクを載せている記事がありました。
そういったリンク部分は全て削除しました。

合格するまでは、一旦お預けということになります。

記事タイトルに検索キーワードを入れる

関連キーワードを意識してタイトルを作成していませんでした。

こちらも、キーワードツールを使って意識するように全ての記事タイトルを作り変えました。

私が使っているツールですので、よかったら使ってみてはいかがでしょう。

また、タイトルの初めに同じキーワードを入れているものが多く見受けられたので、なるべく同じ位置で同じキーワードは入れないようにしました。

そして、一番検索されたいキーワードを左に持ってくるように意識をしました。
毎回そういているわけではないですが、なるべく持ってくるようにするとタイトルも付けやすくなりました。

検索需要が少ないネタではなく、多いネタを書くことも重要

私の場合、プログラミングの中級者向けのコードの記事も書いておりました。

もちろん、検索需要が多いネタを書くということは、それほどライバルも多いということです。
それでも、検索需要が多いネタを書くことで検索される率は高くなるので、AdSense審査にとっては好都合。

コアなネタも、一般のネタもどちらも重要ということです。

記事内に同じようなワードが乱用してしまった

HTMLやXHTMLなど、説明でとても必要なのですが記事内に同じワードが多くなっている記事は、非公開にして待機させました。

文章の修正等も心がけましたが、それでも乱用と判断されるのを恐れたので、一層のこと非公開としたほうが無難と考えました。

文字の改行を意識する

記事全体に改行が少ないと、文字の固まりが多くなって見にくいので、ユーザビリティーをアップするようにしました。

3文書いたら改行する。と基本的に決めております。

どれか一つのカテゴリー記事に対して毎日記事を書く

カテゴリー分けをしている分、まとまって同じカテゴリーの記事をアップすることがあまりなかったです。

「昨日がデザインのことを書いたので、今日は別なことを書こう」というふうに、投稿していたのですが、一度どこかのカテゴリーを絞って10記事ほど書くことにしました。

私の場合は、『WordPress』について、毎日投稿しました。

ここでポイントなのが、毎日投稿しているようにしているということです。
実際に毎日投稿しなくてもいいです。

申請を出すその日合わせて連続で投稿しているように設定するということです。
つまり、まとめて記事を書ける人は、予約投稿や日付を調整し毎日投稿しているように設定をしましょう。

まとめてかけない場合は、10記事ほど記事が溜まったら出すようにする。

私は10記事書くまで溜めてから連続投稿という形をとりしました。

合格してみて、感じたこと

一番感じたことは、メンター的な存在が大きかったと思います。

いろいろ調べて試行錯誤することっていうのは、皆さん当たり前にしていることだと思っています。
それすらせずに、「申請して不合格になります。」と言われても当たり前ですよね。

私も上記のようにこれでもかっと思うほどに試行錯誤してきました。
ただ、メンタルがどうしても弱ってきます。

そんなとき、AdSenseの記事を丁寧に書いてくれていた高木様に問い合わせをさせていただきました。
『ふくろぐ』というブログサイトですので、是非確認してみてください。

本当に丁寧にメールでやり取りをしていただきました。
突然の連絡にもかかわらず。

私が、お問い合わせをさせていただいたのが『4月』のことでした。

そこから何度もやり取りを交わしていただき、一緒に試行錯誤をしてくれました。

それから、約4ヶ月後にやっと『合格』が出来ました。

最後に、WordPressの記事を10記事書いてそれを毎日投稿させてから申請を送り、その結果、
不合格となった時は、流石に心が折れました。

このブログはAdSenseがもらえないブログなんだと切り替えようとも思いました。

また、今まで合格するためにAdSense用に記事を書いていた部分もあるので、自分が書きたいような記事をかけていない歯がゆさもあったので、もう好きな記事を書こうと思っていました。

ただ、ショックが大きすぎて7月8月と全く記事をかけなかったです。

そんなとき、ふと高木様のことを思い出し私のブログのことなのに一緒に試行錯誤していただいたのにも関わらず、諦める報告メールすらしていないことに気が付きました。

本当に申し訳ない気持ちでした。

7月8月と何も投稿せず、不合格と言われたままのサイト状態でしたが、高木様に最後のメールを送る前に、『申請してみよう』と思い8月中旬に申請を出しました。

その返答が帰ってきてからメールを送るつもりで待っていたのです。

そして、その日が訪れます。
そう、合格通知きた日。

それは、とても大変な1日でした。
18時くらい、嫁と子供と私の実家に向かっている時、悲鳴が上がり振り返ると嫁が
『蜂に刺されていました。』

すごく痛そうで、腕がだんだん腫れ上がって来るのがわかるくらいでした。
ただ、土曜日の18時。
周りの病院はすでにしまっている。

救急サポートに問い合わせして空いている病院や、処置できる病院を探すがなかなか見つからない状況に、とある所からメールが届く。

私自身、自身のスマホで病院を探したり電話したりしていたので、メールが届いたことにすぐに気づきました。
確認すると、
『おめでとう!』と。

いやいやいや!
私の感情は、複雑な感情で取り乱します。

とりあえず、心を落ち着かせ嫁ファーストに考え、処置してくれる病院も見つかり車で向かい無事処置してもらえることが出来ほっとしました。

ここまで、AdSenseさんは空気が読めない者かと思った日でしたね。

なぜ、合格できたのかは正確にはわかりませんが、諦めなかったことが良かったなっと本当に思います。

相談に乗ってもらえる方がいなかったら、最後に申請しようとも思わなかったので。

今頑張って記事を書いている方々に言いたいことは、
『誰も正確にAdSenseの合格方法はわからないということです。』

この人がこういうことで合格したからといって、同じようにあなたが合格できる保証なんてどこにもありません。

ただ、合格者皆さんに共通するものがたった1つだけあります。
それは、

『合格するまで諦めない』

これだけが共通していることです。

試行錯誤して、何をしても不合格になる人もいると思います。
私もそうだと思っていたから。

でも、それでも諦めず申請をし続けてください!
必ず、合格します。

また、私と同様にいろいろな人に相談することが諦めない方法の1つだと思います。
是非、やってみてください。

私で良ければ、お問い合わせから連絡いただければ頑張って手助けをしたいと思っています!

以上が、
私が約8ヶ月のブログサイト生活でGoogle AdSenseに20回近く不合格したが、それでも諦めずに合格できたストーリーでした。

少しでも、この記事が誰かの助けになればと思っております。

]]>
https://sitommy.com/web/1910/feed/ 0
IE9以前の場合でもHTML5・CSS3で対応させる裏技!おまじないを伝授! https://sitommy.com/html/1856/ https://sitommy.com/html/1856/#respond Mon, 01 Jul 2019 12:21:33 +0000 https://sitommy.com/?p=1856 どうも、Tommy(@SitommyBlog)です。

今回は、『IE9以下』に対してHTML5・CSS3の記述のまま対応させる裏技、おまじない的なものを紹介したいと思います。

IEはサポートが切れるため今後、必要にならなくなる可能性はありますがそれでも知っておいて損はしませんし、コピペで使用可能なためサイトに組み込んで上げると親切かと思います。

IE9以前のものでは。

タイトル通り、IE9以前のものではHTML5で新しく追加されたタグ集が効きません。
そのため、レイアウトが大きく崩れる原因になります。

崩れを恐れて、HTML5で新しく追加したタグを使わないのは決して良くないです。

また、レスポンシブに関してCSS3のメディアクエリも対応していません。

最近では、案件の要件定義にIE10以前は対応しないとするケースが多くなってきていますが、それでもたまにIE9なども許容範囲に入れたいクライアントもおります。

今後は確実に、IEは要件定義に入ってこなくなりますが、上記のような悩みを解決してくれるのが、今回紹介する裏技・おまじないというわけです。

裏技!おまじない!

とても簡単です!

『head終了タグ』の直前に、下記のコードを貼り付けましょう。

<!-- IE9 以下の場合 -->
<!-- [if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

これだけで、IE9以前で見ている方は、jsで書き換えてくれます。
上記2つのjsを説明すると。

『html5shiv.min.js』は、HTML5から追加されたタグをIE9以前のブラウザに対応出来るタグに書き換えてくれるjsです。

『respond.min.js』は、CSS3のメディアクエリに対応していないブラウザを擬似的にメディアクエリ対応をしてくれるjsです。

それぞれ、CDNで読み込んでいるためファイルを置くこともせずに実行できますので、とても簡単です。

まとめ

先程から幾度となく言っておりますが、IEはすでにサポートを終了しております。

そのため、今後は要件定義にも入って来なくなるでしょう。
われわれエンジニアからしてみれば、「やっとか!!」という思いです。

IEに苦しめられたエンジニアは数多くいるのではないでしょうか。私もその1人です。

今後は、IEに変わりEdgeとしてマイクロソフトは開発していきます。
しかも、2019年から『Google Chrome』と同じ『Chromium』ベースで開発されます。

これは、かなりエンジニアとして作業が楽になってきます。楽しみで仕方がないですね!

今回の裏技・おまじないは、今後使わなくなるかと思いますが知識として知っていれば過去のデータ修正依頼等にも対応出来ます。

]]>
https://sitommy.com/html/1856/feed/ 0
CSSでYouTube動画埋め込み時、固定比設定にする方法!【アスペクト比】 https://sitommy.com/css/1839/ https://sitommy.com/css/1839/#respond Wed, 12 Jun 2019 03:30:23 +0000 https://sitommy.com/?p=1839 どうも、Tommy(@SitommyBlog)です。

今回はですね、よくサイトなどにYouTube動画を埋め込むときでレスポンシブ対応にしたことがあるかと思います。

比率を保ったままレスポンシブ対応をするためのCSSを紹介していきたいと思います。

埋め込みコードを取得

そもそもYouTube動画を埋め込む方法を知らない方に軽く紹介していきます。

YouTube画面の右下あたりにGoodボタンBadボタンがあるかと思います。
その隣の欄から埋め込みコードを取得できます。

『共有 → 埋め込む』と選択してください。
すると、

こちらをコピペして、HTML上に貼り付ければ完了となります。
YouTube埋め込み時の設定もそれなりにありますが、ここでは紹介しませんのでご了承ください。

じぃじ じぃじ

コントロールバーなどの非表示なども設定出来るぞ!

CSSでアスペクト比を設定する

<div class="video">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/動画パス" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

埋め込みコードを新しくタグで囲みましょう。ここでは、クラス名を『video』としました。

.video{
height: 0;
overflow: hidden;
padding-bottom: calc(315 / 560 * 100%);
position: relative;
}
.video iframe{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}

『padding-bottom』は、『padding-top』として設定しても問題ないです。

また、『calc(315 / 560 * 100%)』この計算式は、『iframe』『高さ ÷ 幅 × 100%』の計算式です。

つまり、計算すると『56.25%』になるので、そのまま数値を入れても問題ないです。

.video{
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
}

動画に関しては、比率を維持することがとても重要なケースがありますので、『56.25% = 16:9』の比率になると思っていていいと思います。

じぃじ じぃじ

例えば、4:3の比率にしたい場合は『75%』と指定すると出来るぞ!

たから たから

9/16 × 100 = 56.25
3/4 × 100 = 75
ってことだね!

まとめ

最近では、Webサイトにyoutube動画を埋め込むケースが多くなっていますので、この方法を覚えておくと重宝します。

動画は、比率を保っていないと黒い縁がでてしまうのでレスポンシブ対応時は気をつけましょう。

また埋め込みで、Google Mapもよく使いますが、こちらに関して任意でサイズを決めますので特に必要はないかなっと思いますが、比率で問題がでた際は同じように設定すればいいでしょう。

]]>
https://sitommy.com/css/1839/feed/ 0
検索フォーム・検索結果ページの設定方法【プラグインなし】【WordPress】 https://sitommy.com/wordpress/1822/ https://sitommy.com/wordpress/1822/#respond Tue, 11 Jun 2019 11:58:26 +0000 https://sitommy.com/?p=1822 どうも、Tommy(@SitommyBlog)です。

今回は、ブログサイトにも必要な検索フォームや検索結果ページの設定方法を紹介したいと思います。

私自身が検索フォームで必要な機能の設定の紹介にはなってしまいますがご了承ください。
まず必要だと感じていることは、

  • 何も記入しないで検索した場合は、TOPページにリダイレクトする
  • 投稿ページのみに検索されるようにする

これを踏まえて、設定をしていきます。
とても簡単ですので、是非参考にしてみて下さい。

functions.phpに設定する

まず、投稿ページのみ検索されるように設定を行います。

function my_posy_search($search) {
if(is_search()) {
$search .= " AND post_type = 'post'";
}
return $search;
}
add_filter('posts_search', 'my_posy_search');

そして、何も記入せずに検索をすると、TOPページにリダイレクトされる設定をします。

function empty_search_redirect( $wp_query ) {
if ( $wp_query->is_main_query() && $wp_query->is_search && ! $wp_query->is_admin ) {
$s = $wp_query->get( 's' );
$s = trim( $s );
if ( empty( $s ) ) {
wp_safe_redirect( home_url('/') );
exit;
}
}
}
add_action( 'parse_query', 'empty_search_redirect' );

search.phpに検索結果ページの設定をする

まず、ページの頭に設定を記述します。

<?php
    global $wp_query;
    $total_results = $wp_query->found_posts;
    $search_query = get_search_query();
?>

これで、先程『functions.php』で設定したとおりの検索をしてくれるようになります。

続いて、設定したいのは『〇〇の検索結果(△△件)』と表記させたい場合。

<h2><span><?php echo $search_query; ?>の検索結果(<?php echo $total_results; ?>件)</span></h2>
たから たから

検索ページには、必ずあるよね!

search.phpに検索結果を表記しましょう

検索して見つかった場合と見つからなかった場合、それぞれの条件分岐を記述しましょう。

ここでは、『ulタグ』を使ったリストでの条件分岐で紹介します。

<?php if(have_posts()) : ?>
<ul class="mainArea-list">
<?php while(have_posts()):the_post() ?>
    <li>
        <div class="imgArea">
            <a href="<?php the_permalink(); ?>">
                <?php the_post_thumbnail('post-thumbnails', array('width' => '100%', 'alt' => the_title_attribute('echo=0'))); ?>
            </a>
        </div>
        <div class="textArea">
            <span class="m-category">
                <?php $arr = get_the_tags(); foreach ( $arr as $tag ) { echo '<a href="' .$homeurl. '/archives/tag/' .$tag->slug. '" class="m-' .$tag->slug. '">' .$tag->name. '</a>'; } ?>
            </span>
            <time><?php the_time( get_option( 'date_format' ) ); ?></time>
            <h3 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
            <p class="lead"><?php echo get_the_excerpt(); ?></p>
        </div>
    </li>
<?php endwhile; ?>
</ul>
<?php else: ?>
    <div class="post">
        <p>申し訳ございません。<br>該当する記事がございません。</p>
    </div>
<?php endif;?>

こんな感じになるかと思います。
ここでアイキャッチ画像の取得設定などもソースコードに記述していますが、こちらはwidth100%設定で取得方法の書き方になります。

じぃじ じぃじ

詳しく知りたい場合は下記からチェックしてみると良いぞ!

上記の設定により、検索結果で見つからなかった場合、
『申し訳ございません。該当する記事がございません。』
表示されれば成功です。

まとめ

プラグインなしでも、簡単に設定ができますのでチャレンジしてみてはいかがでしょうか。

私自身も、始めなかなかうまく行かなかったのですがいろいろ検索して試行錯誤してこの記述に収まりました。

コピペで設定可能かと思います。誰かの参考になってくれれば幸いです。

]]>
https://sitommy.com/wordpress/1822/feed/ 0
アイキャッチ画像取得の方法!【フルサイズ(width100%)設定が可能な方法】【WordPress】 https://sitommy.com/wordpress/1808/ https://sitommy.com/wordpress/1808/#respond Thu, 06 Jun 2019 11:31:42 +0000 https://sitommy.com/?p=1808 どうも、Tommy(@SitommyBlog)です。

今回は、WordPressでアイキャッチを取得する方法について紹介していきたいと思います。

また、フルサイズでの取得方法について、なかなか調べても出てこなかったので参考に出来るかと思っています。

アイキャッチ画像を有効にする

まず始めに、アイキャッチ画像を有効にしないとそもそも使えないのでその設定をしましょう。

add_theme_support('post-thumbnails');

『functions.php』に設定を書きます。
アイキャッチ画像の機能を利用することで記事の新規追加や編集画面にアイキャッチ画像設定が追加されますので、もし編集画面にない場合はこの設定をしましょう。

アイキャッチ画像サイズの設定

デフォルトサイズの設定と、各それぞれ使うサイズを設定できます。
この場合、widthやheightは設定されるのでその大きさに切り向きかリサイズされます。

// アイキャッチ画像サイズ設定
set_post_thumbnail_size(90, 90 ,true);

// サイドバー用画像サイズ設定
add_image_size('small_thumbnail', 61, 61, true);

// アーカイブ用画像サイズ設定
add_image_size('large_thumbnail', 120, 120, true);

// サブページヘッダー用画像サイズ設定
add_image_size('category_image', 658, 113, true);

『ture』に設定すると、切り抜きで表示されます。『false』にすると、リサイズされます。

『add_image_size()』で、各シーンで利用する可能性のある画像サイズを追加できます。

横幅設定100%での取得方法

WordPressのサイト制作していると上記のように、アイキャッチ画像をいろいろ設置することがあります。
このブログサイトも同様にTOPページの記事一覧エリア、スライドで記事を表示するエリア、サイドナビのランキングエリア、関連記事エリアなどたくさんあります。

上記で紹介したように、各それぞれの画像サイズに設定をしておき、そのエリアのアイキャッチ画像を設置するときに設定した引数を記述するといった方法が一般的ですが私はめんどくさいと思っています。

また、切り抜き設定にしてしまうと画像が予期せぬ場所で切り取られるので見栄え的にも良くないですよね。

同じ記述で、全てが横幅100%で表示させることで使い分ける必要がないと考えました。

基本的に、アイキャッチ画像を取得すると『width』『height』が設定されるのでレスポンシブフルリキッドデザインに対応することができないです。

そのため、『width』は100%に設定し、『height』は設定しないというように取得したい。

そうすることで、アイキャッチ画像の比率を保ったまま可変することができます。是非参考にしてみてください。

まずアイキャッチ画像を貼り付け時の『width』『height』の自動挿入タグを削除させます。

add_filter( 'image_send_to_editor', 'remove_image_attribute', 10 );
add_filter( 'post_thumbnail_html', 'remove_image_attribute', 10 );
function remove_image_attribute( $html ){
$html = preg_replace( '/(width|height)="\d*"\s/', '', $html );
$html = preg_replace( '/class=[\'"]([^\'"]+)[\'"]/i', '', $html );
return $html;
}

そして、アイキャッチ画像を入れたいソースに、

<?php the_post_thumbnail('post-thumbnails', array('width' => '100%', 'alt' => the_title_attribute('echo=0'))); ?>

これだけで横幅100%のアイキャッチ画像を取得出来るようになります。

『alt』には、記事のタイトルが入るように設定しています。

まとめ

私自身、画像に対してwidth設定やheight設定をするのが嫌なタイプでなんとかアイキャッチ画像にも100%設定ができないかと試行錯誤してました。

自らコードを書く人じゃないとこの気持はわからないかと思いますが、同じ気持ちの人がいれば参考にしてもらえればと思います。

]]>
https://sitommy.com/wordpress/1808/feed/ 0
アイコンをSVGで表示する際、imgタグで出力時のカラー変更の方法 https://sitommy.com/html/1793/ https://sitommy.com/html/1793/#respond Mon, 03 Jun 2019 05:28:06 +0000 https://sitommy.com/?p=1793 どうも、Tommy(@SitommyBlog)です。

アイコンをSVGで出力する際に、色を変更したいですよね。
ただSVGの場合いろいろな出力のやり方がありますが、『imgタグ』で出力方法だと基本的にはcssで色を変更できません。

私も、いろいろ調べたのですがあまり検索に出てこなかったので記事にしておこうと思います。

SVGの出力方法

今回は、imgタグで出力させる方法について紹介していきます。

基本的にSVGのアイコンは、ネットからダウンロードしてくるかIllustratorから書き出して使います。

この方法だと、普段扱っている『jpg・png・gif』の画像を表示させる時と同じように『SVG』もブラウザに表示することができます。

<img src="images/test-svg.svg" alt="">

画像として表示させるよりも、SVGの方が格段に軽くなります。
また、ベクター画像なので拡大縮小に強い点でもメリットがあります。

imgタグでSVGの色を変更する方法

普通のSVGを出力するっとなると、長いコードを記述する方法だと思います。
この方法だと、cssで色を変更出来るため使い勝手が良いです。

ただ、コードが長くなるためちょっとしたアイコン向けではないのかなっと個人的には思います。

imgタグで出力した際になんとか色を変更できないか、いろいろ調べた結果『deSVG.js』を使えば、cssで色を変更出来ることがわかりました。

まず、下記のコードをコピペしてファイルを作成して下さい。
こちらが、『deSVG.js』です。

(function() {
"use strict";

var desvg = function(selector, removeInlineCss) {
removeInlineCss = removeInlineCss || false;

var images,
imagesLength,
sortImages = {},

// load svg file
loadSvg = function (imgURL, replaceImages) {
// set up the AJAX request
var xhr = new XMLHttpRequest();
xhr.open('GET', imgURL, true);

xhr.onload = function() {
var xml,
svg,
paths,
replaceImagesLength;

// get the response in XML format
xml = xhr.responseXML;
replaceImagesLength = replaceImages.length;

// bail if no XML
if (!xml) {
return;
}

// this will be the <svg />
svg = xml.documentElement;

// get all the SVG paths
paths = svg.querySelectorAll('path');

if (removeInlineCss) {
// if `removeInlineCss` is true then remove the style attributes from the SVG paths
for (var i = 0; i < paths.length; i++) {
paths[i].removeAttribute('style');
}
}
svg.removeAttribute('xmlns:a');

while(replaceImagesLength--) {
replaceImgWithSvg(replaceImages[replaceImagesLength], svg.cloneNode(true));
}
};

xhr.send();
},

// replace the original <img /> with the new <svg />
replaceImgWithSvg = function (img, svg) {
var imgID = img.id,
imgClasses = img.getAttribute('class');

if (imgID) {
// re-assign the ID attribute from the <img />
svg.id = imgID;
}

if (imgClasses) {
// re-assign the class attribute from the <img />
svg.setAttribute('class', imgClasses + ' replaced-svg');
}

img.parentNode.replaceChild(svg, img);
};

// grab all the elements from the document matching the passed in selector
images = document.querySelectorAll(selector);
imagesLength = images.length;

// sort images array by image url
while (imagesLength--) {
var _img = images[imagesLength],
_imgURL;

if (_img.getAttribute('data-src')) {
_imgURL = _img.getAttribute('data-src')
} else {
_imgURL = _img.getAttribute('src')
}

if (sortImages[_imgURL]) {
sortImages[_imgURL].push(_img);
} else {
sortImages[_imgURL] = [_img];
}
}

// loops over the matched urls
for (var key in sortImages) {
if (sortImages.hasOwnProperty(key)) {
loadSvg(key, sortImages[key]);
}
}

};

window.deSVG = desvg;
})();

また、このjsを動かすために、

$(function(){
deSVG('クラス名',true);
});

SVGの色を変更したいimgタグに対して『クラス』をつけましょう。

<img class="svg_img" src="images/test-svg.svg" alt="">
$(function(){
deSVG('.svg_img',true);
});
.svg_img path{
  color: #f00;
  fill: currentColor;
}

『css』では、クラス名のあとに『path』というタグに色変更の指定をしております。

以上で、imgタグでSVGを表示させたものの色を変更させるときのやり方です。

ブラウザなどで、ページの検証をすればわかるのですが、『deSVG.js』でimgタグに入れたSVGからSVGの生コードに変換されてます。

そのため、cssで色の変更が出来るようになったということです。
つまり、色を変更させたいということは自らSVGの生コードを書いておくのか、jsで書き換えさせるのかどちらかということです。

できれば、自らSVGの生コード書いておいたほうが余分なファイルを用意する必要がないため良いとは思いますが、これに関しては好き嫌いがあるかなっと思いました。

まとめ

以外に知られていない、imgタグでSVGを出力した際にCSSで色の変更をするための方法について紹介しました。

SVGは、デメリットがほぼない素晴らしいものです。あるとしたら、出力の仕方が少し癖があるので扱いにくいという点だけだと思います。

今まで画像として表示していたアイコンやテキスト画像を、SVGに変えるだけでかなりのデータ量が軽くなります。

またSVGアニメーションも出来ると、エンジニアとして幅がグッと広くなりますので、頑張ってみてはいかがでしょうか。

]]>
https://sitommy.com/html/1793/feed/ 0
MW WP Formでお問い合わせフォームを作成!【おすすめプラグイン】 https://sitommy.com/wordpress/1713/ https://sitommy.com/wordpress/1713/#respond Fri, 31 May 2019 04:06:03 +0000 https://sitommy.com/?p=1713 どうも、Tommy(@SitommyBlog)です。

今回は、『お問い合わせプラグイン』について紹介していこうと思います。

有名どころで言うと『Contact Form 7』と『MW WP Form』かなっと思います。

私のおすすめしているのが『MW WP Form』なのでコチラを設定方法等を紹介していきたいと思います。

MW WP Formについて

お問い合わせフォームを作成出来るWordPressのプラグインです。

使い方は非常に簡単なのでとても扱いやすいですし、日本のWebサイトは必ずと言っていいほど『確認ページ』というものが存在します。

それにも対応しているので、お問い合わせプラグインを使うとしたらこちらを重宝しております。
下記におすすめ項目を6個紹介しておきます。

ショートコードで簡単に作成出来る

固定ページに、ショートコードをコピペするだけでフォームが完成します。

しかも、自由にHTMLを入力出来るため多少言語が扱える人は自由にデザインをすることもできます。

URL設定も自由

フォームといえば、『入力ページ・確認ページ・完了ページ』そして、『エラー画面表示ページ』を別で作りたい場合も対応可能。

別のURLで遷移させても、同じURLで遷移させてもどちらでも設定可能です。

バリデーションの豊富さ

バリデーションもワンタッチで設定可能で、項目も多く用意されています。

確認画面を設定出来る

先程も述べましたが、確認画面ページを作成出来ることです。
また、確認画面なしバージョンも設定可能です。

データベースの管理が簡単

お問い合わせのデータというのは、データベースに保存することができます。(しない設定もできます。)

データベースに保存したデータをWordPress管理画面から簡単に確認もでき、CSV形式でダウンロードも出来ます。

グラフ表示も出来る

データベースに保存したデータ(アンケートフォームで収集したものなど)をグラフ表示ができ、傾向分析などにとても便利です。

たからくん たからくん

簡単に設定できるのは専門知識がない人にとって助かるもんね!

MW WP Formの使い方

ここからは、使い方を紹介していきます。

インストールする

『ダッシュボード → プラグイン → 新規追加』からインストールしましょう。

フォーム作成する

まず、インストールし有効化にするとダッシュボードに『MW WP Form』と表示されます。
そこから、新規追加をクリックしましょう。

ここから、フォームを作っていきましょう。
タイトルには、わかりやすく『お問い合わせ』として問題ないです。

上記のように、設定するだけでテキストのフォームが作成できます。
もちろんテキストだけではなく、メールアドレスや電話番号のフォームを簡単に作成できます。

最後には、プルダウンメニューに『確認・送信』というボタンがあるので選択しましょう。

とりあえず、フォームは完成です。次にバリデーションを設定しましょう。

バリデーションを設定する

エディター下の方に『バリデーションルールを追加』ボタンがあります。

『バリデーションを適用する項目』に、先程フォームで設定するときに『name=”〇〇”』に設定した同じ値を設定します。

バリデーション設定02

『必須項目』をチェックすると、記入しないとエラーが出るようになります。必要なものには設定しておきましょう。

完了ページを設定する

完了ページ設定01

上記のエリアに記入すると、そのまま反映されます。
完了ページは、ユーザーが送ったデータが無事送信されたことを告げるページです。

  • 無事送信されたこと
  • 返答がない場合の連絡先
  • 送ったあとの対応方法

これらを告げていると、とても親切だと思います。
*この設定は、完了ページも同じURLとして処理されます。

URLを設定する

URL設定01

管理ページ・完了ページ・エラーページとそれぞれ別のURLで設定をする際に、記入します。
後ほど固定ページにショートコードを設定する方法をお伝えします。そのURLをここにコピペしましょう。

特にページを遷移しなくて良い場合は設定不可です。

自動返信メールを設定する

自動返信メール設定01

エディターの右側に設定があります。
先程、上記でフォーム設定をした際に、それぞれ『name=”〇〇”』を設定しましたよね。

ここでは、その『nameの値』を使います。

自動返信メール設定02

上記には、メールアドレスの値を入れます。なので、今回の場合『mail』を記入します。

自動返信メール設定03

上記には、ユーザー宛に自動返信される際の本文を設定します。

昔は、ユーザーが記入したデータを自動返信メールにも表示させていましたが、近年ではセキュリティーを意識して自動返信メールにはデータを載せないことも多くなって来てます。

もし、設定したい場合は『{}』(半角)を使って行きます。

自動返信メール設定04

このように記載すると、ユーザーが記入したデータをそのまま表示してくれます。

管理側メールを設定する

管理側メール設定01

こちらを設定しておくと、お問い合わせが来た際、管理者宛にメールが届きます。設定しておきましょう。

管理側メール設定02

『送信先』は、受信するメールアドレスを設定しましょう。

固定ページにフォームを設置する

上記全て記載できたら、サイトに反映させるために固定ページとリンクさせる必要があります。

フォーム設定01

『フォーム識別子』がショートコードになります。
コピペして固定ページに貼りましょう。
*ショートコードのkey数字は、毎回違います。

下記に固定ページにショートコードを設定する動画を設置しております。

フォーム設定02

もし、『確認ページ・完了ページ』などを別のURLにしたい場合は、それぞれ固定ページを作成し、上記と同じようにショートコードを貼り付けましょう。

その際、それぞれのURLを『MW WP Form』の管理画面にも貼り付けることを忘れないようにしましょう。

まとめ

いかがだったでしょうか。MW WP Formを使えばお問い合わせフォームに必要なものは全て揃っているので簡単にフォームを作成することができます。

もし、それでもわからない場合は遠慮なくお問い合わせください。

わからない箇所を一緒に解決させていただきます。

]]>
https://sitommy.com/wordpress/1713/feed/ 0
Vue.js開発環境のまとめ!(Mac)【失敗談と成功談】 https://sitommy.com/javascript/1716/ https://sitommy.com/javascript/1716/#respond Sun, 26 May 2019 01:41:35 +0000 https://sitommy.com/?p=1716 どうも、Tommy(@SitommyBlog)です。

Vue.jsを使った開発環境を作成したくいろいろ調べながら取り組みました。
たくさんエラーがありましたが、最終的には無事『Welcome to Your Vue.js App』をブラウザに表示できたので良かったです。

Vue.jsスタート画面

nodebrewのインストール

まず始めに、node.jsを『brew』『nodebrew』を使ってインストールをします。

$ brew install nodebrew

打つと、こういったエラーが返ってきました。

Error: The following directories are not writable by your user:
/usr/local/include
/usr/local/lib

You should change the ownership of these directories to your user.
  sudo chown -R $(whoami) /usr/local/include /usr/local/lib

And make sure that your user has write permission.
  chmod u+w /usr/local/include /usr/local/lib

私は、初っ端つまずきました。

たからくん たからくん

何!?このエラー

じぃじ じぃじ

簡単に説明すると、書き込み権限がないというエラーじゃ。

とりあえず、上記コードのハイライトの部分を一つずつ打ち込み、その後にもう一度インストールコマンドを打ち込みました。

$ sudo chown -R $(whoami) /usr/local/include /usr/local/lib
$ chmod u+w /usr/local/include /usr/local/lib
$ brew install nodebrew

すると、違うエラーに変わりました。

Error: nodebrew 0.9.7 is already installed
To upgrade to 1.0.1, run `brew upgrade nodebrew`.
...
...

「アップグレードして」ってことかと思ったので、

$ brew upgrade nodebrew

すると、なんかうまく行けたので確認してみると

$ nodebrew -v
nodebrew 1.0.1
...
...
Example:
    # install
    nodebrew install v8.9.4

    # use a specific version number
    nodebrew use v8.9.4

なんとかここまでうまくいきました!
次に『インストール可能なnode.jsのリストを表示』させます。

$ nodebrew ls-remote

すると、結構長いリストが表示されます。

ここで、『version8.9.4をインストール』します。

$ nodebrew install-binary v8.9.4
$ nodebrew ls
$ nodebrew use v8.9.4

続けて、『nodeとnpmコマンドのパスを通す』と調べたら出てきたので言われたとおり打ち込んでいきました。

$ nodebrew setup
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
$ source ~/.bash_profile

最後に、もう一度version確認しておきます。

$ node -v
v8.9.4
$ npm -v
5.6.0

無事、成功しました!

Vue-cliのインストール

ここから、本題の『Vue.jsの開発支援用コマンドをインストール』していきます。

私は、3.X系をインストールしたので、

$ npm install -g @vue/cli
$ vue --version
3.7.0

2.X系をインストールする場合は、

$ npm install -g @vue/cli-init

プロジェクトの作成

webpackをテンプレートとして設定して作成します。

# initコマンドで作成する(vue-cli2.x系)
$ vue init webpack app-test

? Project name app-test
? Project description A Vue.js project
? Author reflet <〇〇@gmail.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm

#createコマンドで作成する(vue-cli3.x系)
$ vue create app-test

Vue CLI v3.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Unit, E2E
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a unit testing solution: Jest
? Pick a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? No

「?」は部分は、質疑応答になります。

起動方法

# initコマンド (vue-cli2.x系)
$ cd app-test
$ npm run dev

# createコマンド (vue-cli3.x系)
$ cd app-test
$ npm run serve

すると、下記のようにローカルサーバーが立ち上がります。

...
...
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://(IPアドレスが表示される):8080/
...
...

『- Local』のURLにアクセスして『Welcome to Your Vue.js App』と表示されれば成功です!

Vue.jsスタート画面

ファイルの構成説明

無事ファイルがインストールされたので、ファイルの構成説明をしておきます。

├ gitignore
├ babel.config.js
├ node_modules
├ package-lock.json
├ package.json
├ public
│  ├ favicon.ico
│  └ index.html
├ README.md
└ src
   ├ App.vue
   ├ assets
   │  └ logo.png
   ├ components
   │  └ HelloWorld.vue
   └ main.js

まとめ

環境構築が一番の壁ですよね。
いろいろ調べてそのとおりにしても、うまくいかないことって結構あると思います。

そんな時は、失敗したことをメモ程度でもいいので書き起こしておくことが大切です。

失敗が多い人こそほど、エラー対応に強くなるからです。

今回は、私自身エラーがでて試行錯誤してやっと成功できたので記事にして記録しておこうと思いました。

エラー続きだと正直モチベーションが低下していきますが、成功したときの喜びは格段に上がります。
だから、やめられないし楽しいなっと私は思います。

]]>
https://sitommy.com/javascript/1716/feed/ 0
2019版WordPressの固定ページの作成方法!【ナビゲーション設定も紹介】 https://sitommy.com/wordpress/1682/ https://sitommy.com/wordpress/1682/#respond Thu, 23 May 2019 06:57:06 +0000 https://sitommy.com/?p=1682 どうも、Tommy(@SitommyBlog)です。

前回、投稿ページについて紹介しましたので、今回は固定ページについて紹介したいと思います。

投稿ページについて知りたい方は、下記のリンクを見てください!

固定ページとは?

主に、会社概要やブログサイトでいうとプロフィールなど通常のWebページに用いるページを指します。

投稿ページとは違って、カテゴリーという概念はなく、そのかわりに固定ページ間の上下関係を親子関係として設定することができます。

更新頻度があまりないページは固定ページとして作成することになります。

作成方法

ここから固定ページの作成方法と、サイトには必ずナビゲーションがあるので、それも追加して固定ページをナビゲーションに入れていく作業を紹介していきます。

ページ作成

まず、『ダッシュボード → 固定ページ → 新規追加』を選択しましょう。

固定ページ作成方法01

固定ページ用のエディターが表示されるので記入していきましょう。

固定ページ作成方法02

まずは、タイトルと本文を書いていきましょう。
ここでは、『サイトの紹介』という固定ページを作成したいと思います。

固定ページ作成方法03

次に、パーマリンクの設定をします。
タイトル・本文を書いたら、右メニューに新たに『パーマリンク』という項目がでてきます。

固定ページ作成方法04

デフォルトのままだと、赤枠の通り『タイトル』になっております。

このままだと、スラッグが日本語になってしまいあまり良くないので英語に書き換えて置きましょう。

固定ページ作成方法05
じぃじ じぃじ

スラッグを日本語にしていると、コンピューターが自動で変換してしまうのじゃ!
そのため、『%EC%66%8E%31…』のような文字が長々と羅列されたURLになってしまうから注意しよう。

あとは、公開ボタンを押すだけで完了。

固定ページ作成方法06
たからくん たからくん

思っている以上に簡単だね!

ナビゲーション設定

固定ページができたら次はサイトに表示させるために『ナビゲーション』をつけて行きましょう。

使用しているテーマにもよりますが、デフォルトのナビゲーションだと固定ページ全てが追加されていってしまいます。

固定ページ作成方法07

「ナビゲーションの順番も変えたいし、ヘッダーナビゲーションに必要ないものは表示させたくない」っと思うかと思います。
自身でナビゲーションを設定する方法は、『ダッシュボード → 外観 → メニュー』を選択しましょう。

固定ページ作成方法08
固定ページ作成方法09

メニュー名を記入しましょう。わかりやすい名前にしておくと良いでしょう。

メニュー名を記入したらクリックしましょう。すると 左側にあるメニューが選択出来るようになります。

選択出来るようになったら、固定ページのナビゲーションに入れたいものだけチェックを入れ追加ボタンを押しましょう。

固定ページ作成方法10

すると、

固定ページ作成方法11

赤枠に追加されていきます。また、ヘッダーのナビゲーション設定なので青枠にチェックを入れておきましょう。これで、完了です!

固定ページ作成方法12
じぃじ じぃじ

固定ページだけじゃなく、投稿カテゴリーなども同じように追加していけるぞ!

たからくん たからくん

専門知識が無くても、自身でメニューの追加・変更できちゃうね!

]]>
https://sitommy.com/wordpress/1682/feed/ 0