ＮＣ３のインストール・移行・カスタマイズの記録

今日は朝から「京町堀倶楽部」のサイトをNC3へ移行しようと頑張りました。

「京町堀倶楽部」はNC2.3.3.0で作成しておりそのままバージョンアップもしていませんでした。ので今回NC3への移行練習として試みました。

やはりローカルでの作業でNC2.3.3.0から2.4.2.1まではXAMPP version 1.7.7で、2.4.2.1からNC3（3.1.9）へはXAMPP Version 5.6.30を使用しNC3へ。

特に問題もなく、ローカル（Win10）で行い、NC3の資源をさくらのレンサバに移動。

その際、このサイトでもあった「upload_files」の「¥￥」を「/」に変換しインポート、これにより最初から画像も表示されています。

NC3.1.9の移行ツールでは、汎用DBの画像の移行も問題なく完了しています。（すばらしい移行ツール！感謝！）

ちなみに、現行の「京町堀倶楽部（NC2.3.3.0）」はこちら　＞＞＞＞＞左側にもリンクボタンがありますが・・・

っで、NC3への移行しぱなしの「京町堀倶楽部（NC3.1.9）」はこちら

（今だけ、NC3移行直後の状態が御覧いただけます・・・そのうち手加えていきます）

すみません。何かずっとアクセスがありサーバ名を変更しました。（kyoumachibori3→kyouamchibori2）

 いかがでしょうか。

拡張モジュールを使用したGoogleMAPの一覧は標準モジュールでないので移行対象外ですが、これを汎用DBに置き換えて作ろうと画策中です。

このサイトはあと、スライダーを設置したらWWWにしEddyKのほんちゃんサイトにしようと思いま～す。

「お問合せ」ページを追加しました。

「エディ・ケイとは」の横に「お問合せ」ページを追加しました。

技術的なこと、インストール・移行・カスタマイズなどのお問合せも「お問合せ」ページよりお気軽にご相談ください。

一昨日から息子が自分が出るコンサートのために帰ってきており、ちょっとダラダラと。

しかし、息子が本番当日のためか朝早くから起きていたのでつられ、7時くらいからPCの前に・・・

ドロップダウンメニューも社名を外し、スマホバージョンのハンバーガーメニューのボタンに「MENU」を追加。

それとやりたかったロゴ画像の挿入。ヘッダー部に「お知らせ」のブロックにて画像をつける。

独自CSSでヘッダー部の背景色を2色に分割。

本当はブロック毎に分け設定できるようにしようと思ってたが、ブロック挿入の際、横幅一杯のブロックになるのでブロック幅はNC標準を踏襲、っでヘッダー部のDIVはひとつなので、ひとつのDIVの背景色を2分割に。

便利なスタイル指定があるものですね。

「 background: linear-gradient(180deg,#3131aa 0%,#3131aa 50%,#222 50%,#222 100%);」といったスタイル指定でひとつのDIVを2分割に色を付けることが可能です。

っで、以前のサイトはちょっと濃い目の紺色だったのですが、メニューを黒にしたので若干薄めに変更しました。

こういった修正もcssを触るだけですぐに変更できるのはよいですね。。。

今回はカスタマイズというより、小技ですかあ？（あまり好まないのですが・・・まあ、良しとしときましょう）

フッターは一番最初に変更したのですが、ヘッダーも横幅一杯に背景色をつけれるように変更しました。

ヘッダー領域にブロック（フレーム）を追加しても同調するようになっています。

/app/View/Plugin/Pages/Layouts/default.ctp　をヘッダー部分をdivタグで細分化

CSSは独自のcss　/app/webroot/css/EddyK/page_eddyk.cssを変更

それとNetCommonsメニューをログオン時のみ表示するように変更

（これは、こちらのページを参考に

https://github.com/NetCommons3/NetCommons3/wiki/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3Tips　そのまま独自CSSに追加　・・・OSWS牟田口さん記）

これで、もともとのエディ・ケイサイトに近づいてきました。

サイトのエディ・ケイのタイトル画像を載せて、それに合わせた背景色を設定すればヘッダー完成。

明日にでも画像の追加、CSSの変更を？

ページトップへのボタンを追加しました。

下へスクロールした場合、ページのトップに戻るボタンが現れ、押下することによりページの先頭に戻るリンクを作成しました。

/app/View/Plugin/Pages/Layouts/default.ctp

独自のJSを読み込むように追加

また、トップに戻るためのアンカータグを追加

独自のJSは

/app/webroot/js　の下にEddyKフォルダを作成し、scrollTOP.jsを作成・追加

またcssも独自のcssを追加

以前作った独自css用のフォルダ内にscrollTOP.cssを作成・追加

本来ならAngularJSで作成したかったのですがAngularJS標準のanchorScrollが呼び出せなく断念。jQueryで作成してしまいました。

どうすればAngularJS標準の関数？を呼ぶことができるか今後の課題でしょうか。

メニューの時は、自作の関数で標準のものを使用しなかったのでできたのですが・・・

本日はこれまで・・・

っで、Google Analyticsのタグも埋め込むとしたら、/app/View/Plugin/Pages/Layouts/default.ctpでしょうか。

今後、NC3バージョンをエディ・ケイサイトの公式サイトにする際はGoogle Analyticsのタグも埋め込もうと考え中

 次はエディ・ケイ公式サイトでも載せているスライダーを追加かなあ？

やはりひとつのソースでPC・スマホの表示・制御が難しいので、２つのブロックでPC用、スマホ用のソースを記載して画面の大きさによって切り替える方法となってしまいました。

Foundationの場合はできたのですが・・・

取り敢えず、操作性を考え断念してしまいました。

もう少しスマホ用の色目を整え完成としま～す。

やはりスマホのリスト形式の3層目ページにはまってしまい今まで触ってしまいました。

3層目の確認用として「お問合せ」ページの下に3層目として「お問合せの下の下１・２」を作成しています。

3層目も表示できています。一度ご覧ください。・・・・やったあ～！

（何層でも行けると思うのですが、4層目までは確認しました）

今回はプラグインのカスタマイズで、

/app/Plugin/Menus/Controller　の　MenusController.php　を少し変更

「dropdown」を表示タイプに指定した場合、すべてのページを表示対象とするためすべてのページ情報を取得するように変更

/app/Plugin/Menus/View/Elements/Menusの「header」を複写し「dropdown」として配置

 index.ctp、list.ctp、list_start.ctp、list_end.ctpをdropdownのbootstrapのタグを吐き出すように変更

/app/Plugin/Menus/webroot/cssにdropdownのフォルダを作成しstyle.cssを作成

デザインなどオーバーライドする部分のみ記述

/app/Plugin/Menus/webroot/jsにdropdownのフォルダを作成しmenus.jsを作成

一階層目のクリックが発火しなかったのでclickイベントリスナーを設定

次は、ページトップへの移動ボタン設置でも挑戦してみようかな？

今日は一日中、PCの前で・・・、よく頑張りました。

通常業務を終え、今回は右カラムのリンクボタンをグリッド表示するように変更しました。

PCではひとつずつ縦にならんでいますが、タブレットでは、中央カラムの下に移動し、横一列に４つを表示。

スマホでは二つずつに2段に表示。

「お知らせ」を使用して作成していますが、htmlソースで記載しています。

一つずつをDIVでくくりclass指定しています。

<div class="col-md-12 col-sm-3 col-xs-6" style="padding-bottom: 10px;">
京町堀
</div>
<div class="col-md-12 col-sm-3 col-xs-6" style="padding-bottom: 12px;>
デモサイト
</div>

てな具合に・・・

簡単に説明するとひとつの枠（ここでは右カラム）横幅一杯が12でmdがPC、smがタブレット、xsがスマホ

classを表し、col-「表示するサイズ」-「表示幅の数値」を指定することにより実現しています。

みなさんも一度試されてはいかがでどうでしょうか。

ちょっとレスポンシブを体感・・・

カスタマイズではないのですが、ホームページ作成の「WEB制作実績」のページに以前制作させていただきましたものを掲載しました。

全てNetCommons2で制作したものばかりです。

他にも自治体関係のサイト・学校も作成させていただいています。

本日、dropdownメニューを作成し追加したのですが、デザイン的にはいまいちで以前のものを再現できていません。

また、タブレット・スマホした際の下位ページの表示がドロップダウン形式になっており「もうみっつ」ぐらいです。

（NC2のレスポンシブはCSSフレームワークとしてFoundationを使って実装していたのですが、今回はBootstrapでAnglerJS、やはり難しいですね）

一応、Bootstrapのdropdownリストを使用し作成しているので、メニューのブロックはひとつでレスポンシブ制御しています。

っで、今日はここまで。

本日はちょこちょこと触っていろいろ行いました。

今度また時間を見て、このメニューを完成させま～す。

完成した際にはカスタマイズ方法も掲載したいと思います。

さくらの無料のSSLを申請しSSL化してみました。

githubの情報「Let's Encrypt対応」にてスムーズに完了。

https://github.com/NetCommons3/NetCommons3/wiki/Let%27s-Encrypt%E5%AF%BE%E5%BF%9C

フレームヘッダーの色を変えるべく色々とみていたのですが、現在は「none」「default」「primary」「info」「success」「warning」「danger」と7色のみとなっています。

そこで今回は「EddyK」色を追加してみました。

トップページの新着とこの「NC3移行の記録」に適用してみました。

このフレームのスタイルでレスポンシブスタイルのグリッドの制御ができればと考えフレームを見だしたのですが、今は色だけでとどまりました。

多分、フレームのスタイルの指定ができるので、ここでの制御が可能になるのではと考え中！

/app/Plugin/Frames/View/Elements/setting_frame.ctpをコピーし

/app/View/Plugin/Frames/Elementsに配置

headerTypesの指定の部分に「EddyK」を追加

cssは独自のcssを/app/webroot/css/EddyKに追加

昨日、NC3のフッターとユーザーが自由に設定できるフッター領域をページの一番下に表示されるようにカスタマイズしてみました。

たぶん、皆さんのページもフッターは一番下に表示できているので、何をいまさらと思われるかもしれませんが、

ページに表示する情報がない場合、標準で「Powered by NetCommons」のフッターもブラウザの一番下に表示されないと思います。これを一番下にもってくるカスタマイズを行いました。

（試しに「ホームページ作成」の下のページにある「フッターが一番下に」のページをご覧ください）

また、フッターとしてNCメニュー同様横幅一杯にし、背景色を移行元サイトと同じようにしてみました。

/app/Plugin/Pages/View/Layouts/default.ctpをコピーし、

/app/View/Plugin/Pages\Layoutsに配置

cssリンクを独自のcssをlinkiするように追加など画面全体の大きなくくり（ヘッダー・メイン・フッターのくくり）を変更

独自のcssは/app/webroot/css/EddyKに配置

はじめどこを触ればよいかを分からず、いろいろな文言をgrepしあたりをつけ、変更を繰り返しやっと雰囲気がつかめたかなあ？

作業時間は、これだけでおよそ5時間もかかってしまった！

次はメニューをドロップダウン化しようかなあ。

以前3.1.4の時に作成しているので、そのまま動けばよいのですが、メニューは頻繁に変更がはいっているので、その差分を確認し、再作成かなあ？

昨日、移行を終えたEddyKサイトは、画像が表示されないといった問題があったのですが、なっなんと解決できました。

これは、upload_filesテーブルにパスを保持しており、winで移行処理を行った後、資源をそのまま、linuxに持って行ったため、ディレクトリーのデリミターが￥だったのでした。

NC2の時は、そのような情報はどこにも持っておらず、win・linux間の移設は問題なく可能でしたが、今回は、uploadしたファイルのパスを保持しているため、発生したのでした。

winでの移行は手軽ですが、そのあとlinuxへ移設した場合、ひょっとして気にしなければいけないことがあるかもです。

やはり公開する環境でやるのが無難かもです。

しかし、手軽なので作業はwinでやって公開はお客さまの環境に合わすようにできればと・・・

頑張ります。

これからは、デザインカスタマイズをぼちぼちと進めていきます。

今回も、およおそ2時間30分でした。

2018.6.25

NC2からNC3への移行を行いますが、ちょっと変わった？移行方法を行いました。

linuxで公開しているNC2（エディ・ケイのサイト）をローカルのwindowsで移行し、それをさくらのレンサバ（linux）へ移設するといった作業

ローカルのPC（Win10）のXAMPP 5.6.30を利用し移行を実施
PHP 5.6.30 (VC11 X86 32bit thread safe) + PEAR
（ただし、mariaDBをMySQL5.7.20に変更しています）

【移行作業の内容】
１．NC3をインストール
（１）ドキュメントルート（￥XAMPP￥htdocs）の下に￥nc3を作成し、その中にNC3.1.9の資源を配置
（２）NC3用のDB「nc3」を作成
（３）windowsなので、cake.batをwin用に変更
　　　windows用にcakeコマンドのphpパス変える

インストール画面より順次実行
内部エラーにてインストール失敗
mysql5.7.20のsql_modeを変更
mysqlのmy.iniにて sql_mode=NO_ENGINE_SUBSTITUTION　に変更

無事インストール完了

２．移行元の資源を取得
移行元（https://www.eddy-k.jp）の管理ツールにてフルバックを実施・取得し、フルバックしたtarファイルを解凍
使用するのは、
backup_full.sql
￥webapp￥uploads（アップロードしたファイルが格納されている）
のみ

３．NC2の資源を設定
（１）NC2用のDB「nc2」を作成し、２．で取得した「back_full.sql」をインポート
（２）２．で取得した「￥webapp￥uploads」を適当な位置に配置
　　　（漢字の名前が付いたフォルダの下には配置しない）

これで移行の準備は完了

４．移行実施
コマンドプロンプト画面にて以下を実行
cd ￥XAMPP￥htdocs￥nc3￥app（１（１）で作成したファルダの下の￥app）
Console￥cake.bat Nc2ToNc3 --database nc2 --prefix eddyk_ --upload_path 「３（２）で配置したuploadsフォルダをフルパスで指定（最後に￥）」 --base_url https://www.eddy-k.jp --nc3base /

ローカルでの移行は無事完了

ここから移行したNC3のサイトをさくらのレンサバ（スタンダードプラン）に持って行き公開を行う

５．さくらでの公開用資源としてローカルで作成したNC3の資源を準備
（１）￥XAMPP￥htdocs￥nc3をzipファイルに固め
（２）ローカルのNC3用のDB「nc3」のすべてのテーブルのsqlダンプを取得

６．さくらのレンサバでの公開準備
（１）公開用のNC3の資源を配置するフォルダを作成（ドキュメントルートの下に/nc3）
（２）ドメイン設定で公開用のドメイン（nc3.eddy-k.jp）を設定（ドキュメントルートは/nc3として）
（３）さくらにてNC3用のDB「＠＠＠＠＠_nc3」を作成

７．ローカルで作成したNC3の資源を「さくら」へ移設
（１）５（１）で作成したzipファイルを６（１）で作成したフォルダにftpし解凍する
（２）６（３）で作成したDB「nc3」へ５（２）で取得したsqlダンプをインポートする

８．さくらのNC3の環境設定ファイルをさくら用に変更する
/nc3/app/Config内の「application.yml」「database.php」を変更
（１）「application.yml」
fullBaseUrl: http://nc3.eddy-k.jp
www_root: >
/home/＠＠＠＠＠/www/nc3/app/webroot/
（２）「database.php」
　　　$master、$slave1とも変更する
　'host' => '＠＠＠＠＠.db.sakura.ne.jp',
　'login' => '＠＠＠＠＠',
　'password' => '＠＠＠＠＠',
　'database' => '＠＠＠＠＠_nc3',

それとさくらのレンサバのMySQLも5.7なのでsql_modeの変更が必要
先日ryusの天野さんに教えていただいた変更を追加
　'settings' => [
　 '@@SESSION.sql_mode' => "''",
　],

以上で移設も完了
無事画面の表示を確認
っえ！ローカルで表示されていた画像が表示されない・・・？

しかし今日はここまで、問題解決は今度にしよう。

およそ、2時間30分