今回は、MacにWindows10をインストールする方法を解説します。

mito

開発環境の構築のため、Windowsが必要になり、もう一台買うか・・と悩んでいたところこの方法を見つけたので早速試してみました。

momo

Macの中にWindow環境を作れるのでPCは1台。お値段も「Windows10（オンラインコード版）」の1万7926円のみ！

Macを使っているけれどWindow環境も必要になった方にオススメの記事です。

mito

私の使っているPCはこちらです！

https://mito-lab.com/work-tool-pc/

それでは設定方法を解説していきます。

Macのスペック確認

Apple公式ページに、Mac に Windows 10 をインストールするために必要なものとして、以下が書かれていました。

• MacBook (2015 年以降に発売されたモデル)
• MacBook Air (2012 年以降に発売されたモデル)
• MacBook Pro (2012 年以降に発売されたモデル)
• Mac mini (2012 年以降に発売されたモデル)

• iMac (2012 年以降に発売されたモデル)¹
• iMac Pro (すべてのモデル)
• Mac Pro (2013 年以降に発売されたモデル)

Mac の起動ディスクに 64 GB 以上の空き領域。

• Mac に最低 64 GB の空き領域があればインストールできますが、128 GB 以上の空き領域を確保しておけば、快適に利用できます。Windows の自動アップデートには、それ以上の容量が必要になります。
• iMac Pro または Mac Pro のメモリ (RAM) が 128 GB 以上の場合、Mac の搭載メモリと同量以上の空き領域が起動ディスクに必要です。²

mito

まず自分のMac環境にWindowsをダウンロードできるかどうか調べます。

Windowsを用意

Amazonで「Microsoft Windows 10 Home Anniversary Update適用 32bit/64bit 日本語版 (最新) |オンラインコード版」を購入

mito

すぐ使いたかったのでオンラインコード版にしました。

必要なのは、プロダクトキーのみ、USBやDVDの用意は不要でした。

windows10 ダウンロード

注文履歴の「ダウンロードライブラリへ」へ遷移し、指示に従い、ダウンロードを開始します。

mito

windows10、64bitをダウンロードしました。

ダウンロードフォルダにダウンロードされていることを確認。

momo

ダウンロードは完了だよ！

BootCampアシスタント起動

BootCampアシスタントを起動し、Window環境を作っていきます。

BootCampアシスタント.appを起動する

ファインダー＞アプリケーション＞ユーティリティフォルダを開きます。

BootCampアシスタント.appをダブルクリック

mito

以下、画面メッセージに従い進めていきます！

Windows パーティションを作成する

ISOイメージは先ほどダウンロードしたisoが設定されていることを確認

Windowsの容量をこの設定で決めます。

momo

この容量は後から変更はできないよ！

mito

今回、簡単な開発環境を作りたかったので少し大きめの容量として80GBを設定しました。

Appleサポートセンターの方に問い合わせたところ、Windowsの容量を増やすと、Macの動作が重くなるということはないそうです。ただ、Macに保存できる容量が減るということでした。

パーティション決定後「インストール」を押すとインストールが開始されます。

mito

30~40分かかるので気長に待ちましょう。

インストール後は自動で再起動されます。

Windowsのインストールと初期設定

Windowsの初期設定

再起動後はWindowの画面となっています。

mito

当たり前ですが、待ち時間のマークもWinマーク！

画面に従い、言語やキーボードなどの設定をしていきます。

プロダクトキーの入力

momo

このタイミングで購入時のプロダクトコードが必要になるよ！

Windowのインストール

プロダクトキーを入力後、インストールが開始されます。

しばらく待つと….

mito

なんとびっくり！Windows環境の完成です！

 MacとWinの切り替え方法

一昔前は、Boot Campから切り替えができていたそうですが、2020年現在は電源を切る、または再起動でしか切り替えができません。

Windowsのアンインストール(おまけ)

BootCampアシスタント.appを立ち上げます。

画面の指示に従い、「次へ」を押し、以下の画面で「復元」を押します。

momo

これで、Windows環境は削除されます。うまくいかない場合は、この方法でアンインストールし、再度インストールを試してみてね！プロダクトキーは何度も使えるよ！

先日、久しぶりにGoogle Adsenseにログインしたところ、お知らせに「PINコード情報を郵送しました」とあり、なんのことだろう？と思って調べて登録しました。

今回は、自分の覚書も兼ねて、収益がではじめた方向けに「PINコード」の設定方法をご紹介します。

PINコードとは？

PINコードは、アドセンス広告で発生した収益の支払先（住所やアカウント）が正しいものかどうかを判断するための個人識別番号です。

momo

「ブログで広告を掲載して得た収益を受け取るために必要な情報」だね！

PINコードはどういう人に届くの？

Googleアドセンスの審査を通過し、いざ広告掲載が始まると、収益確定額が1000円を超えた時点で「PINコード」が発行されます。

mito

Googleアドセンスの審査を通過したからといってすぐに届くものではないんですね。

momo

このブログは初めてすぐに収益が発生したわけではないので忘れた頃に届いたよw。

mito

Googleアドセンスの管理画面は時々チェックしておくことをおススメします！

PINコードが届くかどうかはどこで確認できるの？

Googleアドセンスの管理画面から確認できます。

momo

PINコードがいつ発行されたかもわかるよ！

また、PINコードが届くまでには通常2〜4週間かかると書かれており、実際、手元に届いたのは4週間後でした。

momo

気長に待とう〜！

PINコード登録の仕方

手元に20cm×14cmほどの大きさの封書が届きます。

momo

そこに記載されているPINコードをGoogleアドセンスの管理画面に入力するだけ！

設定のアカウント情報から登録します。

銀行口座の登録

「設定」の上の「お支払い」から登録します。

メールを確認

このようなメールが届いているかと思います。

momo

自分の口座にGoogleからデポジットが支払われるよ！

mito

この後は以下のような手順になっています！

1. 登録した自分の口座にGoogleからデポジットが支払われる。※私の場合次の日の朝に14円振り込まれていました。
2. この金額をアドセンスの「お支払い方法」の画面の「確認」部分にあるフォームから送信する。プルダウン方式で数字を選べます。
3. 銀行口座が確認され、使えるようになる。

ここまでできたら設定完了です！

まとめ

PINコードは封書が届くで少し時間がかかります。

それから、Googleアドセンスの管理画面にPINコードを登録したら終わりではなく、銀行口座の登録とデポジットの確認が必要となります。

mito

PINコード発行までが1000円、実際の振込発生は8000円、となっているので、この段階で収益発生というわけではないのです。

momo

気長に続けていこう！

今回は、FileZillaを使ってサーバーアクセスしようとした際に530エラー！！

mito

どのような方法で接続できたか備忘録として書きます。

目的

WordPressのステージング環境構築をするために、本番サーバーへFileZillaから接続してファイルをダウンロードしたい。

問題

530 Login incorrectエラーで接続を拒否されてしまう。

試したこと＆確認したこと

契約プランの確認

契約プラン上、FTPで接続できない場合があるようです。
FTP接続無制限であることを確認しました。

ログイン情報の確認（意図しない改行や空白が入っていないか）

530 Login incorrectエラーのほとんどの原因はログイン情報(IDやらパスワードやら)の入力ミスだそうです。

momo

入力情報に間違いがないか、改行や空白を含めて確認しよう！

DNSのキャッシュクリア

それでもダメなら・・ということでDNSのキャッシュをクリアしました。

mito

それでも上手くいきませんでした。。

IP制限を確認する

海外のIPアドレスの場合はFTP接続を制限するなどという設定ができるようなので確認しました。

mito

国内IPとして認識されるはずなのでこれも原因ではなさそうです。

別の回線で接続する

何らかの原因で接続過多になっていることを考え、別の回線(ポケットwifi)で繋ぎましたがダメでした。

今回の解決方法

クイック接続を試すと接続できました。

momo

1つのツールに固執せず、Cyberduckなど他のFTPソフトを試すという方法もあるね！

mito

実際、別のサーバーに接続する際にFileZillaでは接続できず、Cyberduckなら接続できるということがありました。

今回はコーディングのスキルアップのために挑戦している#30DAYSトライアルの記録を書きます。

30DAYSトライアルは、独学を前提としたプログラミング学習プログラムです。

#30daysトライアルとは何？どうやって始めるの？といった疑問をお持ちの方、こちらをご覧ください。

mito

30DAYSトライアルの2ndステージ。いよいよ後半です。

momo

2ndのDAY17~26はxDのデザインカンプからコーディングしたサイトにアニメーションをつけていったよ！

#30DAYSトライアル #2nd

2nd DAY16
一通りできた！！（と思う。）バッチリ仕様通りではないので完成度は70%くらいかな。
余裕がなかったので余裕がある人向け課題はほぼできず＞＜。
レスポンシブでの余白が微妙だな〜とかは少しずつ直していきます。 pic.twitter.com/frBC6iU5ce

— mito@ひよっこwebデザイナー (@mito_works) September 24, 2019

mito

この10日間で学んだことや気づきをまとめます。

twitter投稿でふりかえる10日間の学び

twitterで投稿していた内容をまとめました。
どんなことが学べるのかの参考になれば幸いです。

DAY17『マウスホバー時の動きを付ける』

#30DAYSトライアル #2st

2st DAY17 アニメーション
ずっと気になっていた画像にホバーすると少し拡大になるあの動き、簡単に実装できることがわかって使いたくてうずうずする！！

— mito@ひよっこwebデザイナー (@mito_works) September 27, 2019

DAY18. 『Webフォント、デバイスフォントを理解する』

#30DAYSトライアル #2st

2st DAY18 Webフォント、デバイスフォント
Webフォントって重いんだ！知らなかった。

デザインする時フォトショの中にあるフォントからデザインのことだけ考えて選んでいたけど、デバイスフォント、Webフォント、画像どれにするか決めてデザインするようにしようと思う。

— mito@ひよっこwebデザイナー (@mito_works) September 28, 2019

DAY19. 『コーディング後の品質を担保するテスト』

#30DAYSトライアル
2st DAY19
昔、プログラミングをしていた時、テスト仕様書作って、すべての分岐を通るように単体→結合と細かくテスト＆キャプチャも全部残してたんですが、HTML、CSSのコーディングは厳密にテストしないんだな〜と勝手な印象があったけど、プロはやっぱりそんなことないですね。

— mito@ひよっこwebデザイナー (@mito_works) September 29, 2019

DAY20. 『スライダー（カルーセル）を作る』

#30DAYSトライアル
2st DAY20

ウィンドウ幅いっぱいのスライダーをslickで実現。
「ウィンドウ幅いっぱい」という指定に苦戦しました。
ダウンロードしたjQueryもそのまま使うのではなく、scssを変更すると個性が出るなと。 pic.twitter.com/UCNEeb0n6k

— mito@ひよっこwebデザイナー (@mito_works) September 30, 2019

jQuery、ダウンロードしたまま使うのではなく少しコードをカスタマイズして色や形を変えると印象が随分変わるのだなと思いました。

DAY21. 『スクロールに応じて要素を「フワッ」と登場させる』

#30DAYSトライアル
2nd DAY21

「WOW」ライブラリを使ってアニメーション。
こんなに簡単に、こんなにリッチな動きが実現できるなんてすごいなぁ〜。

そして動きが入るとそこに命が吹き込まれたみたいな気がして楽しい♪
色々試してみた結果「flipInX、rollIn」の個性的なアニメーションが好きです。 pic.twitter.com/50IJ3By0kn

— mito@ひよっこwebデザイナー (@mito_works) October 1, 2019

動きが面白いなと思い、ブログにも使い方を書きました。

https://mito-lab.com/jquery-animation/

DAY22. 『スマホ時のドロワーメニューを作る』

#30DAYSトライアル
2nd DAY22 ドロワーメニュー作成

最近ちょっとコーディングで遊べるようになってきた♪#1日1サイトレビュー でもよく見かける（気がする）PCでも丸いドロワーメニュー＆中身の背景グラデーション＆メニュー項目の左にアイコンも作ってみました！ pic.twitter.com/bbb2acD86F

— mito@ひよっこwebデザイナー (@mito_works) October 2, 2019

メニューは特に“今の流行り”が一番反映されやすい部分だと思います。
色々なサイトを見てコーディングのストックを増やしておきたいです。

mito

この辺りから徐々に課題をこなすだけではなく、真似したいサイトを見つけて自分で再現してみるというような遊び方ができるようになりました。

DAY23. 『スムーススクロールとフローティングアイテムを作る』

#30DAYSトライアル
2nd DAY23 ページ内リンク

Bootstrapや人のソースでページ内の各コンテンツの一番外側のdivまたはsectionにoffsetというクラスがあって、「一律、上幅調整するためかな」って思ってたんですが、「スムーススクロールの時にも効果を発揮するのか！」と分かって、朝から気分良し！

— mito@ひよっこwebデザイナー (@mito_works) October 3, 2019

#30daysトライアルと並行して模写も行なっています。
そこでの学びとここでの学びがリンクした日でした。

https://mito-lab.com/float-biginner/

DAY24. 『ページ内リンクでクリックした要素に対して下線を引く（クリックイベントの処理）』

#30DAYSトライアル
2st DAY24：クリックした要素に下線。
boostnoteにもストック。

画像も一緒に貼れると嬉しいな、できないので文字やハッシュタグで補足書いてすぐ欲しい情報にたどり着ける工夫をしてます。
ipadとかiphoneもアプリがあって見れるといいなと欲張りなことを思ったり・・。 pic.twitter.com/NvOoXnLwq8

— mito@ひよっこwebデザイナー (@mito_works) October 4, 2019

コーディングをするだけでなく、次回同じようなコーディングをするときに使えるようにBoostnoteにコードをメモしています。

mito

時間が経つとすぐ忘れてしまうので、すぐに参照できるメモをストックしていると時間の短縮になります！

DAY25. 『Q and Aをアコーディオンでコーディング』

#30DAYSトライアル
2nd DAY25：QAのアコーディオン
自分で意図的にmarginやpaddingを入れていなくても入っている場合が結構ある。px単位で意識して作っている気になるので、padding:0、margin:0、でリセットする方法よく使うようになりました。 pic.twitter.com/GnUCYYMzE1

— mito@ひよっこwebデザイナー (@mito_works) October 7, 2019

DAY26. 『モーダルを作る』

#30DAYSトライアル
2nd DAY26：モーダル画面
ゼロからとBootstrap使ったコーディング比較。
モーダル画面って、画面サイズ変わると収まらなくなったり、ズレたりするのでレスポンシブ対応がめんどくさいなと思っていて案の定ゼロからだとボタンずれまくりw。
Bootstrapを上手に活用しようと思う。 pic.twitter.com/apRosJwB2P

— mito@ひよっこwebデザイナー (@mito_works) October 9, 2019

Bootstrapの威力を感じました。
今後はコーディングするときにBootstrapを上手に活用して、コーディングを効率化しようと思いました。

10日間の気づき

脇道逸れると学びが増える！

このコードをbootstrapで書き直すとどうなるか？デザインや色味を変えるとどうか？動きをつけるとどうか？と色々試してみると、自分が知っている知識だけでは実現できないことがわかったり、使っているコードの理解が深まります。

Boostnoteがとても便利！

今までは、「あのときに使った書き方を参考にしよう」と思ったときに探すだけで一苦労でした。
Boostnoteに該当箇所だけ切り出してストックしておくと後々、参照がしやすく、便利です。

Bootstrapでレスポンシブのコーディングが楽になる！

やっとPCでの実装ができたと思っても、タブレットやスマホのレスポンシブ対応でつまずき、想像以上に時間を使ってしまうことが多々ありました。
Bootstrapをうまく活用し、PCを実装する段階からタブレットやスマホを意識した実装をしておくと、効率的です。

サイトの細かいパーツの実装方法が気になるようになる！

「この閉じるの×印、レスポンシブで画面幅が変わってもずれないのはどうやって実装しているのだろう？」や「ハンバーガーメニュー内の文字がシュッと出てくるアニメーションはどのように設定しているのだろう？」とコードベースで動きや要素が気になるようになりました。

シャドウ、グラデーションの実現方法が気になるようになる！

デザインの観点で、画像やボタンなどの外側のシャドウの入れ方、背景グラデーションの色味と角度などもコードベースで気になります。

mito

検証ツールをみる回数が増えました。自分でも使いたいと思ったものはBoostnoteにストックしています。

サイトを見たときにどの書き方の組み合わせかわかる機会が増える！

擬似要素を使って配置しているということや、flexを使っているなどどのようにコーディングされているか想像できる機会が増えました。

今後のスキルアップの方法

この10日間で基本的な実装方法は身についたのではないかと思います。

1. 「この書き方とこの書き方の組み合わせだ！」とわかるものについてはもっと早くコーディングできるように繰り返し使うようにする
2. 分からないものは覚えてストックしていく

momo

この二つを繰り返すのがいいね！

mito

しばらくは模写をして手持ちカードを増やしていきます。

今回は、サイトにお問い合わせフォームを設置する簡単な方法をまとめます。
お店やサービスサイトを作る際にお問い合わせフォームが必要なもの、多いと思います。

初めてお問い合わせフォームを設置したことを振り返るとそれほど難しくない、むしろ簡単だったのですが、初学者ならではの躓きポイントがありました。

mito

私が実際につまずいたところを中心にまとめます。

使用したお問い合わせフォーム

今回は、Perlで書かれたアンケートフォームや応募フォームとして無料で利用できるメールフォーム（エントリーフォーム）のCGIを使いました。

momo

レスポンシブ対応もされているよ！

設定1 : ダウンロード

コード一式、このページのダウンロードボタンよりダウンロードします。

設定2 : 設置したい場所にフィルダを作成し、ファイルをアップロードする

設置マニュアルに沿って設定していきます。

まずは、設置したい場所にフォルダを作成。
mailformというフォルダの配下に以下3つのフォルダとフォルダの中身を配置しました。

• iplogs
• mailformpro
• mfp.statics

設定3 : パーミッション（ファイル属性を設置する）

パーミッションとは？
ファイルごとに定義された、読み出し・書込みなどのアクセスに対する許可情報。
通常は、ファイルシステム内のファイルごとに、特定のユーザーやグループに対してアクセス権を設定しています。これによって、ユーザーごとのファイルシステムの見え方に影響を与え、ファイルシステムに対する変更を制限することができるものです。

mito

セキュリティの面から重要な設定なんですね。

momo

レンタルサーバーごとに異なるけれど、レンタルサーバーのコントロールパネルから設定するよ！

インフォパネルのご契約一覧を表示

ファイル管理を押し、ファイル一覧を表示します。

パーミッションの設定

マニュアルP27の以下を参照しながらパーミッションを設定します。

例えばmailformproのフォルダにパーミッション755をつける場合は以下です。

mailformproのファイル名右のチェックボックスにチェックを入れる

ファイル操作のパーミッション変更ボタンを押す

パーミッションを755へ変更し、パーミッション変更ボタンを押す

サーバによってはパーミッションの反映に半日以上かかることもあるので気長に待ちましょう！

設定4 : example.htmlにアクセス

正常に動作していますという旨のメッセージが出ればOKです。

設定5 : config.cgiの編集

必要な内容に合わせて編集します。

設定の注意点

基本的に説明書に忠実に進めると間違い無いのですが、途中エラーも出ないけれど動かなくて困ったのは以下の2つが原因でした。

mito

特にthanks.htmlは反応が遅く変更の反映に半日かかりました。

皆さんもぜひ設定してみてください！