クローゼの色々備忘録

仕事や私生活で学んだこと、ゲームの感想などを記録。お役に立てれば幸いです。

Mr.Taron Egerton の話していることを理解できるようになるために

Mr.Taron Egerton の話していることを理解できるようになるために

はじめに

  • タイトル謎でしたよね。単純に英語を聞いて理解できて話せるようになるためにということです。
  • 英語を勉強するモチベーションをキープできるのが、私にとって彼の存在なので。
  • クローゼの英語に関するスペック

    • 基本、洋楽や洋画が好きなので英語を聞く機会は多い
    • 大学時代、TOEIC(L&R)は最高で「590点」(確か、Lが400点でRが190点。先生にはバランスがおかしいと言われた..)
    • 全然勉強しなくなってTOEIC受けたら「430点」
    • 小中高大と全然お受験とかしてないし、一流のこと通ってる人からしたら低レベルの人間
  • 超苦手というわけでもないけど、英語を理解できて話せるほうがもっと色んな情報を集めれるようになるのでがんばろうかなと。

  • 仕事で英語を使えないとヤバイ雰囲気がやってきてますが、まずはTaronの言ってることを理解するのが先。
  • というわけで、なるべくムダにお金をかけないでどうやって英語を勉強していったか、記事はまじめに書きます(・_・)

一覧

  1. 単語を覚えるよりも前に大切なこと(そのうち公開)
  2. ~そのうち公開~
  3. ~そのうち公開~

ページの共通部分を別ファイルにして読み込む

ページの共通部分を別ファイルにして読み込む


はじめに

  • Webサイトだけに限りませんが、メンテナンスがしやすいような構成にしておく方が良いです。
  • 自分だけが使うならまだよいかもしれませんが、他の人もメンテナンスする場合は考慮しておいた方が良いです。
  • でないといつまで経っても自分がメンテナンスする羽目になり、自分がメンテナンスできなくなるとせっかく作ったもの自体使われなくなることになります。。それでは悲しい。

ページの共通する部分を決める

  • 前回、ページをどう分割するかは決めました。そのうち、今回は次のふたつを共通部分にすることにしました。
    • 「header」  → サイトのタイトル、メインメニューのボタン
    • 「contents1」 → サブメニュー(メインメニューを押した後にサブメニューを表示する)

f:id:yiris1127:20171111164442p:plain:w300

共通部分を作る

  • 共通する部分のページを作ります。常に表示されるサイトのタイトルだけ作ってみます。
  • ファイル名は「header.html」にしました。
<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" href="./style.css">
  <title>header</title>
 </head>
 <body>
  <h1>クローゼの色々備忘録</h1>
 </body>
</html>
  • ブラウザで開くとこんな感じです。

f:id:yiris1127:20171112223523p:plain:w300

共通する部分を読み込むためのスクリプトを記述する

  • 共通する部分を読み込みたいhtmlファイルの<head></head>内に以下のようななスクリプトを記述します。
  • 読み込みにはJavaScriptを使うのですが、コードを容易に書ける「jQuery」を使います。
  • jQueryの準備方法は別の機会に詳しく書きます。今回は、<head></head>内にjQueryをダウンロードしたものを使用するように記述しています。(パスは注意してください。)
  • 前回作成したファイル(index.htmlとして保存)を次のように編集してみます。
<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" href="./style.css">
  <title>ページ分割</title>

  <!-- jQueryの指定 -->
  <script src="jquery-3.2.1.min.js"></script>

  <!-- 共通部分の読み込み -->
  <script type="text/javascript">
    $(function() {
      // header.htmlをid属性「header」という名前で読み込むように指定する
      $("#header").load("header.html");      
    });
  </script>

 </head>
 <body>
    
    <div id="header">                 <!-- 前回分割したところ -->
      <div id="header"></div>         <!-- header.htmlをここに表示する -->
    </div>

 </body>
</html>
  • 「load()」を使ってhtmlファイルをid属性で付けた名前で読み込めるようにします。
  • 前回ページ分割をした<div id="header"> ~</div>の中に、<div id="header"></div>を記述してheader.htmlファイルを表示するようにしています。
  • 同じ名前にしたせいで分かりにくくなってしまいましたが・・・
  • ブラウザで「index.html」を開くとこんな感じです。

f:id:yiris1127:20171112231053p:plain:w450

  • うまく読み込めたようです。ちなみにローカルで開発している場合、私が確認した限りではブラウザはFireFoxかEdgeでないと正常に確認ができませんのでした。
  • 基本的にサーバー上で確認するほうが良いです。

余談

  • 背景に色を付けていたので気づきましたが、上下にmargin(約21px)が付いてました。
  • いったいどこに付いているのか・・・(・_・)そういうときはブラウザから「F12」キーを押して、左下にある「ページから要素を選択します」というボタンをクリックし、確認したい場所にマウスを持っていきクリックします。

f:id:yiris1127:20171112232701p:plain:w600

  • なんと、<h1></h1>に marginがついてました。デフォルトで付くんですね。(この辺のことも勉強しないと..)
  • 場所が分かればあとはCSSで調整すればOKですね。

まとめ

  • 共通部分はなるべく使いまわせるようにするのがやはり良かったです。修正箇所が少なくて済みます。
  • ブラウザ上で要素のチェックするのは便利です。しかもブラウザ上で直接編集してその場で表示確認もできます。ちょっとどうなるか試したいときは、ブラウザ上で編集する方が効率的です。
  • 共通部分を読み込ませる他のやり方はいずれ勉強しようかと思います。

ページをどう分割するか決める

ページをどう分割するか決める


ページを分割したときのイメージを考える

  • まずは、自分がオシャレだな、いいなと思ったサイトを参考にしてページをどう分割するかデザインしました。
  • こんな感じ。(実際はノートで手描きしてます。)

f:id:yiris1127:20171111164442p:plain:w300

  • 分割するときは何を載せるのか考えながら分けていきます。
    • header → サイトのタイトル、メインメニューのボタン
    • contents1 → サブメニュー
    • contents2 → メインコンテンツ
    • footer → リンク、コピーライト

基本のページを作る

  • HTMLで、基本となるページをひとつ作ってみます。
  • CSSを使いたいのでCSSファイルを読み込むようにしておきます。
<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" href="./style.css">
  <title>ページ分割</title>
 </head>
 <body>
  <!-- コンテンツ -->
 </body>
</html>

CSSで分割したページをデザインする枠を作る

  • 分割した部分それぞれのデザインを設定できるようにするために、CSSにid属性で枠を作ります。
  • 分割されていることが分かりやすいように、背景色をあえて指定しています。
#header {
 //headerのデザイン
  background: #e95388;
}

#contents1 {
 //contents1のデザイン
  background: #79c06e;
}

#contents2 {
 //contents2のデザイン
  background: #409ecc;
}

#footer {
 //footerのデザイン
  background: #864eb9;

}

ページにスタイルを指定する

  • 基本のページにスタイルを適用します。
  • <body>~</body>の部分が、上記で決めたように分割されるように適用していきます。
  • <div id="****"></div>を使って分割していきます。今回は左右に並ばないのでそのまま次々書いてます。
  • 中身が空だと何も表示されないので、何か適当に書いておきます。
<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" href="./style.css">
  <title>ページ分割</title>
 </head>
 <body>
    
    <div id="header">      <!-- header -->
      header
    </div>         
    <div id="contents1">   <!-- contents1-->
      contents1
    </div>      
    <div id="contents2">   <!-- contents2 -->
      contents2
    </div>      
    <div id="footer">      <!-- footer -->
      footer
    </div>         

 </body>
</html>
  • これで、htmlファイルを開くと次のようになります。 f:id:yiris1127:20171112010928p:plain:w450

  • あれ、最初のイメージと違ってそれぞれもっと高さが違うはずなんだけど。。と思いましたが、中身が増えれば高さもそれに応じて変わるので問題ありませんでした。

  • 問題は、上と左右にある余白。これを消したい。どうするか? CSSで、bodyにmargin「0」を指定します。以下を追記します。
body {
  margin: 0;
}
  • 次のように余白がなくなったと思います。 f:id:yiris1127:20171112010947p:plain:w450

  • bodyで直接書きたくない場合は、「id」か「class」で書いておいてもいいですね。

まとめ

  • まずは、何をどのように見せるかイメージを決めておくとコードを何度も書き直さなくて済みました。(前は良くコピーしてきて、見た目気に入らなくなったら書き直して、時間を無駄にしてました。。)
  • 使うかどうかは別としてイメージをつかみやすくするために、CSSでページを分割した範囲の枠を用意しておくと作業が楽でした。(背景色とかはあとで消せばいいですしね。)
  • 基礎は大切でした。

サイトを作るときに学んだこと

サイトを作るときに学んだこと


はじめに

  • プロのデザイナーではない私がWebサイトを作ることになりました。
  • 中身のレビューはするけどデザインは任せるから、という話になりとにかく勉強しながら作っていったのでその時のメモです。
  • プロのWebデザイナーではないので、間違いも多いかと思います。その点はご指摘いただければと思いますので、予めご了承ください。

一覧

  1. ページをどう分割するか決める - クローゼの色々備忘録
  2. ページの共通部分を別ファイルにして読み込む - クローゼの色々備忘録

オリジナルの3Dモデルを作りたい

背景

遊び大半で3Dモデルを作ってみることになった。
ゆくゆくはそのモデルを動かすところまでやりたいと思っている。
そのための手順をメモしていく。

PMDエディタをダウンロード

  • 以下のサイトからPMDエディタをダウンロード

http://kkhk22.seesaa.net/article/282933265.html

  • あれ起動しない!
  • なるほど、いくつか必要なランタイムをインストールする必要があるみたい
  • ダウンロードしたファイルのredomeに記載されてた

ランタイムをインストール

  • 使用環境は、Windows 10(64bit)
  • redomeに記載があったのは次のもの

ランタイム参考

  http://www.microsoft.com/ja-jp/download/details.aspx?id=17851

  http://www.microsoft.com/ja-jp/download/details.aspx?id=22

  https://www.microsoft.com/ja-jp/download/details.aspx?id=35&

  • Microsoft Visual C++ 2010 再頒布可能パッケージ (x64)

  http://www.microsoft.com/ja-jp/download/details.aspx?id=14632

  http://www.microsoft.com/ja-jp/download/details.aspx?id=5555

  http://www.microsoft.com/ja-jp/download/details.aspx?id=40784

  • そのうち、「DirectX」「C++ 2010(x64)」をインストール

起動してみる

  • UIがぐっちゃりしちゃったwww

f:id:yiris1127:20170903213903p:plain

  • Windows10だとカスタム拡大率とディスプレイの拡大率を変えればいいらしいけど、なんの設定にすればいいんだろう
  • 今の状態確認すると次のような設定になってた

f:id:yiris1127:20170903214043p:plain

  • テキスト、アプリ、その他の項目のサイズを変更する → 100% に
  • 解像度 → 1440×900 に
  • 一部のアプリはサインアウトしてサインインしなおす必要があるので、サインインしなおしてもう一度PDMエディタを起動
  • なんと、ちゃんと表示された
  • でもなんか他のツールがカクカクしちゃって嫌だな・・・(゜-゜)

どうやって使うの?

  • とりあえず入手したpmdファイルから編集が色々できそうなんだけど、やばい、なんかめちゃくちゃ怖い物体しか作れんよ?!
  • 今週中には操作方法をなんとかつかみたいなあ...


ひとまず解像度もとにもどして、今日は終了

パソコン(Windows10)で iCloudを使って写真を共有するには(続き)

前回、パソコンにiCloudが使えるよう設定したけど結局パソコンから共有アルバム作れなかったので(すぐに反映されない?)諦めて別の方法にチャレンジ。

パソコンからスマホに共有してみる

  • 隠れているインジケーターからiCloudのアイコンを右クリックすると次の画面に

f:id:yiris1127:20170816002638p:plain

  • iCloud.comで表示」をクリック→ブラウザが開く
  • 雲マークをクリックして写真をアップロードする

f:id:yiris1127:20170816001515p:plain

  • アップロードされるのを待つ

f:id:yiris1127:20170816001621p:plain

  • アップロードが完了したら、スマホの写真アプリを開き、「アルバム(すべての写真)」を開く(実際は自分が写真をアップロードした場所を開きましょう)


おおー!こちらはすぐに写真がアップロードされてました。
なるほど、やはり今の時点ではパソコンからスマホに共有し、スマホから共有アルバムを作成するほうが良さそう。二度手間ではあるけど、作業が進まないよりは良いかな。

今後はパソコンから共有がスムーズにできるようになればいいな。

パソコン(Windows10)で iCloudを使って写真を共有するには

背景

iPhone5Sで撮ってた写真が古いパソコンにどっさり残ってた。
家族旅行の写真がほとんどだったので、このままパソコンと一緒に廃棄するのはもったいないし、
かといって新しいパソコンに移したところで陽の目を浴びないままも寂しい。

できれば家族にも見せたい。
そこで、iPhoneの写真アプリの「共有」機能がパソコンでも使えないかと調べてみた。

設定手順

以下の手順の「WindowsiCloud の設定」を参考にぽちぽちと設定。
support.apple.com

設定時のメモ

  • インストールは何事もなく終了
  • インストール後は再起動が必要だったので再起動
  • 再起動すると、Apple IDでサインインを求められるので、使っているiPhoneと同じIDとパスワードでサインイン

f:id:yiris1127:20170814131749p:plain

  • サインインできたら、共有したいものだけチェックをいれて「適用」をクリック

設定はこれだけだった。さて、ちゃんと写真が登録できるのだろうか・・

使ってみたがうまくいかず

  • iCloudフォトライブラリ」を使って、と説明にはあるけどどこ?ってなった

どうやら、[コンピューター]というところに「iCloud フォト」というアイコンが作られてる様子
f:id:yiris1127:20170814132436p:plain

  • iCloudフォトをクリックすると次の画面に

f:id:yiris1127:20170814132552p:plain

  • でも「共有」を押してもスマホで作成しているフォルダが何一つ表示されてなかった
  • おまけにパソコンから新しいフォルダさえ作れない


うーん、何の設定が悪いの?

試行錯誤

  • 隠れているインジケーターからiCloudのアイコンを右クリックして、「iCloud.com に移動」を押してみる

f:id:yiris1127:20170814134026p:plain

  • 「写真」をクリックすると、スマホの写真の中身が見れた!
  • なるほど、パソコンとスマホ間で写真共有するには便利だけど、ちょっと違うんだよな
  • とかやっているうちに、さっき表示されてなかった共有フォルダがいっぱい表示されてた!
  • フォルダだけ表示されてたり、写真もちゃんと入ってたりとなんだかバラバラ

もしかして単に時間がかかるだけなのか?
よく分からないので、ひとまず一晩あたためてみます。


一晩経って

iCloudフォトライブラリの共有をチェック

  • おー、共有の中に色々フォルダと写真が作成されてた!
  • けど若干動作が重い、スマホ側で消したはずのフォルダも一瞬表示されてて、少し画面が固まってしばらくしたら消えた

パソコンから新規共有アルバムを作成してみる

  • iCloudフォトライブラリの共有をクリック後に「新規共有アルバム」をクリックして作成

f:id:yiris1127:20170815234008p:plain

  • 「写真またはビデオを選択」をクリックして好きな写真を選び、「終了」をクリック

f:id:yiris1127:20170815235033p:plain


「・・・・・(´・ω・)」


うーん、すぐに作成されないんですけどw
ダメだ、こりゃ。10分後くらいに表示されたけど中身が表示されてなかった。
そのあと共有したメンバーにメール届いてるから参加してと伝えて、参加してもらってはじめて表示された。
このレスポンスじゃやる気しないなあ・・
仕方ない、「パソコンからスマホに共有→スマホから共有アルバム作成」ができるか試そう。

これ以上原因を調べるのも時間が無駄になりそうなので別の方法を考えます。


以上