サイト改装への道(9) 「manifest.jsonとは?」

ぼちぼちホームページ改装中。

でも、いろんな情報が目につくと、一旦停止。

で、今回は”manifest.json”というファイル。
ざっくり言うと、chromeのためのファイルらしい。
我がホームページをAndroid端末で見ていらっしゃって、ホーム画面にアイコンとして追加したいという奇特な方のために、対応してみる。

まず、”index.html”ファイルの部分に、以下の内容を追加。

実際の”manifest.json”ファイルは以下のように記載。

{
“lang”: “ja”,
“name”: “自己満足なホームページ”,
“short_name”: “自己満足”,
“icons”: [{
“src”: “img/ms-touch-icon-144×144-precomposed.png”,
“sizes”: “144×144”
}],
“start_url”: “/”,
“display”: “standalone”
}
で、アイコンを”img/ms-touch-icon-144×144-precomposed.png”ファイルとして保存。

で、自己満足なホームページを開いて、ホームページに追加すると、

おぉ!綺麗に丸まっとるな。もっと色々仕様があるみたいなので、試したい時に試したい。

TREK 8.4DS その11

この前リコールによりフロントフォークを交換したばかりですが、またまた出ました。リコール。

クイックリリース レバー リコールのお知らせ

でも、今度は自分での交換も可能ですね。

ワッシャーなしクイックリリース スキュアーの取り外し方・動画
ワッシャーなしクイックリリース スキュアーの取り付け方・動画
ワッシャー付きクイックリリース スキュアーの取り外し方・動画
ワッシャー付きクイックリリース スキュアーの取り付け方・動画

TREK 8.4DS (目次)

TREK8.4DSをブログのタイトルにしたおかげで、「TREK 8.4DS」で検索すると上位に表示されるんだが、一番上にくるのがサーバーに関しての投稿。
なので、目次ページを作ってみる。

TREK 8.4DS その1
TREK 8.4DS その2
TREK 8.4DS その3
TREK 8.4DS その4
TREK 8.4DS その5
TREK 8.4DS その6
TREK 8.4DS その7
TREK 8.4DSで行く世界遺産
TREK 8.4DS その8
TREK 8.4DS その9
TREK 8.4DS その10

まだまだ続くはず。

あ!「ページ」とかいうのが有るのね。
じゃあ、そっちで作ります。

Google Developersにて(6)

> index.htmlのcssが読み込まれない?
> .tmpフォルダが必要なの?

ということで、直接サーバから出力されるページと、プロキシ経由のページを分ける必要があるみたいなので、調査しました。
で、正解かどうかはわからないですが、解決方法をメモしておきます。

まず、http-proxyなるモジュールをインストールします。

$ npm install –save-dev http-proxy
gulpfile.fsファイルに次の変更を行います。

次のコメント以下のブロックに、

// Include Gulp & tools we’ll use
次の行を追加

var httpProxy = require(‘http-proxy’);

次のブロックを次のように変更

// Watch files for changes & reload
gulp.task(‘serve’, [‘styles’], function () {
  var proxy = httpProxy.createProxyServer({});
  browserSync({
    notify: false,
    // Customize the BrowserSync console logging prefix
    logPrefix: ‘WSK’,
    // Run as an https by uncommenting ‘https: true’
    // Note: this uses an unsigned certificate which on first access
    //       will present a certificate warning in the browser.
    // https: true,
    //server :[‘.tmp’, ‘app’],
    // PHPのページに対応するため、Proxyの設定を行う
    //proxy: “localhost:8888”,
    server: {
    baseDir :[‘.tmp’, ‘app’],
      // THIS IS THE ADDED MIDDLEWARE
    middleware: function (req, res, next) {
        var url = req.url;
        if (!url.match(/^/(styles|fonts|bower_components)//)) {
           proxy.web(req, res, { target: ‘http://localhost:8888’ });
        } else {
           next();
        }
    }
    }
    // external 指定すると、実行時のアクセスURLがIPアドレス指定側で開くことができる
    //external
  });

これで、styles,fonts,bower_componentsの3つのフォルダ以外はプロキシ経由で表示されると。

これで、Web starter kitをPHPに対応出来たと思っていいのか?