ogu-tec

久しぶりにデスクトップPCでブログを書いている。
このデスクトップPCは未だWIN７で動いている。ここのところ競馬以外はMacのノートPCばかり使っているが、このPCに新しいツールを入れたので、そのご報告だ。
コロナ騒ぎ以来在宅ワークが言われて、小生もWEB開発の学習のビデオをYouTubeにあげたりSkypeで会議をしたりしてきたが、これも基本MacBookでやってきた。
しかし、WIN環境でも行う必要が生じた。というのは世間はいまだWINが主流だ。したがってMacで作ったビデオはもう一つわかりにくいという話になってしまった。たとえばBracketsというエディタもMacとWinではやや違う面があるようだ。そこでWin環境での実行もビデオ化する必要が生じたわけだ。
それともう一つ。WEBでの会議もデスクトップの方がディスプレイが大きく見やすいということもあった。
だが、このWinのデスクトップではビデオをキャプチャできない。しかもカメラもマイクもついていない。だからやっていなかったともいえるのだが。
そこでまずはビデオキャプチャできるようにした。
これはBandicamというツールをインストールすれば済む。ロゴは出るが無料版でいいだろう。（ちなみにWin10では最近標準でビデオキャプチャツールが加わったとの話だが）以下のサイトから簡単に導入できる。
https://www.bandicam.jp/
キャプチャ画面はこんな感じ。

Macの標準のビデオキャプチャより高機能だ。書き込みができたりするのがいい。
ちなみにマイクはすでにMacのときからUSBマイクを導入しているのでそれを使うことにする。
（内臓マイクだと雑音がひどかったため購入したもの）

さて、今度はカメラをどうするかだ。実はここが極めて楽しいこととなった。何がって、古いデジタルカメラを引っ張り出していろいろとできないか試したからだ。
実はこのコロナ騒ぎと在宅ワークのせいでWEBカメラが市場から消えた時期があって、手持ちのデジタルカメラをWEBカメラ化する話題がネット上でいろいろ取りざたされていたからだ。
基本ビデオキャプチャボードを導入すれば、HDMIでつないでWEBカメラ化するのが簡単なようだ。しかし、ビデオキャプチャボードというハードをあらたに導入するのでは本末転倒だ。
そこでソフトウエアだけで導入できないかだ。実はカメラメーカーが独自にソフトウエアを開発したり、一般の開発されたソフトウエアを提供したりしている。これが使えればいいわけだ。
だが、これはカメラによっていけるかどうかはそれぞれのようだ。小生が引っ張り出してきたCanonの一眼レフとコンパクトデジカメはとりあえずうまくいかなかった。（古すぎるのかな？でも実は別の記事に書くが、MACではうまくいった！）
そこで考えたのはiPadを使うという手だ。（もちろんiPhoneでもいい。小生iPadはminiと古い物と２台もっているが、iPhoneはもっていない！試していないがアンドロイドスマホでもいけるらしい。）
これも大して難しくはない。PCとパッドなりスマホにiVCamというツールを導入すればいい。（ちなみにこのツールMacPC版はない！）
以下のサイトからまずPCに導入する。

iVCam

パッドなりスマホにはアプリストアから導入する。
そして、両方で起動し、パッドなりスマホはUSBで接続する。
すると画像のようにiPadがカメラとなってデスクトップ上に表示される。



これをさまざまなツールと連携させればいいわけだ。
とりあえず報告はここまで。
Macと一眼レフの接続は別記事で。

ブログ書きだめ第３弾。
ちょっと専門的な話。
WEBサイトを作るとき、旧来のやり方だと、何ページもあるサイトだと共通部分の変更が面倒ということがある。これは前の記事で触れたYouTubeにあげた例でもそうなのだが、各ページには共通部分が存在する。ヘッダーとかフッターと呼ばれるもの、またアサイドと呼ばれるものだ。ここに変更が生じると、各ページを別々に編集しているサイトでは、ページ分だけ同じ作業をしなくてはならない。
WordPressではもともとの仕様でこうした共通部分は独立させていて、各ページはそれをプログラム的に読み込むという形をとっている。
これを静的なサイトでも実現できないか考えていろいろと調べていた。
そこで、それを実現する最も簡便なやり方がJqueryのloadメソッドを使ったやり方だということが判明した。そこにたどり着くまで、やれAjaxだ、DOM操作だ、Jsonだと回り道したが、このloadメソッドを使えば簡単なことがわかった。そもそもこのloadメソッドはAjaxの簡易版といっていいようで、Jqueryのマニュアルにも

このメソッドは、サーバーからデータを取得してくる最もシンプルな手法です。 グルーバル関数では無い事と暗黙のコールバック関数を持つことを除いて、$.get(url, data, success)とほぼ同等です。 成功したレスポンスであると判断された(例:textStatusが”success”または”notmodified”)場合、.load()は 取得したデータをマッチした要素にHTMLとしてセットします。

とある。
具体的には
header部分で言うと、その内容を別ファイルでheader.htmlとしておき、
読み込むほうでは

としてコンテントを空にしておいて、
スクリプトで

と書けばいいわけです。
その他もこうしておけば、そのファイルを編集して更新するだけで、全てのページのその部分が更新されるというわけです。
ただ、これはサーバー上でしか確認できないのでご承知おきを。しかし、BracketsでChromeを使っていれば確認できます。
詳しくは後日YouTubeにアップします。

コロナ在宅勤務ってほど勤務していないけど、毎週水曜日のWEB開発講座の講師ももう２ヶ月以上出かけていない。そこで講座内容をYouTubeにアップすることを発想し、やってみた。その後、もう講座ではやっていない基礎編から実践編の内容も調子に乗ってアップした。こう書くと簡単にやってのけたようだけど、これがなかなか大変で苦労した。その顛末。

MacBook Air に画面録画の機能があるのでそれを使う

これはクイックタイムにはもともとあった機能だが、新しいOSからはshift+commond+5で起動できて、すぐに画面録画ができるようになった。これがあるので行けると思ったわけだ。ところがこれがなかなか難しい。一人で話をしながらPCを操作して録画していくわけだけれど、在宅でスタジオでやっているわけではないので、途中でデンワが鳴る、誰かが尋ねてくる、といったことが起きたり、そうしたことがなくても後で聞いてみると雑音がかなり入っていることが多いのだ。また、台本無しで頭にあることをやっているので大事なことを言い逃したり、余計な失敗をしてみたりしている。ここはやはりある程度筋書きを作って、リハーサルをやることが必要なようだ。雑音はどうもwifiも絡んでいるようで、ネットにつないでやるといろいろ問題があることがわかった。

iMovie で修正する

さて、画面録画をそのままアップするわけには行かないのでiMovieを使ってある程度の修正をする。主に雑音の除去だ。iMovieを使ったことはなく、PCにももともとは入っていなかったのでインストールするところから始めた。無料アプリだ。だが、これがなかなか多機能で使いこなしが簡単ではなかった。特に画面サイズの調整がしばらくの間わからなくて、画面の上部が切れている動画をそのままアップしてしまっている。これは「クロップ」という機能を使って「フィット」を選ばないといけない。これはある意味致命的なミスで、講座で使っているエディタの上部のメニューが切れてしまっているから、初心者は戸惑ったかもしれない。

YouTube にアップする

さて、アップだが、これは始めの内はiMovieから直接行っていた。しかし、こうするとアップしてから不具合に気づく（上に書いたミスがそれ）ということになったので、いったんMP4に書き出してからそれをアップする形に変えた。なお、YouTubeにアップできる容量には当初制限があるが、ちゃんとしたユーザー登録をすれば、長いものでもアップできることがわかった。

YouTube で編集する

その後はYouTube内での設定ということになるが、これも当初はわからないことが多かった。サムネイルの画像の設定や終了後の画面の設定などやその他見てもらうためのさまざまな工夫などだ。今は何とか表題の画像だけ設定している状態で、ここらはまたお勉強となりそうだ。

というわけで、何とかアップはしているもののまだまだこれからという感じだが、動画の力はやはりすごいと思えるので、もっといいものを出しまっせ！

実際のYouTubeはこちら。https://www.youtube.com/playlist?list=PLH8RezOPNZUzl3QzjgqHZzQX6_d8P_Ucohttps://www.youtube.com/playlist?list=PLH8RezOPNZUzl3QzjgqHZzQX6_d8P_Uco

久しぶりの投稿です。
ここのところ自宅に居て、というより居ざるを得なくていろいろとIT関係のことをやってました。
そこでこれまでやってきたことを書き留めておこうと思い立った次第です。

その第一弾。
Kindle paperwhite　の初期化です。

ここのところもっぱら読書はこのKindle paperwhiteを使っています。今は坂口安吾全集読破に取り組んでいます。
これがなかなか進まないんですが、しばらく前にこのKindleが再起動を繰り返すという症状に陥り、いよいよだめかと思い、iPad mini を使って読んでいました。ところがやはり専用のバックライトつきの白黒ディスプレーにはかないません。
じゃ買うかと思ったんですが、一応修理ができるかとも思い、いろいろと調べました。
アマゾンで買ったんですが、履歴をみるとなんと2012年に買っています。８年たっていたわけです。実はかみさんも使っていてそちらはなんと３台目です。不具合があっての買い替えでしたが、その不具合はハード的なものでした。充電ができないという症状でした。
しかし、今回のはどうもソフトウエア上のトラブルのようです。こういうときは初期化ですね。しかし、再起動を繰り返しているので、初期化の画面にいけません。
さあ、どうするか。いろいろググリましたよ。
同じ人がいるもんですね。ブログに書いてありました。

いわく「パソコンに接続せよ」と。

そうか！usbで接続して、その上で再起動を試みました。２度目の再起動で画面が変わりました。メニューにいけました。そこで初期化できたわけです。以下の手順です。

１．画面右上のハンバーガーメニューをタップ
２．設定をタップ
３．もう一度ハンバーガーメニューをタップ
４．「端末のリセット」をタップ

こうすれば初期化できます。売却や譲渡の時は必ずやりますが、そうでなくてもこのリセットは必要ですね。また新しくなった感じです。

さて、後は最初の設定をすればいいし、コンテンツもアマゾンのクラウドにあるわけだからダウンするだけ。しかも読みさしの坂口安吾全集ちょうどiPad miniで読み終わっているところが表示されました。

やれやれ。それにしても物持ちがいいでしょ。

Xampp for Mac の導入

DL

sourceforgeのサイトで
「XAMPP Mac OS X」　「7.3.4」「xampp-osx-7.3.4-0-installer.dmg」と辿ってダウンロード

Install

XAMPPアプリケーションを実行

Manege Server から　Start All

データベースの設定

http://localhost/phpmyadmin/にアクセス

パスワードの設定

ユーザーアカウント
root localhost ……… [特権を編集]をクリック
上部にある「パスワードを変更する」をクリック
２度書いたら右の「実行」をクリック
（この情報は必ずメモしておくこと）
再度
http://localhost/phpmyadmin/　にアクセス
エラーがでたら、(必ず出るはず）
一旦Xamppアプリケーションで
Manege Server から　Stop Allでサーバーを止めて
テキストエディターで　config.inc.phpを開き、
Macでは/Applications/XAPMPP/xamppfiles/phpmyadmin/にある
しかも読み出し専用になっているので、一旦読み書きできるようにして編集し、保存したらもう一度読出し専用に戻す必要がある。
（これを行うにはファイルで右クリックして「情報を見る」を選択、FINDERで表示させて、
その最下部の鍵マークをクリックして解除してから、読み書きできるようにしたり、読出し専用にしたりする。終わったら鍵をかけておく。）
以下のように編集する。

/* Authentication type and info */
$cfg[‘Servers’][$i][‘auth_type’] = ‘cookie’;
$cfg[‘Servers’][$i][‘user’] = ”;
$cfg[‘Servers’][$i][‘password’] = ‘設定したパスワード’;
$cfg[‘Servers’][$i][‘extension’] = ‘mysqli’;
$cfg[‘Servers’][$i][‘AllowNoPassword’] = true;
$cfg[‘Lang’] = ”;

保存ができたら再度
Xamppアプリケーションで
Manege Server から　Start Allでサーバーを動かし
http://localhost/phpmyadmin/　にアクセスする。パスワードを聞いてくるはず。
パスワードを入れてログインできることを確認する。確認できたら一旦ブラウザを閉じる。

その他の設定（php.ini）

再度Xamppアプリケーションで
Manege Server から　Stop Allでサーバーを止めて
テキストエディターで　php.iniを開き、
Macでは/Applications/XAPMPP/etc/にある
（前と同じ操作が必要）

時計合わせ

「date.timezone=Europe/Berlin」
↓
「date.timezone=Asia/Tokyo」
に変更。

mbstringの有効化

「mbstring.language = Japanese」の先頭の「;」を削除
「mbstring.internal_encoding =」の続きに「UTF-8」を指定。こちらも先頭の「;」を削除。

編集出来たら、上書き保存。

これでXampp環境の構築はできた。

WordPressの導入

WordPressのダウンロード

WordPress の日本語公式サイトにアクセスし、
「WordPress5.3をダウンロード」をクリック

WordPressのインストール

wordpress-5.3-ja.zipを展開
展開してできたwordpressというフォルダをxamppの中のhtdocsにコピーする。
Macでは/Applications/XAPMPP/xamppfiles/にある

データベースの作成

Xamppアプリケーションで
Manege Server から　Start Allでサーバーを動かし
http://localhost/phpmyadmin/　にアクセスする。
「データベース」タブをクリック
任意のデータベース名を入力して、「作成」をクリック
データベース名はわかりやすい任意の英数字を入力しよう。ここでは「wp-01」というデータベースを作成
照合順序は、「utf8_general_ci」を選択
そのままにして

WordPressの初期設定

wp-config.phpを編集

コピーしたwordpressのフォルダ内のwp-config-sample.phpを探し
これを一旦コピーし、コピーしたものをwp-config.phpにリネームする。
エディタで開き、以下を編集

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
/** WordPress のためのデータベース名 */
define( ‘DB_NAME’, ‘wp-01’ );

/** MySQL データベースのユーザー名 */
define( ‘DB_USER’, ‘root’ );

/** MySQL データベースのパスワード */
define( ‘DB_PASSWORD’, ‘決めたパスワード’ );

/** MySQL のホスト名 */
define( ‘DB_HOST’, ‘localhost’ );

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

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

* 認証用ユニークキー

（https://api.wordpress.org/secret-key/1.1/salt/
にアクセスして表示された文字列をコピーして）

* @since 2.6.0
*/
（この下の同様な文字列に上書き貼り付けする）
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

上書き保存する。
http://localhost/wordpress/　にアクセスする。

サイト名などの設定

サイト名、ユーザー名、パスワードを決め、入力する。

ログイン画面からログインする。

あとはWordpressの世界

2019.12.12

そのきっかけ

MacOSのバージョンアップ

実はこのパソコン、OSのバージョンアップはこれまで何にもしていなかった。OS X 10.10 Yosemiteを使い続けていた。
これは小生の考え方で、安定して使っているなら何も変える必要はないはずだ、ということだ。
しかし、セキュリティサポートが２年前に終了しているということに気づいてしまった。そこでこの際UPすることにした。
一気に５代超えの最新macOS 10.15 Catalinaという選択肢もあったが、まだ安定していないと判断して、一代前のmacOS 10.14 Mojaveにした。
これは時間がかかったが問題なく終了した。

ローカル開発環境の不具合

だが、これは薄々聞いていたことだが、このバージョンアップがWordpressのローカル開発に不具合を起こしてしまった。
ずいぶん前にWordpressのローカル開発環境を構築していた。久しぶりに行う機会があってやれるようにしたのだが、これがうまくいかなくなった。
いろいろと試みたがうまくいかない。

ハードデスクの整理

そこでこれまでこのMacBookAirでやってきたことを振り返ってみた。
実に様々な設定をし、いろいろと試行錯誤してきた。
例えば、Bootchampを使って、WINを動かしたり、
VirtualBoxを使ってLinuxを動かし、ローカル開発環境を作ってみたり。
しかし、このMacBookAirのHDDは１２８Gしかない！
こうなったら「真っ新」にするしかない！ということとなった。
（これも小生の考え方である程度使ったPCは真っ新にするに越したことはない。できれば毎年暮れにやれるといい。）

初期化の実際

Backupの実施

初期化にあたり、バックアップが必要とある。初期化なんだからいらないでしょとも思えるが、万が一それに失敗した場合に備えるわけだ。
ただ、実はOSをバージョンアップした時に実施している。
外付けの５００GのHDDがあったので、これをMacBookAirに繋いで、TimeMachineといアプリで行なっている。
多少妙な感じのアプリだが、一応バックアップはできている。

必要ファイルの退避

バックアップはしてあるが、ここから個々のファイルは取り出せない。そこで残しておきたいファイルはクラウドに退避する。
実はこのMacbookAirにあまりファイルを保存していないから、簡単に済む。

クラウドサービスの一旦停止

さて、その上でDropBoxの同期設定を解除する。
クラウドサービスはほとんどがDropBoxなのでこれですむ。

Command + Rの実行

MacBookAirを再起動して、リンゴマークが出るまで、Command + Rを押し続ける。
するとmacOSユーティリティが現れる。

HDDの初期化

そこでディスクユーティリティを選択し、macHDDを選択して、上部のメニューから「初期化」を選択し、実行する。

OS(Mojave)の導入

次はこのmacOSユーティリティで、macOSの再インストールを選択する。ここはMojaveになっていた。
これが終了すれば、初期状態になる。いやいやあ時間かかった。（ネットに接続が必要だから明け方やったほうがいいかも。）
ここまでやれば、人に渡したり、売ったりできます。

初期設定

こうなれば、購入して初めてやったことをすることに。

スマホ役立つ

ただし、AppleIDは既に登録済みだし、Macのスマホやパッドを使っていれば、難なくできる。

初期化後

GoogleChromeの導入

まずはこれ。Googleを基本にいろいろとやっているので。

Dropboxの設定

データがほとんどここにあるので、まずは動いてくれないと。
ただ、こいつが結構大変。どうもDropboxは最近無料版から有料に誘う仕掛けが多すぎて気を付けないといけない。
小生は随分と以前から使用していて多くの人に紹介してきたのでそれなりの領域を持っている。
しかも、画像や動画はほとんど保存していないから、（これは別のクラウドを利用している）十分だ。
しかし、最近使えるディバイスが３台までとなったために、いわばこのMacBookAirが新しくなったためにそこをきちんとしなくてはダメだ。
要するに記録にディバイスをこのMacBookAirを含め３台にしておく。
しかも同期をを選択同期にして、このMacBookAirで使うものだけに限定しておく。
それでもかかったなあ時間が。なんとかできる。

Bracketsの導入

MacBookAirの仕事はほとんどがWEB開発。html,css,javascriptの編集には欠かせないエディタだ。
しかし、これをネットで検索して導入したのがよくなかった。バージョンが古くて二度やる羽目になった。
これは最初から「brackets.io」というサイトに行って導入するべきだ。

Xamppの導入

さて、ここが今回の肝だ。
というのは、Wordpressのローカル開発環境をどうするか、このOS上でうまくいか、これが問題だった。
結論的にはXamppパッケージを導入することにした。
これについては「Macにxamppをインストール」というQiitaの記事が大いに参考になった。
こうした記事はいろいろあってどれも参考になるが、大事なのは自分が求めていることにマッチしているか、古くはないかということだ。
この記事は「2019年05月04日に投稿」とあり、環境に「macOS Mojave (10.14.4)」とあった。
導入そのものは直ぐにうまくいった。テストも行なった。（しかしWordpressについてはこれからだ。後日報告する。)

MSOfficeの導入

さてこれでほとんど使える状態になったが、時々Officeを使う必要が生じるので、前にもいれていた「MSOffice2016forMac」を導入した。
ただ、これも来年中にはサポートが終了するらしい。
ただ、ほとんどが与えられた文書等を読むためだけだから入れとく。
CDに焼いてあるので、外付けドライブを接続して導入した。

エディタの導入

実はこの文章エディタで書いている。miというものだ。これも以前から使っているので導入した。
ただ、これはAppStoreにはなく、ネット検索して入れることとなった。

標準アプリについて

あとは購入時には入っている標準アプリが導入されていない。
しかしこれは必要になった時にいつでもAppStoreで導入できるので今は入れないでおく。

まとめ

こうしてまる二日かかってMacbookAirはリニューアルした。
まだまだ、使い続けられそうだ。
最後にバックアップを取った。

2019.12.10