はじめてのプログラミング的な 「のすけ式」エンジニアになりたい人向けの講座

最近、プログラミングをやったことない人でも、それなりにプログラミングできるようになる
カリキュラム考えて、実際にやってもらっているのですが

どうせなので、ここにも公開していきます。
いろいろ内容に異論はあるかもしれませんが「のすけ式」ということでやっていきます。

【内容】
WordPressを通してHTML・CSSを学び
さらに実践的なWordPressの構文及びPHP言語を3か月程度(人による)で習得してもらうプランです。

・最終成果物は「天気の子」のような自分のブログサイトを
自力で構築するまでになります。
https://tenkinoko.com/
具体的にはWordPressのテーマを自分で作ることになります。

ここまでできれば、企業のコーポレートサイトの受注や
個人サイトの開設など、小銭稼ぎくらいのサイト作成ができるように
なります。

最近のWordpressサイトの受注内容をざっと見たところ
天気の子のように、かなり動きのあるサイトが求められています。
そこで、Javascriptも習得しなくては、ほかのエンジニアとの差別化が
難しいと考え、その範疇も含めたいと思います。

社内で必要技術があるので、ちょっと偏っているかもしれませんが
世情は反映されていると思います。

そして、見事。最終成果物を作成するところまで行けたら
実際に仕事を受けて、納品するまでサポートします。
受注中の悩み相談。納品までの技術的課題サポート。

ですので、
一連の仕事を受けて、作って、納品するという流れまでお付き合いします。
これを経ることで、フリーランスとして仕事を受注するもよし、
どこかの会社に就職するもよし、寺子屋のメディア業務を受け持つもよしの
現代のITの流れに通用する技術と経験が身に着けられるものです。

【サポート体制】
このプランを契約すると以下のサポートが受けられます
・目標設定（上記 天気の子をベースとしてた個人サイト作成）
・チャットサポート（のすけに技術的なことを何でも聞ける）
・オフラインでの相談（のすけに直にいろいろ聞ける）
・実案件受注中のサポート

【やらないこと】
講義をしたり、手取り足取り教えるわけではないです。
基本的には自主的に学んでください。
基本は書籍やWebで学んでもらい、目標設定や進捗確認などをするのと
上記サポートで分からない部分はすぐに聞けるというものです。
ただ、テキストのやり取りで分からない場合は、オフラインで教えますので
そこは安心してください。

【料金】
経費が全部で数万円くらい掛かります。
・受講料　月2万円くらい
・書籍代　5,000円くらい
・ソフトウェア代　2万円くらい
　購入ソフト一覧
　・PHPStorm ¥11,124/年　もしくは¥1030/月
　・Affinity Photoまたは Designer ¥6,000(買い切り)

・サーバー代　月198円
https://www.coreserver.jp/
コアサーバーのCORE-MINIプランを契約してもらいます
　

【習得技能】
・HTML5
・CSS3
・PHP
・Linux
・Wordpress
・Javascript
・jQuery
・Vue.js
・Elementor
・canvas
・pixi.js

追記

のすけ式エンジニア講座はオフラインで毎週やっているのですが

カリキュラム内容をブログ投稿するのが大変で、止まっています。。

ある程度、ノウハウが確立されたらいつか投稿するかもしれません。。

Nuxt.jsとかメモ

最近は Nuxt.jsでSPAアプリケーション及び、SSRアプリケーションを
構築したりしています。

Vue.jsは以前利用していたknockout.jsに似ていて書きやすい。
cssフレームワークやjQueryも併用できるなど相性がいいので気に入ってます。

サイトを作っていく上で、やはりデザインの大切さに気付く
いままでBootstrapで適当に作ってきたが、やはりオリジナルのコンセプトで
サイトを構築していかないと、差別化された世界観の
システムは構築できないのだと痛感しています。

特にボタン回りは課題です。
フラットデザインはいよいよダサくなってきました。
Googleが提唱するマテリアルデザインをより、Googleを超える思想で
実装していくのがカギだと思っています。

Webの世界から離れたら、地球上には解像度の高いマテリアルがあふれています。
水の表現などは良い線いっていますが、土や岩などまだまだ
ほど遠い質感がのこっていて。浮ついていない重厚感あるマテリアルの存在感を
どう表現できるかが、重要だと感じています。

ヒントは質感、反発。

あと文脈はとても大事。
アートの世界でも、ほぼすべてが文脈。
ただ絵を眺めているだけでは受け取れない奥行きがある。
奥行きがあるから、そこに一貫性があり、表現の幅が広がる。

でもいきなり文脈を作るのは愚策だと悟った。
いちどコラージュなどで、体から出てくるフェチズムを前回に出し切ることで、自分が主張したい創造性の方向が分かってくる。
出し切ったフェチズムを客観的に見ること。
これに尽きる。まずはアナログ→客観性→文脈→コーディング。

幸いなことに連携力がましてきたことで探求できる幅が広がりました。
よりリッチで、世界観あふれるシステムを今後も構築してきたい。

canvasで円が動くやつ

Circlesを作った

jsdo.it

そういえば燃料電池作ったよ

重曹で発電した！

ものは全て１００円均一で揃えました (ブレッドボードと電源コネクタは別)

ブレッドボードは前にAliexpressで一個50円くらい？で買ったのと

電源コネクタと発光ダイオードは秋葉原のパーツやで300円&30円くらい？で買ったやつです。

別になくてもいいんですけど、気分です。

そして

メイソンジャー的なおしゃれなPET素材の瓶のフタにドリルで穴を開けて

４Bの鉛筆を両端を２本削って刺して

中に重曹を入れて。。。

９Vの電気を流したら

鉛筆の先に泡がボコボコしてきて

それぞれ酸素と水素が発生

十分に蓄電されたら(5分〜10分くらい？)

発光ダイオードを繋げてやると

ピカッっとな！！

自作キーボードキットHelixPico

のすけです。

唐突だけど、キーボード自作します！

もう、PC作業で肩こりがしんどくて、持ち運びできる分離型のキーボードが

欲しかったんだけど、駅前のビックカメラには売ってないし。。。

で、自作キーボードの噂を聞きつけ、遊舎工房さんのHelixPicoを買いました。

こんな感じで、キーキャップとキースイッチと、キットを買いました。

そう、半田付け必須です。それも100箇所以上

Arduino Pro Microとか抵抗とか送られてきます。

がんばろう

HelixPico キーボードキット | 遊舎工房

電池ってなんだろう

技術的な文章はかなり時間がかかるので、ここで地球や社会について思うことなど雑記として書いて行こうと思います。

最近ハマっているのが発電・蓄電です。
特に燃料電池にハマっています。

そもそも電池ってなんだろう？と
蓄電ってなんだろう？と

停電すると手も足も出ないじゃないですか。なんとかしたい訳です。
停電したらコンビニに電池を買いにいっても、争奪戦になる訳で、、、
だから、電池ってなんなのか知っておこうと思いました。

iPhoneとかにケーブルを繋いで充電すると、電気が溜まるわけで一日利用できるわけですが
これって実は電気っていうものが溜まっているわけじゃないんですよね。

ただの化学変化で、最近のスマホではリチウムイオン電池っていう最新のものが使われているわけだけど

これって、電池の中でプラス極とマイナス極が２つあって、その間をリチウムイオンが移動する事(酸化還元反応)で

電気を貯めたり、放出したりする現象を利用しているわけ

イオンって？引用します(
リチウムイオン電池の豆知識 - リチウムイオン電池の豆知識
)

イオンとは、電子の過剰または欠損により電荷を帯びた原子（または原子団）のことを言います。リチウムイオン（Li+）は、リチウム原子（Li）が電子（e-）を放出してプラスの電荷を帯びた陽イオンです。リチウムイオンが電解質を通して正極と負極を行き来するときに正極と負極を結ぶ回路に電子の流れ（電流）が発生するので、電池の充電・放電が可能になります。リチウム原子（Li）が電子（e-）を失ってリチウムイオン（Li+）となる反応を酸化、逆にリチウムイオンが電子を得てリチウムに戻る反応を還元反応といいます。

リチウムはすべての元素の中で最もイオン化しやすい（イオン化傾向が強い）元素です。

つまり電荷を帯びたリチウム原子をリチウムイオンっていうわけ。

で、電子が移動する事で、電流が流れるわけです。

で、リチウムイオン電池って最先端の電池なのでちょっと不安定かつ難しいんだよね。

そんなわけで燃料電池がわかりやすくていい

中学校の理科の授業で水の電気分解をやったと思うけど、その逆が燃料電池なんだよね。

だから本当に簡単で、この北ガスのサイトにあるように、家庭で自作できる！
えんぴつで燃料電池を作ろう！｜自由研究おたすけガイド｜北ガスキッズサイト それいけ！！エネルギー探検団

そんな訳で燃料電池を自作しようかと思っとります。

KUSANAGI@Conohaでオブジェクトストレージ設定のベストプラクティス

こんにちは、のすけです。

KUSANAGIを利用する理由として、今まで利用していたサーバーが遅いので
変えたいという動機が多いかと思います。

しかしながら、前回紹介して方法だと、WordPressをKUSANAGIに移行する場合
既存のメディアライブラリの画像などが上手く認識されないなどの問題が出てきました。

hollywis.hatenablog.com

他の方法を模索したところ、別の手法を見つけました。

ConoHaオブジェクトストレージをマウントしてWordPressでのメディア保存先にする | サイト制作覚書

ただ、こちらの手法ですとディスクのマウントに失敗する事が多いため

あれこれと試し、最適な方法を見つけました。

まず、手順通り cloudfuseを入れます。

cloudfuseを入れる

yum -y install \
    libcurl libcurl-devel \
    fuse* fuse fuse-devel fuse-libs \
    libxml2 libxml2-devel openssl-devel \
    gcc gcc-c++ make git curl

git clone https://github.com/redbo/cloudfuse.git

cloudfuseというディレクトリができています。

cd cloudfuse
.configure

jsonのエラーが出たのでjson-c-develをインストール

yum -y install json-c-devel
.configure

make
make install

cd ../
rm -rf cloudfuse

ホームディレクトリ以下に .cloudfuse というテキストファイルを作成する

cd
nano .cloudfuse

内容

username=APIユーザ名
tenant=テナント名
password=APIパスワード
authurl=https://identity.tyo2.conoha.io/v2.0  (Identity ServiceのURL)
verify_ssl=True

Ctl(controlY)+X Y Enter
で保存します。

マウントテスト

cloudfuseを使ってマウントテストします。とりあえず /mntにマウントします。

cloudfuse /mnt

df -h

大丈夫なようなら次に進みます。もし問題がある場合は「.cloudfuse」の設置値に問題があるので修正します。

自動マウント

それでは次に重要な自動マウント設定をやります。

私はここの検証にかなりの時間を使ってしまった。

最初は手順通り /etc/fstab を使って設定したのですがうまく自動マウントされなくてハマってしまいました。

その他、crontabの@rebootで、再起動後のスクリプトでcloudfuseコマンドを打ったりしたのですが、特定のユーザアカウントでは参照できるが
別のアカウントではドライブが参照できないなど、色々と罠に合いました。

結果的に、最初の「/etc/fstab」に設定を入れるのが最適だと判断しました。

ダメだった方法(crontab)

crontabの起動時に一度だけ実行される設定を追加してみました。
crontabに以下を追加

crontab -e

以下を最後の行に追記(xxxxxxのところはご自分のConohaAPIの設定値を入れてください)

@reboot /usr/local/bin/cloudfuse -o nonempty -o username=gncuxxxxxxx,tenant=gnctxxxxxxxx,password=xxxxxxxxx,authurl=https://identity.tyo2.conoha.io/v2.0,verify_ssl=True /home/kusanagi/rsel_terakoya/DocumentRoot/wp-content/uploads

結果、これでは特定のユーザしかディスクが参照できずダメでした。mountのオプション指定でなんとかなるのかもしれませんが、kusanagi
やnginxのユーザのアクセス権など混乱するので、結果的に諦めました。

/etc/fstabとは

OSを起動したときに、この/etc/fstabファイルが参照されます。そうするとそこに書かれている設定値でファイルシステムをマウントします。

例：

# cat /etc/fstab
/dev/hda1 / ext2 defaults 1 1

・1列目：デバイスファイル名
・2列目：マウント場所
・3列目：ファイルシステムの種類(ext2,ext3など)
・4列目：オプション
・5列目：dumpでバックアップするかしないか。(0 or 1) ext2やext3は1を指定する。
・6列目：システム起動時にファイルシステムチェック(fsckチェック)する順番を指定 (0,1,2) 0の場合はチェックしない 。ルートファイルシステムは1にしないといけない。

cloudfuseを/etc/fstabに設定数する

という事で /ect/fstabを使っていきました

# cd /home/kusanagi/( kusanagi_provision_name )/DocumentRoot/wp-content/

kusanagi_provision_nameにはKUSANAGIをセットアップ下際のプロジビジョン名を入れます

次にupulodsに変わるマウントポイントとなるディレクトリを作ります。(ex: cos)

# mkdir cos

# vi /ect/fstab 

一番下の行に次を追加します

/usr/local/bin/cloudfuse /home/kusanagi/( kusanagi_provision_name )/DocumentRoot/wp-content/cos fuse username=gncuxxxxxxxx,tenant=gnctxxxxxxxx,password=xxxxxxxxx,authurl=https://identity.tyo2.conoha.io/v2.0,verify_ssl=True,auto,_netdev,defaults,umask=001,allow_other      0 0

説明：cloudfuseでcosをマウントします。

usernameやtenant,passwoed,authurl, verify_sslは.configureと一緒ですね.

あとは、autoでmount -aで自動マウントするように。_netdevでネットワーク接続語にマウントを実行するオプションを指定

重要なのは,umaskで001を指定する事で,chmodの776と同じくなります。003でも良いかもしれません。

設定したら、うまくいくか確認します。

mount -a

何も表示されなければokです。

dfコマンドで、マウントを確認します。

df -h

よければ再起動して、テストします。

reboot

再起動後、ログインしてdfで再度確認します。

df -h

こんな感じでマウントされて入ればOKです。

WordPressのメディアの参照先を変える

このままでは、「uploads」を参照してしまうので、作成した「cos」を参照するように変更する必要があります。

管理画面にログインし、URLを「/wp-admin」
から
「/wp-admin/options.php」に移動します。

するとWordPressのオプション設定画面にいくので
以下の設定を入れます。

WP options設定

upload_path　wp-content/cos

upload_url_path　https://object-storage.tyo2.conoha.io/v1/nc_(テナントID)

※upload_url_pathについては環境によって違うかもしれません。Cyberduckにアップロードしたファイルを選択して右クリックした際に、「URLをコピー」をクリックして取得したURLの最後のファイル名を除いたURLを設定します。

おまけ　Cyberduckにアップしたファイルが参照できない場合

自分のPCのconoha-ojsをインストールします。

GitHub - hironobu-s/conoha-ojs: CLI-tool for ConoHa Object Storage

インストール後、認証して

conoha-ojs auth -u "gncuxxxxx" -p "xxxx" -t "xxxxxxx" -a "https://identity.tyo2.conoha.io/v2.0"

公開したいディレクトリを公開設定します
例：2017と2018を公開させる

conoha-ojs post -r ".r:*" 2017
conoha-ojs post -r ".r:*" 2018