ふだん映像編集はしてないですが、adobeの契約していると普通に映像編集のソフトが使えます。
たまーに、映像を繋げてスライドショーにして、音楽だけつけてほしいよという依頼があるので最短で編集できる方法を書き残して置きたいと思います。
使用頻度が少なすぎて忘れちゃうんですよね。

Adobe公式動画がめっちゃわかりやすかった。

めっちゃ簡略的にまとまってます。
これだけで8割OKな感じがします。

トランジションの設定をする

上記の編集方法に加え、画面切り替えだけ少し工夫できればいい感じです。

画面切り替わり用語のメモ

エフェクトパネルのエフェクトから、該当のエフェクトを探してドラッグ&ドロップする感じです。
エフェクトの呼び名を知っておくとわかりやすいのでここにメモしておきます。

ディゾルブ

エフェクトパネル　ビデオトランジション → ディゾルブ → クロスディゾルブ
画面をフェードで切り替え
シーンのはしに合わせて、「command + D」で「クロスディゾルブ」エフェクトを追加できちゃうみたいですよ。

押し出し

エフェクトパネル　ビデオトランジション → スライド → 押し出し

写真のサイズを動画サイズに合わせる

フレームを選んで右クリック。フレームサイズに合わせてスケール
するとサイズがピッタリ合います。
複数を選択していると、一気にできます。

動きをコピーして他のフレームに適用

一つのフレームに拡大のエフェクトとかを自作して、他のフレームにも適用したい場合があると思います。
コピー元のフレームを選択し、コピーします。その後コピーしたいフレームを選び、「属性をペースト」します。一気にエフェクトを適用できます。

まとめ

メモっとかないと忘れちゃうんで、また同じような作業しなきゃいけない時はこの記事をみながらやろうと思います。
あと、DVDくらいの解像度なら、macbook pro 13インチの一番安いモデルでも楽々こなせそうな感じです。動画と静止画くっつけて30分ぐらいの動画になりましたが、h.264のmp4書き出しで10分というエンコード時間でした。
実用範囲も実用範囲です。
追記 * エンコードはやはりパワーを食う作業のようで、カクカクして真っ最中には他の作業は難しいようでした。ご注意ください。

Photoshop使ってて、シェイプの線の色が必ず赤色になってしまったり、破線や点線で書かれてしまうことがあります。
自分の場合は、必ず 角丸が 20px 1px 1px 1px という非常に使いにくいものが毎回出てきてイライラしていたところでした。

今回はそれの対策法です。

ツールの初期化をする方法

最初にツールを選択してください。

続いて、上に出ているバーの「ツールアイコン」を右クリックします。

ツールを初期化でOKです。全てのツールを初期化しても良いです。

手動で学習させるなら、アキネイターつくれるんちゃうか、とふと思ったので実験してみる。

アキネイターとは

https://jp.akinator.com/

これよ。人物を思い浮かべて質問をしていくと適切な回答を得られるというものです。
魔法みたい。

アキネイター仮説

つくり方を晒してる訳ではないと思うので、推測します。
これって実質は、「属性タグの絞り込み検索」なのではないかと思います

質問 1で男女とか、アニメキャラか否かを分けます。

アンパンマンを例にするとこんな感じです。
男であり、架空のキャラである。

属性タグ説でいくとこう表現できます。

質問によって、
男だと判明したら、男にチェックが入る。
架空だと判明したら架空にチェックが入る。

そんな感じで質問によってタグ情報を追加していき、該当するものを絞り込んでいく。
そのような仕組みなのではないかと思います。

質問の作り方

初期は大雑把に振り分けられる質問が多い感じがします。
タグの数の多い質問を優先的にしていく。そんな仕組みが必要そうですね。

事前にいい感じの質問を用意しておく必要もあります。
この辺の仕組みはまだちょっと考え中。
つくりながら検討します。

機械学習と、内容の修正

この辺はちょっとどうやったらいいか思いつきません。
s質問の絞りこみが達成できたら考えてみようかな。

ダイエットに関する記事はこちら

ビフォー　⇆　アフター

けっこうわかりにくいな！

よーくみると足が細くなったりしてます。ウエストもちょっと痩せたかなって感じ。

こっちは多少わかりますね。
小デブが普通になったって感じです。

けつが小さくなってますね。数値的にもウエストは細くなってたりとかちゃんと記録できてたのでよかったです。

まだ落とせる肉はある

やせればいいってもんじゃないのはわかってますが、まだ落とせる肉があそこにもあそこにもありそう…ということで引き続きダイエットをしていこうと思います。

目標を決める

そうだなぁ目標、58kgにしてみようかな。
正直 60kgぐらいがちょうどいいと思ってるので、そこで終了いいかな。
やります。

squoosh とは

Google Chrome Labs の開発した画像圧縮ツールです。
TinyPNGのようにWeb上で使うアプリです。
PNGやJpgのほか
webP などの新しいファイル形式にも対応しているそうです。

早速使ってみた

tinyPNGと同じでドラッグするだけです。ファイル形式によっては圧縮率も設定できますし、画像の劣化具合もわかりやすく比較できます。

デフォルトの圧縮率だと劣化具合もほぼわからないので、実用的な設定になっていると思います。

もしかして１ファイルずつしかできない・・・？これは不便ですね・・・。

比べてみた

圧縮率とかの設定があるので、簡単には比較できないですが・・・。

元データ

5.0MB

squoosh

　mozJpg 665kb

webP 387kb

TinyPNG

.jpg 602kb

というような結果になりました。
jpgに関してはtinyPNGのほうが小さくなりました。
ただ、圧縮率を調整すればsquooshのほうが優れてる場合もありそうです。
画質に関しては・・・差がわかります？？
どれも元データをアップしてあるので興味のある人は比較してみてください。

また、新しいwebPは優れていそうですね。圧倒的に小さい。
tinyPNGは画像を大量に処理できるのが優れているのでまだまだ使うことになりそうです。

SSL対応といっても実はめんどくさいんです。
最初からSSLのURLのみのサイトを構築するのが一番楽かなぁと思います。

しかし、そんなケースばかりではなく、いままで更新してきたサイトを対応させなきゃいけないと思います。
対応させる方法について書いてあるサイトは結構あると思いますが、「ちゃんと対応できているか」をチェックする方法について記載しておきたいと思います。

ダメなケース教えます！

　今回はChromeの表示です。

まず問題ないケースです。

○ 問題ないケース

このサイトです。しっかり鍵マークがついてますね。
次に問題があるケースです

× 非SSL状態

https:// という表示がなく、サイトURLからはじまり「 ! 保護されていません」となっている場合はそもそもssl化されていません。

× 非SSL かつ 危険が高いページ

これが一番良くないものです。非SSLのサイトで、ユーザーの入力欄がページ内にある場合にこのようになります。
お問い合わせフォームなどは暗号化しない状態でデータが送信されます。
すぐに改善しましょう。

× 非SSL化 ソースの混在

画像をよく見てください。https://の表示にも関わらず、ビックリマーク(!)がでてきてしまっています。

これはソースにhttp://のcssや画像が混ざってしまっているものです。
ソースを確認して、「https://」に書き換えるか、相対パスに変更しましょう。

× 盾にxなマークが右側に出る

これは、httpのままのJSソースが混ざっている可能性が高いです。
しかし、ブラウザでスクリプトのブロックを行っているので安全です。
格好悪いので運営者や制作者側は正しいソースを読み込んだり、非SSLのスクリプトは削除してしまいましょう。

× そもそも表示できない

これは、そもそもhttpsのサイトが存在しない。もしくはSSLの証明書が切れている可能性があるので、設定を見直しましょう。

× SSL化して表示も正常だが、http://のサイトも見れてしまう

これは、非SSLのサイトを観た時はSSLのサイトに飛ばすという設定を忘れています。
しっかりとリダイレクトするように設定しましょう。
また、wwwのあり、なしを統一して表示するのも合わせてチェックしましょう。

以上をクリアしよう！

SSL設定をちゃんと見直して、しっかりとSSL化対策をしましょう！

ワードプレスは、FTPでファイルを取っておけばOKと言うわけではなく、「データベース」についてもバックアップしておかなければなりません。

そのため、それらを簡単に、かつ定期的に自動で行ってくれるバックアッププラグインを特に理由がない場合ほぼ必ず導入します。

バックアッププラグインの紹介

今回紹介しませんがUpdraftPlusも有名です。
こちらは復元機能もあるので、より簡単に行いたい場合はこちらを選んでもいいかもしれません。

今回紹介するのは、上のBackWPup – WordPress Backup Plugind
です。

インストールの方法

BackWPupで新規プラグインから検索し、インストール、有効化しましょう。

使い方の流れ

1. 新規ジョブを登録（作成）します
2. 「ジョブ」からバックアップ作業を実行します。
3. 「バックアップ」からファイルをダウンロードします

ジョブとは

バックアップ処理でどのようなことを行うかまとめたものです。
これを実行することで、バックアップが行えます。
ジョブで指定するものは主に以下のものです。

何をバックアップするか

データベースとファイルにチェックが入っていればOKです。
初期状態から変更する必要はないと思います。

どこに保存するか

いろいろ選べますが
必ず「フォルダ」にチェックしましょう。
サーバーのuploadディレクトリに保存されます。
そして、dropboxにも保存しておくと安全です。
（サーバー自体が壊れるという被害の場合、フォルダ保存では不十分なためです）
ほかにも保存領域を追加できますので、サーバーとサーバー外部に保存場所を持っておきましょう。

dropboxの設定もする場合は連携処理も必要なので、dropboxのタブから設定してください。

エラーメールの送信先

何らかの原因でバックアップが失敗した際の通知先です。

スケジュールの設定　

いつ実行するかです。「手動」だとクリックしてあげないと動きません。
cronで日付を設定してあげるといいです。
頻繁に更新するようなサイトは毎日取ったほうがいいですし、たまにしか更新しない場合は月一程度でいいのではないでしょうか。

上記は週一での保存の設定です。

保存フォルダと何件保存するか

保存フォルダの名前と、何件保存するかを設定できます。
10にしておけば、毎週１回保存する場合10週前まで戻れるというイメージです。
大きい数字にするとサーバー容量を圧迫しますので、適度に削除すると良いと思います。古いデータは随時消えていきます。
大きな変更がある場合は手動でローカル保存するなどして対応すればそこまで大きい数字にしなくて大丈夫だと思います。

ドロップボックスなど、保存場所ごとに設定できるはずです。

データのダウンロード

バックアップデータはFTPでディレクトリから直接入手もできますが、管理画面のバックアップメニューからダウンロードも可能です。

データの復元

こちらのプラグインはデータの復元機能はありません。

ダウンロードすると、FTPでアップロードされている全ファイルとSQLデータが入っています。
このデータがあれば、サイトが丸ごと再現できます。
つまり結構危険なデータのカタマリです。
様々な重要データが含まれますので、第三者に観られたり盗まれないよう注意して厳重に管理してください。

.sqlがデータベース本体

ダウンロードフォルダの中に.sqlのファイルがあると思います。
こちらが「データベース」の本体となります。
ここに記事情報や、あらゆるものが含まれています。
サーバーのmysql管理画面から適切な箇所にインポートすることでバックアップ時の状態が再現できます。

その他のデータはFTPでアップロードしよう

画像や、PHPファイルなどはFTPで差し替えてあげればOKです。

とりあえずバックアップデータさえあれば何とかなる

復元方法がよくわからない場合も、制作会社等に復元を依頼すれば治ることがほとんどです。
なにはなくとも、バックアップを随時残しておくことをくせにしておきましょう。

時代遅れーな感じですが、ポッドキャスティングの方法です。
と思ったけど、Spotify や GoogleのVUIなどで地味に注目されてるみたいです。podcast。
youtubeに画像だけ表示したラジオを置いてたんですが、これ音声だけの方がええやん。
ということで配信開始を手伝ってあげました。

シンプルに言うとこういう仕組み

①mp3をサーバーに置く
②ジャケットの画像や、配信日、音声ファイルURLが乗ったRSS配信用のXMLを作成する。

端的に言うとやってるのはこれだけ。

とはいえ、XMLファイルはアップの度に更新しなきゃいけないし、諸々自動化するには、wordpressのプラグインを使う方法があります

Podcast配信に必要なもの

• 録音したオリジナルラジオのmp3
• ラジオのジャケット(サムネイル) 3000 × 3000 px が理想みたいです。
• wordpressサイト
• Blubrry PowerPress プラグイン

当然音声ファイルが必要です。画像は、他のポッドキャスト番組を参考にしてサムネイルを作成してみてください。
Podcast配信だけしたいけど、wordpressサイトはない！と言う人は以下の記事を参考にしてください。

Xdomeinだと容量が足りない可能性あります。
同じ会社の本格サーバー「エックスサーバー」がおすすめです。

プラグインをインストールしよう!

ポッドキャスト配信のプログラムである、Blubrry PowerPressをインストールし、有効化します。

すると、管理画面のメニューに項目が表示されるので「settings」から設定をしていきましょう。

上記の必須事項の設定程度でとりあえず問題ないと思います。

ポッドキャストを登録しよう。

通常の投稿画面の下の方に設定欄が追加されていると思います。
メディアからmp3を追加し、投稿画面からファイルのURLを入力し投稿しましょう！

　投稿画面からURLを入力し投稿！
タイトルと記事内容が配信フィードにも反映されるのでしっかり入力しましょう。

配信URLはどこ？

まず上記のリンクからアドバンスモードにします。

Feedsタブの 上記のURLが配信URLになります。
 https://onobenriya.com/feed/podcast

そして、クリックやタップで登録して欲しい時は
pcast://onobenriya.com/feed/podcast
または
itpc://onobenriya.com/feed/podcast
こんな感じでリンクを貼ると、podcast登録画面がpcやスマホで立ち上がるみたいです。
ちなみにこちら、自分が手伝ってる小野便利屋のラジオなのでぜひみなさん聞いてみてください。

いろんなサービスで配信する

以上でポッドキャスト配信自体はできるんですが、itunesやSpotifyやGoogleなどのポッドキャストとして配信できるみたいですよ。

Google

検索に引っかかるものであれば登録される可能性があるようです。
なのでここまでの設定でOK。

Spotify

プラグインのメッセージ欄にすごくでてきますが、Blubrryのサービスと連携すると配信できるっぽい？です。
料金や連携方法などここではふれませんが、試してみてはいかがでしょう。

iTunes

 https://podcastsconnect.apple.com/
上記サイトから申請して、審査に通ると配信されます。
AppleのIDが必要です。

最後に

以上で、podcast配信の説明を終わります。
ぜひおもしろいラジオを配信してみてください！

こんな感じでーす。

目標は63kg
そして、腹まわりの脂肪をなくすことです。

お腹のお肉はまだ脇腹に少しついてますが、なんかみっともないなぁという段階は脱したと思います。
体重に関しては63kgを達成した日が1日あります。
体重 4.1kg減　
体脂肪率は20.7% から17.6%になりました。

２ヶ月弱でこれくらいならそこそこなのでは。

筋肉つけると体重は増えるみたいなので、そんなにこだわらなくてもいいのかな、ともおもいます。
体脂肪率は家庭用の計測だと結構誤差があって信用できないらしいですが、毎日計測してるとちゃんと減る傾向にあるのがわかるのでいいですね。

効果があったダイエットについてまとめる

けっこう飽きやすいので、時期によって微妙にやってることが異なります。

体重の記録

これが一番大事なのではないか？
太り出したら危機感を覚えるので、この習慣だけは絶対に守り続けたいと思います。
記録を取りやすいスマート体重計を取り入れるなど、簡単に体重をとる工夫というのもあるので試してみてください。

全身鏡をみる

体重だと意外と人は諸々認識できないみたいなので、全身、もしくは半身を写せる程度の大きさの鏡を体型を見れる場所に設置しておくべきです。
上の体重の記録と合わせて行うと効果的です。
また、太ってる時の服とかをたまに着るとモチベーションが湧きます。

ZOZOスーツもよかったんだけどなー

残念ながらZOZOさんZOZOスーツをやめてしまうみたいですね。
確かに気軽じゃないですもんね。
体型の記録としてはけっこう優れてると思うので、機能として残してほしいなーと思うけれどいずれ消えてしまうのだろうか・・・。

プチ断食

ダイエットの最初の方でこれをやるのは絶対に効果があります。
ネット検索すると水と塩だけで3日間すごす方法が出てくると思いますのでそれらの記事を参考にして行なってください。

多分適当にやると健康に悪いので気をつけましょう。断食道場なんてものもあるみたいなので、そこで指導を受けるのもいいかもしれません。

なぜ効果があるの？

人間のエネルギー消費システムは「糖を消費するもの」と「脂肪をケトン体に変えて消費する」というものがあるそうです。
普段の生活だと、炭水化物や砂糖などを摂取する機会がおおいので前者の仕組みが使われます。
断食によって炭水化物と糖（以下糖質とする）を絶つとすぐにエネルギー不足になります。
一番エネルギーを食うのは脳らしいです。
そうなると人体は危機感を感じて、エネルギーシステムを後者に切り替えます。
そうすると、脂肪をエネルギーに変換する仕組みを体が思い出すそうです。
なので、まず最初にこれを目覚めさせる作業をするのが良いです。
ただ、あんまりやりすぎると筋肉がエネルギー消費に使われてしまったり、生命維持の機能が働いて体力温存のために逆に痩せにくくなったりするそうです。

ナイシトールの服用

ある程度痩せたけど、腹の肉が消えなくて気持ち悪いなぁと思っていた時に服用しました。
下痢になり、体がなんとなく暑くなる感覚などがありました。
なので、人体には何かしらの影響を与えてるのは確かだと思います。

お腹の脂肪を燃焼する、と書いてあるように腹肉はここで結構減った気がします。
自分の場合は下痢がきつすぎて途中で服用をやめました。

なんか腹だけ落ちないなぁという人は試してみるといいと思います。
運動もすると効果が大きくなるそうです。

糖質制限

食べるの大好きで、毎食食べるもの変えないと飽きちゃう！炭水化物大好き！
という人はあんまり向いてないダイエットです。
自分は割と同じものを数日間しばらく食べて、それから飽きるという長いスパンで飽きがきますので、結構あってます。

実行にあたっては基礎的な知識が必要なので、糖質が含まれていない食品を覚えてください。
カロリー制限はないので、お肉とか魚とかはお腹が空けばいっぱい食べて大丈夫ですし、野菜も食べたい人は摂って大丈夫です。

ごはんより肉や油食ってたいなぁという気持ちもあります。
でもこの食生活って、みんながしだしたら世界が食物不足になりそうだなーという不安がありますね・・・。

炭水化物減らすとすごく体調がいいので、本来は理にかなった食事なのだと思います。全くゼロにしてしまうと、筋肉が減るらしいので少しは炭水化物を摂取した方がいいみたいですよ。

なんか心と体がいつもだるい感じがする・・・という人は糖質制限や砂糖断ちを試してみるといいと思います。
食欲も減るし、砂糖もそんなに欲しくなくなりますよ。
（合わなかったらやめればいいのです）

あ、結局偏食ではあると思うので、マルチビタミン剤を飲み始めました。
これに関しては体調の変化がよくわかりません。
悪いな、という日が少ないので効果があるのかもしれません。
あと亜鉛ものんでます。(亜鉛は効果があるのがわかりやすい。どんな効果かは秘密だ)

筋トレ

運動はあんまりしないタイプなので、やっても続かんだろなということでジョギングなどは取り入れてません。室内でできるストレッチや筋トレに関しては気が向いた時にやるようにしています。

筋トレって、毎日やればいいわけではないので、習慣を作るのが難しいなぁと思います。

体調がよくて、筋肉痛を感じなくて、時間があまってるな
というときにやってます。
本当は週一でジムとかに行った方がいいんだろうなぁ。

内容的にはスクワットが一番効果があると思います。
３０日スクワットチャレンジとかが有名です。
男の体型は肩幅、胸周辺をがっちり、腹筋周辺はスマート
がいい感じに見える体型みたいですよ。

胸筋周辺を鍛えると見た目の印象がよくなるみたいなのでそこらへんも重点的にやると体格がよくなります。

筋トレに関しては基礎代謝を増やす、筋肉を見た目的に増やす、食欲を抑制するこの辺を目的に行うと良いと思います。

短時間で心臓ばくばくさせるほど動くと脂肪が燃えるって方法もあるので脂肪燃焼目的でやるのはそう行った運動にした方がいいと思います。

ダイエットは継続できるものを選ぼう！

一定期間やってやめる をしてしまうと絶対にリバウンドします。
なので、ながーく続けられるものにした方がいいです。

炭水化物ダイエットであれば、炭水化物ほぼゼロ → 体重が安定したら制限を少しゆるめる
という風に目標を達成したら段階的にやめていくのはありだと思います。

リバウンドはしてしまうと、痩せにくい体になるうえ、元の体重よりふえてしまうのです。気をつけましょう。中途半端なダイエットならば始めない方がいいということです。

飽きないように新たなダイエットを取り入れています。

いま興味があるのはバターコーヒーダイエットです。
食べない時間を増やして1日食にすると、食べない時間に痩せていく。
一食は好きなものを食べていい。（ダイエットしてる人は糖質制限してもいい）
というものです。

将来的にはそんな食生活がいいなーと思っています。
炭水化物をずっと食べないのはあんまり現実的じゃないなと思いますし。
（量を減らし続けるのは大いにありだとおもいますが）

２食は食欲を抑えられ、かつ太らないものでやり過ごす、というのは結構いいなと思っています。

ただそれって別にバターコーヒーじゃなくてもいい気がしています。
それに、今絶賛人柱な分野だと思うので
バターコーヒー がめちゃくちゃ体に悪いから痩せてた、という可能性もなくはないというのは考慮しておいた方がいいと思います。

まぁ、糖質制限の理論でいくと脂質は体に悪いものではないので悪くないきはしますけどね。わかりませんよ。

バターコーヒー 以外にも「手軽に取れて満腹感があり、太らない」そんな食品が次々に開発されていくのだと思います。

食品メーカーの人はチャンスだと思いますので、食糧生産的に継続性と将来性のあるもので上記を満たせる商品を期待していますよ！

ZOZOスーツで比較してみた

gridmanもやってますからね。

参考サイト

 http:// https://qiita.com/kura07/items/e633b35e33e43240d363

CSS Gridについて大雑把に説明する。

ちゃんと説明したいんですが、ちゃんと説明すると奥が深すぎるのでとても乱暴に説明したいと思います。

なんか、便利なテーブルみたいな感じ

指定方法が異なる柔軟なテーブルみたいな感じですね。
テーブルとは違い、余計なタグが非常に少なく、並び順もFlexboxのように自由に入れ替えができます。
しかもFlexとは異なり、二次元的に入れ替え可能です。

最初に概念を紹介します

まず用語を紹介しなきゃ始まらねぇ。

コンテナとアイテム

これはflexと似たような感じですね。

外側の囲ってるのが「コンテナ」その直下の要素が「アイテム」になります。

<div id="container"> <!-- コンテナ -->
     <div>1</div> <!-- アイテム -->
     <div>2</div> <!-- アイテム -->
     <div>3</div> <!-- アイテム -->
　　　　　　　　　　　<div>4</div> <!-- アイテム -->
</div>

こんな感じ。

ライン / セル / エリア / トラック　に関しては多分上記のような感じ。

どんなことができるの？

Froat Flex の代わりにできると思われます。
Table にも似てますので、Tableタグの代わりに利用する場面もあるかもしれません。

よくある、サイドバーがある２カラムのサイト、３カラムのサイトのheader,footer,navなどの配置にも使えるでしょう。

当然gridでレイアウトしてないですが、上記のようなナビゲーション等の箱配置にも使えるでしょう。

上記はストリートビューのサイトですが、このように不定形なboxが並んでいるようなレイアウトも可能です。2倍の高さとかそういった感じの方が得意そうですが。masonryのようなレイアウトもできると思います。

記事が並んでいたり、今floatやflexで実現しているレイアウトはだいたい代替可能なんじゃないかと思います。

それでは使い方の流れを解説します。

グリッドはまず、設計を最初にする必要があります。
構造にあった、セル/トラックのサイズを定める必要があります。
マス目を引くイメージですね。

こんな感じに3分割の画像付きの記事が並んで行く構成の場合です。

<style>
.container{
display:grid;
grid-template-columns: 1fr 1fr 1fr; /* 単位fr はセルを基準とする。指定のない部分で自動で割り振ってくれるイメージ */
/* または */
grid-template-columns: 33.3% 33.3% 33.3%;
}
</style>

<div class="container"> <!-- コンテナ -->
<div class="item"></div> <!-- アイテム-->
<div class="item"></div> <!-- アイテム-->
<div class="item"></div> <!-- アイテム-->
<div class="item"></div> <!-- アイテム-->
<div class="item"></div> <!-- アイテム-->
<div class="item"></div> <!-- アイテム-->
</div>

上記のような感じです。横に３等分なので、３つの値を指定してます。

セルの高さと個数の指定をしたい場合は

display:grid;
grid-template-rows: 10px 10px;

これで10px で縦に2つですね。

両方指定するとこんな感じになります。

位置の指定をしよう

アイテムはセルの中で自由に配置できます。
指定の方法はアイテムにclassやidをつけ個別に位置を指定していきます。

上記画像の場所に指定してみましょう。

<style>
.container{
display:grid;
grid-template-columns: 33.3% 33.3% 33.3%;
grid-template-rows: 30px 30px;
}

.item{
grid-column:2;
grid-row:2;
background:red;
}
</style>

<div class="container"> <!-- コンテナ -->
<div class="item"> わたしです！ </div> <!-- アイテム-->
</div>

こんな感じ
grid-column / grid-row で２行目2列目を指定しています。

次はこんな感じ

<style>
.container{
display:grid;
grid-template-columns: 33.3% 33.3% 33.3%;
grid-template-rows: 30px 30px;
}

.item{
grid-column:3 / 4; /* 3から4まで */
grid-row:1 / 3; /* 1から3まで */

/* または */
grid-column:3 / span 1; /* 3から「長さ1」 */
grid-row:1 / span2; /* 1から「長さ2」 */

background: red;
}
</style>

<div class="container"> <!-- コンテナ -->
<div class="item"> わたしです！ </div> <!-- アイテム-->
</div>

こんな感じで　1/3　まで占有！
2から 長さが　２！　みたいな指定ができます。

エリアに名前をつけて指定する方法

上記のライン数値の指定だけでなく、エリアに名前をつけて指定する方法があります。
これはheader , footer , ナビゲーションなどのHTML要素がかっちり決まってるサイトで非常に有効に使える方法ではないかと思います。
この方法を用いてテンプレートを作ったり、CMSに組み込んだりするといろんな可能性が広がる気がしています。

しかし、HTMLソースは綺麗にできそうですが、CSSと組み合わせると傍目からどう作ってるのか察しづらくなる懸念があるなーとちょっと思っています・・・。

こんな感じの、よくありそうな感じを構築してみます。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
display:grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 60px 1fr 60px;

/*セルに名前をつけます*/
grid-template-areas:
"header header"
"nav main"
"footer footer";
}

header{
    grid-area: header;
    background: #a88d8d;
}
nav{
    grid-area: nav;
    background: #9e9fbf;
}
main{
    grid-area: main;
    background: #eacccc;
}
footer{
    grid-area: footer;
    background: #a88d8d;
}
</style>
</head>
<body>
<header>ヘッダーだよ</header>
<nav>ナビだよ</nav>
<main>メインだよ</main>
<footer>フッターだよ</footer>
</body>
</html>

うわーHTMLがめちゃくちゃ明快です！

レスポンシブはどうする？

gridを再設計するだけでいいっぽいですね。
これはちぐはぐなコンテンツ入れ替え要望にも結構簡単に答えられちゃうのでは・・・？？？

こんな感じの変化をさせてみましょう。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
display:grid;
grid-template-columns: 200px 1fr;
grid-template-rows: 60px 1fr 60px;

grid-template-areas:
"header header"
"nav main"
"footer footer";
}

@media screen and (max-width: 768px){
body{
display:grid;

/* セルの設定し直し！ */
grid-template-columns: 1fr;
grid-template-rows: 60px auto 60px auto;

grid-template-areas:
"header"
"main"
"footer"
"nav";
}
}

header{
    grid-area: header;
    background: #a88d8d;
}
nav{
    grid-area: nav;
    background: #9e9fbf;
}
main{
    grid-area: main;
    background: #eacccc;
}
footer{
    grid-area: footer;
    background: #a88d8d;
}
</style>
</head>
<body>
<header>ヘッダーだよ</header>
<nav>ナビだよ</nav>
<main>メインだよ</main>
<footer>フッターだよ</footer>
</body>
</html>

こんな感じ！
これは・・・柔軟性もあり一度ちゃんと設計しちゃえばわかりやすいかも。
ぜひ参考に試してみてください。

woocommerceでstripeを実装したいので、調べたことを記載したいと思います。

参考にしたサイト

ストライプとは

woocommerceでクレジット決済するやつです。
普通のサイトでもできんのかな？
今回はwordpress + woocommerce の環境です。

クレジット機能を追加していきましょう

今のところの疑問

• テスト環境と本番環境って何？
• いくら手数料かかるの？

アカウントをとって、キーを取得します。

アカウント作成はメールアドレスだけでよかったです。
本番環境を使うにはいろんな情報を入れなければならないようですが、試しにテスト環境使うにはこれでよさそう。

あれ？これでテストもーどにしとけばテストできちゃうのかな？

決済してみよう！

テストモードにチェック入れて「カード番号：4242 4242 4242 4242」にするとテストで買い物ができちゃうみたいです。(コードと期限は適当でOK)

やってみたら、ちゃんとstripeホームページに反映されていました！

本番環境に以降するときはまた追記します。(11月後半ごろ)

原因はおそらく、断定できませんがwi2connectアプリだと思われます。
Mojaveに対応してないのかもしれません。

wi2のネットワークが使いたかっただけなのですが、wi2connectアプリをインストールし接続したら様々な不具合が発生しました

発生した事象 → wifiアイコンがなくなる・・！

※復旧の過程で画像が消えました・・・
wifiはハードウェア的に認識されているにも関わらず Wifiのアイコンが「ハードウェアなし」の表示になってしまう。
つまり、wifiに全く接続できなくなってしまった。

付随して発生したトラブル

ネットワークに接続できないのに加え、
・タイムマシンのバックアップができない
・環境設定のネットワーク設定がおかしくなる
・新たにユーザーを作るとセットアップの途中でとまってしまう。

などなどわけわからんエラーが。

しかし、command + Rで起動すると出てくるOSリセットの画面だとwifiが動くため、ハードウェア的には正常に動くことが確認できました。

やった対策

・smc リセット
・nvram リセット
・セーフモードブート

いずれも効果なし！これはひどい

最終的に治った対応

結局、OS再インストールがいいというのが調べた結果でした。
しかし流石にそれはめんどくさいので最新の　タイムマシンバックアップデータから復元しました。
*command + Rで起動すると出てくるOSリセットの画面 から復元

復元しないと解決しないと思われるエラーだったので非常に厄介でした。
apple storeに持ってくのもいいと思います。
断定はできないのですが、しばらくwi2の利用は控えたほうがよいかもしれません。

それと、バックアップデータがOS更新前だったのでHigh Sierraに戻りました。

パソコン変えて、ちょっと前のデータからクローンを行ったのでちょっと設定をやり直す羽目になりました。
健忘録としてメモっておきます。あんまりカスタマイズしない人なので最小限の設定が好きです。

日本語にする

上の画像のマークがプラグインになります。
初期状態は日本語ではないので日本語をプラグインを入れましょう。

HTMLプレビューができるようにする

PHPなどの開発だといらないんですけど、ブラウザプレビューが簡単いしたい場合は入れておきましょう。
ファイルを右クリックでプレビューできるメニューが出てきます。
ショートカットも使えます。(忘れるから使ってない)

GITをインストールする

git関連機能を使おうとすると右下にウインドウが出てきますので、そこからインストールしちゃいましょう。

https://git-scm.com/

Node.jsをインストールする

https://nodejs.org/ja/

node.jsもいろんなところで使うことになるのでとりあえずインストールしておきましょう。

折返し設定

　初期はソースを折り返さないで表示するようになっていると思います。
個人的には気持ち悪いので、折り返す設定に変えます。
　表示 　→　折返しの切り替え
ショートカットは option(alt) + Z　です。

ftp-sync

ftp接続がソフトなしでできます。
設定ミスると怖い機能なのでは？？と思いつつ使ってます。

command(Ctrl)+Shift+P　から使えます。

command(Ctrl)+Shift+P　から
ftp-sync : init
で設定ファイルができます。（gitを使ってる場合は.gitignoreに.vscodeを追記しておく）

　各種情報を入力します。

最初に入っている「./」の場所は、桜サーバーの場合
/home/[アカウント名]
のディレクトリでした。

なので「./www/xxxxxx/xxxxxxxx」(wwwが公開フォルダ)
の形で設定をいれてあげるとうまくいきます。

現実的な対応

さくらサーバーは上記でうまくいきますが、サーバー会社により設定がまちまちな感じなので、
空のlocalフォルダでftp-sync設定をして、設定”./”の状態で remote to local でファイルを落として、どこのディレクトリがルートか探るのが現実的かと思います。

全角スペース表示の設定

https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku

これをいれます。

自動整形

これ大事です
https://qiita.com/syo_nasu/items/e03cbcd09c5aba23e92e