CPUのコア数とスレッド数とは?性能との関係

 

テーマ
◆コア数について理解する
◆スレッド数について理解する

corei7 4コア8スレッド
corei9 8コア16スレッド
 などよく耳にしたことがあるのではないでしょうか?

 しかし実際には「コア数」「スレッド数」はいまいちよく分かってないという人もいるでしょう。

 このブログでは「コア数」「スレッド数」について、またコア数が多いと性能は高いのか?スレッド数が多いと性能は高いのか? について噛み砕いて説明していきます。

コア数とは


コア数とは実際に処理を行うモノがいくつ搭載されているかを表すものです。

簡単にいうとCPUの中に頭脳が何個入っているかということです。

CPUが登場した頃はCPUの中に1個頭脳が入っている「1コア」のCPUでした。

CPUのコア数に応じて呼び名が決まっているので紹介します。

1コア シングルコア
2コア デュアルコア
3コア トリプルコア
4コア クアッドコア
6コア ヘキサコア
8コア オクタコア
10コア デカコア



これらの他にも「12コア」や「24コア」などコアはどんどん増えています。

コアを増やすと頭脳が増える訳ですから性能は高くなります。

コア数が増えると性能が上がる理由

まずシングルコアの場合を考えてみます。

処理を行う頭脳が一つなので、処理できるソフトは単純に一つです。

例えばWindowsだけなど使うソフトウェアが少ない場合は1コアで十分でした。

少ないメモリで動くOSならば1コアでも他のソフトが動かせましたがOSが進化していくなか、1コアではWindowsと他のソフトを、同時に動かすだけの性能が足りなくなりました。

そこで考えて出されたのが「マルチコア化」です。

CPUの中に入っている頭脳を増やすことで同時に処理できるソフトを増やすことが出来ます。

では4コアの場合を考えます。

4つ頭脳があるので
1つ目はWindows
2つ目はブラウザ、
3つ目はWord、
4つ目はExcel
のようにすることが出来ます。


また、コア数が増えることにより、1つ1つの処理も速くなります。

4コアの場合、2つのコアでWindows、もう2つのコアで画像編集、のようにすることで1つの処理が単純に2倍になります。

スレッド数とは

2コア2スレッド
2コア4スレッド
両方とも2コアですがスレッド数が違っています。
スレッドとはCPUがこなせる仕事の数を表します。

1コア1スレッドのCPUを考えます。
1スレッドなので同時にこなせる仕事は1つです。
これだとWindowsを動かしながら他のソフトを動かせななったり動作がかなり遅くなったりします。

では1コア2スレッドのCPUを考えます。
2コアなので同時にこなせる仕事は2つです。
この時CPUの中に入っている頭脳(コア)は1つですが、OSからは2つあるようになっています。

これを「マルチスレッド化」といいます。

           Windows
           画像編集

1コアでもこのように使うことができます。

また、スレッド数が多いとマルチタスク能力がアップします。
4コア4スレッドだと同時に4つの仕事がこなせますが、マルチスレッド化した、4コア8スレッドのCPUは1つのコアで2つ作業が出来るので同時にたくさんのソフトが動かせます。

コア数・スレッド数まとめ

コア数とスレッド数について理解できましたか?
以上の理由からCPUはコア数が多いほど、スレッド数が多いほど、性能が高くなるということが分かりました。
ぜひCPUを選ぶ時の参考にして下さい。

【真相】CPUグリスを塗り替える効果はあるのか?

テーマ
◆CPUグリスの塗り替えは効果があるのか探る
CPUグリスとは?
 

ノートPCにも、デスクトップPCであってもCPUグリスは、なくてはならない存在なんですよ。

 

 

CPUの熱をCPUクーラーに伝えて冷却するためですね。

 

 
 

CPUグリスにもいろいろ種類があってシルバーグリスや、ダイヤモンドグリスが人気ですね。

 

 

種類によっても熱伝導率が変わってくるんですね。

 

 
CPUグリスは劣化してしまうのか?
 

長い間PCを使っているとグリスがカサカサになりますよね?

なぜだか分かりますか?

 

 

CPUの熱で凝固してしまったとか?

 

 
 

実はCPUグリスには「シリコンオイル」という揮発性物質が配合されています。これはグリスに流動性を持たせるために入れられているため、これが揮発することでカサカサになってしまいます。

 

 

「シリコンオイル」がグリスからなくなってしまうことでそうなってしまうのですね。

 

 
 

では「シリコンオイル」がCPUグリスの劣化に関係しているということですか?

 

 
 

じつは「シリコンオイル」の有無はあまりグリスの性能に関係していません。あくまで流動性のためです。

実はグリスそのものは劣化しないといわれています。

なぜなら熱伝導に関係する物質は金属粒子だからです。

 

 

でもカサカサになったグリスはあまりCPUの熱を伝えてくれませんよね?

 

 
 

その通りです。

ではなぜ性能に関係ない「シリコングリス」の影響を受けるのでしょうか?

下の2つの画像を見てください。

 

 

【グリス湿潤】

【グリス乾燥】

 

これらの画像はCPUとCPUクーラーの間にあるグリスの様子を簡単に表したものです。

【グリス湿潤】は「シリコンオイル」がある状態、

【グリス乾燥】は「シリコンオイル」がない状態です。

一目瞭然ですが【グリス乾燥】のほうはCPUとクーラーとの間に隙間があいており空気の層ができています。

 

 

「シリコンオイル」は流動性のために入っていて、その流動性のおかげで隙間をきれいに埋めて熱を確実に伝えることができるようになっていたのですね。

 

 
 

ではもう2つ下の画像を見てください。

上の画像それぞれにおけるグリスの状態を表しています。



 

 

 

 【模式図_湿潤】

【模式図_乾燥】

 

 

水色の部分は「シリコンオイル」を表しています。

上の画像では「シリコンオイル」が残っていてグリスの金属粒子が均等に広がっています。

下の画像では「シリコンオイル」がなくなっていて金属粒子がかたまってしまっています。

 

 

「金属粒子がどれだけ全体に広がっているか」で決まるんですね。





結論
 

結局グリスの金属粒子自体は劣化しにくく、「シリコンオイル」の乾燥により金属粒子が一か所にたくさん集まってしまうことで熱が伝わりにくくなることが分かりましたね。

 

 

乾いたグリスをもとに戻す方法はあるのですか?

 

 

単純に考えると「シリコンオイル」を足してあげることで復活すると思いますが、グリスを塗り替えれば良いだけですからね。

 

 

結局乾いたら塗り替えないとだめですね。





おまけ
 

高性能なグリスほど塗りにくかったりしますよね。

なぜだか分かりますか?

 

 

えーーっと

分かりました!!

高性能なグリスは「シリコンオイル」の量のわりに金属粒子の量が多くなっているのではないのでしょうか?

流動性のために配合される「シリコンオイル」が相対的に少ないため塗りにくいと考えられます。

 

 

その通りです!!

今回の内容がしっかり理解できていますね。

 

 

さっそくCPUグリスを塗り替えてきます。

プログラミング学習の仕方

 

テーマ
◆ プログラミングの学習方法
◆プログラミングの学習方法は異色だということを理解する
普通の勉強方法じゃダメなのか?

皆さんがよく言う"勉強"とは机に座ってテキストを見たり問題を解いたりすることですよね?

しかしプログラミング学習において普通の勉強方法だと思った効果が出せないことがあります。

今回はオススメのプログラミング学習方法を紹介します。

 

プログラミング学習の原則

・暗記をやめる
・インプットしたらすぐにアウトプットする
・必要な分だけ学習する

 

これらを意識しておくことが大切です。

 

何のために学習するのか考える

自分が何をするためにプログラミングを学ぶのか、将来何がしたいのかを考えておくと必要な知識や技術が見えてきます。

 

プログラミングはもの作りのための言語ですから作りたいものがないと学習を続けることが難しくなります。

頑張り続けるためのモチベーションにもなるので学習効率アップにつながります。

 

どんな目標がいいか?

ざっくりとしていたり、ぼんやりしている目標でもあるのと無いのとでは大きく違います。

プログラミングで何を作るのかよく分からないという人も多くいるでしょう。

 

新しいWEBサービスを作りたい

カッコいいWEBページを作りたい

面白いゲームを作りたい

 

など自分が興味のあることにすれば良いです。

 

まずは基礎から学習

いきなり開発を始めるのは難しいことです。

プログラミング学習サービス等を利用して基礎知識をインプットし、アウトプットする練習をしましょう。

 

インプットよりアウトプットの方が難しいですが、これができないと上手く学習か進みません。

 

簡単なものから開発していく

基礎が固まってきたらいよいよ開発を初めていきます。

最初は簡単なものから作っていきましょう。思った結果が得られなくても自分で考えることが重要です。

誰かが作ったものを参考にオリジナルのものを作るのものいいでしょう。

やってはいけないこと・なぜやってはいけないのか

1.暗記法

・単語帳をつくる

・きれいなノートをつくる

ググる人はダメだと思う

 

 ↑ のような人は要注意です。

プログラミングは全てを覚える必要はありません。

基礎を理解してしまえば後のことはググったり、ツールを利用したりすれば良いです。

プログラミングはカンニングOKなのです。

 

暗記する必要はないのに暗記するのは、非効率です。

 

プログラミング学習において 暗記=勉強 ではないので気をつけましょう。

 

暗記よりも臨機応変に対応できる応用力が求められます。

 

2.アウトプットしないとダメなのか?

プログラミングを実際に書くときは応用力が問われます。

アウトプットすることで飛躍的にプログラミングが出来るようになるでしょう。

 

3.必要な分だけ学習する

プログラミングを全て完璧にこなすというのはかなり難しくほぼ不可能なことです。

 

自分に必要な分を学習することは、プログラミングを無限に学習するということを避けるために行います。

 

プログラムは日々進化しているため、将来やりたいことを見つけ、それを達成できるだけの量を学習しましょう。

HTMLとCSSで自作読者ボタンを作る!!

 

テーマ
オリジナル読者ボタンを設置する

 

読者ボタンを作る
 
以下のような読者ボタンを作ります。
押したくなるようにするためにマウスホバーしたときに開くようにしました。
サンプルコードはその下です。

 

サンプルコード
<div class="container">
<a class="btn-open" href="https://blog.hatena.ne.jp/あなたのHatenaID/ブログのURL/subscribe">読者になる</a></div>
<style><!--
.container {
  font-family: "Yu Gothic", YuGothic, Verdana, 'Hiragino Kaku Gothic ProN','Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'メイリオ', Meiryo, sans-serif;
  text-align: center;
  padding-top: 40px;
}
.btn-open {
  display: inline-block;
  width: 180px;
  height:50px;
  text-align: center;
  background-color: #dcdcdc;
  font-size: 16px;
  line-height: 52px;
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
  border: 2px solid #000000;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.btn-open:after{
  width: 100%;
  height: 0;
  content:"";
  position: absolute;
  top: 50%;
  left: 50%;
  background : #FFF;
  opacity: 0;
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transition: .2s;
  z-index: -1;
}
.btn-open:hover{
  color: #9ec34b;
}
.btn-open:hover:after{
  height: 240%;
  opacity: 1;
}
.btn-open:active:after{
  height: 340%;
  opacity: 1;
}
--></style>
読者ボタンをブログに貼り付ける

そうしたら出来たコードの動作確認をします。
このように表示され同じ動きができていれば完成です。

 

 

webdevopment.hatenablog.com

 

HTMLとjavascriptでタイマーを作る!!

 

テーマ
HTML・javescriptでタイマーを作る!!

 


今回はHTMLとjavascriptを使ってカウントダウンタイマーを作っていきます。

難しく感じるかもしれませんがコピペで作れますので、ぜひ試してみてください。

javascriptは外部ファイルではなくHTMLの後に記述する方法でもOKです。
(Blogger対応)

そのままコピペすると下のようなタイマーが設置されます。

カウントダウンタイマー
サンプルコード

 

HTML・javescript<script type="text/javascript">
var year = "2200";var month = "1";var day = "1";var hour = "0";var minute = "0";var centi = "5";
var convert = "0";var roop = "";
var cnt1 = "日";var cnt2 = "時間";var cnt3 = "分";var cnt4 = "秒";
var baseoffset = "none";var cuttime = "";
var br1 = "1";var br2 = "";var br3 = "";var br4 = "1";
var com1 = "終了まで";var com2 = "と";var com3 = "";var com4 = "終了しました";var end = "2";
var width = "400";var height = "150";
var font = "arial";var font2 = "7seg4";var size = "18";var t_size = "30";var l_height = "27";var t_height = "30";var bold = "";var italic = "";var line = "";
var space = "30px 0px 0px 0px";
var align = "2";var img = "";
var color1 = "FFFFFF";var color2 = "00FF00";var color3 = "000000";
</script>
<script type="text/javascript" src="//countdown.reportitle.com/js/neo1.js"></script><a href="//countdown.reportitle.com/">カウントダウンタイマー</a><script type="text/javascript" src="//countdown.reportitle.com/js/neo2.js"></script>



      の所でタイマーが終了する"年" "月" "日" "時刻" "秒" を指定します。


      の所でカウントダウン中に表示する文字を決めます。


      の所でカウントダウンが終了したときに表示する文字を決めます。


      の所で日本語の文字色を指定します。


      でマークした所でカウントダウンの数字の色を指定します。


      でマークした所で背景色の指定をします。

タイマーの使い道

タイマーなんてどこでつかうの?と思うかもそれませんが、使い方によっては大きなメリットを得られることがあります。

タイマーをつける目的
  1. イベント終了までのカウントダウン
  2. グッズ販売等のセール時のカウントダウン

  3. 自分の誕生日までのカウントダウン

  4. 年越しまでのカウントダウン

などの使い道があります。

得られるメリットとしては、

  1. 閲覧者に終了日を効果的に知らせれる
  2. 売上アップにつながるかも
  3. 誕生日を覚えてもらえる + 祝ってもらえる
  4. 年越しのが近づくと自分のブログを開いてくれる人が増えるかも

 このようにタイマーを設置することにより大きなメリットを得ることができます。

webdevopment.hatenablog.com

 

Bloggerを他のサービスに利用する

テーマ
何かとデメリットがあるBloggerを他の用途で活用する

Point

Bloggerの良い所を利用する

利用出来そうなBloggerの良い所

・画像と動画をGoogleアルバムにアップできる

    ※ただし画像は縦横どちらかが2048pxを越えている場合、

      動画は15分を超えている場合はストレージの保存領域を使用する

     保存領域は15GB

 

この機能は使える!!と思ったので早速他のブログサービスに活用する方法を考えます。

他のブログサービスの現状
無料で使おうとしているのに画像や動画の保存領域が2GB...
こんなことってありがちですよね。
そこで今回はBloggerを使って画像や動画を貼り付ける方法を紹介します。
 
Bloggerに画像をアップする
(画像クリックで拡大表示)
画像ボタンをクリックします。

 

 
 
ファイルを選択してアップします。
 
挿入する画像を選択します。
 
HTMLエディタを開くとこのようにコードが生成されています。
 
このコードを自分がメインで使っているブログに貼り付けることで画像を挿入できます。
 
Bloggerを使ってGoogleアルバムにアップしているのでご利用中の少ない容量を圧迫せずに画像や動画を挿入出来ます。
 
まとめ

Bloggerで投稿しなくてもBloggerを活用する方法を紹介しました。
ほかにも自分が作った表やボタン等のソースコードを貯めておく場所にするのもよさそうですね。

HTMLとCSSでタブ切り替え

テーマ
CSSを外部ファイル化せずにHTMLと一緒に書く


今回はCSSをHTMLと一緒に書き、「タブ切り替え」を作っていきます。

<完成形>


第一項目
第二項目
第三項目
Point

styleタグでCSSを書き
.〇〇〇の〇〇〇の部分をdivタグのclass="〇〇〇"で指定して使う

サンプルコード

 

 
<div class="tab-wrap">
<input checked="checked" class="tab-switch" id="TAB-01" name="TAB" type="radio" /><label checked="checked" class="tab-label" for="TAB-01">HTML</label>
<input class="tab-switch" id="TAB-02" name="TAB" type="radio" /><label class="tab-label" for="TAB-02">CSS</label>
<input class="tab-switch" id="TAB-03" name="TAB" type="radio" /><label class="tab-label" for="TAB-03">Javascript</label>
<input class="tab-switch" id="TAB-04" name="TAB" type="radio" /><label class="tab-label" for="TAB-04">結果</label>
<br />
<div class="tab-content" id="TAB-01-content">
HTML
</div>
<div class="tab-content" id="TAB-02-content">
CSS
</div>
<div class="tab-content" id="TAB-03-content">
Javascript
</div>
<div class="tab-content" id="TAB-04-content">
結果
</div>
</div>

<input class="tab-switch" id="TAB-02" name="TAB" type="radio" /><label class="tab-label" for="TAB-02">CSS</label>
<input class="tab-switch" id="TAB-03" name="TAB" type="radio" /><label class="tab-label" for="TAB-03">Javascript</label>
<input class="tab-switch" id="TAB-04" name="TAB" type="radio" /><label class="tab-label" for="TAB-04">結果</label>
<br />

<div class="tab-content" id="TAB-01-content">
HTML
</div>
<div class="tab-content" id="TAB-02-content">
CSS
</div>
<div class="tab-content" id="TAB-03-content">
Javascript
</div>
<div class="tab-content" id="TAB-04-content">
結果
</div>
</div>
<style type="text/css">
.tab-label {
color: White;
background: LightGray;
padding: 3px 12px;
cursor: pointer;
display: inline-block;
}
.tab-content {
display: none;
border-top: 3px solid green;
padding: 10px;
box-shadow: 0 0 3px rgba(0,0,0,.2);
}
.tab-switch:checked+.tab-label {
background: green;
}
#TAB-01:checked ~ #TAB-01-content,
#TAB-02:checked ~ #TAB-02-content,
#TAB-03:checked ~ #TAB-03-content,
#TAB-04:checked ~ #TAB-04-content {
display: block;
}
.tab-switch {
display: none;
}
</style>
 
結果


HTMLとCSSの赤字の部分を見ると分かるように、文字が一致しています。

このようにすることでdivタグでCSSを呼び起せるようになります。

Bloggerを使うデメリット

テーマ
無料ブログサービスBloggerのデメリット

日本であまり使われていない

Bloggerは海外ではメジャーなブログサービスですがなぜか日本ではあまり浸透していません

身近に利用者がいることを実感しにくいため寂しさを感じることがあるかもしれません。

記事を書くまでがややこしい

独自ドメインや優れたカスタマイズ性を持っているあまり、初めての人やHTML初心者の人にはつらく感じてしまうことがあるかもしれません。

使いこなせるようになるまで時間がかかりそうです。

アクセス数を稼ぎにくい

ひとりぼっち空のスタートで書いた記事が検索上位に出てくるまでに時間がかかります。

人気のブロガーになれば安定するかもしれませんが努力が必要です。

まとめ

以上からBloggerには初心者には多少使いにくさを感じさせる部分があることが分かった。

慣れてしまえばGoogle Adsenseなどのサービスが使いやすいので良いのですが...

 

そう言ってもやっぱりBloggerを使いたい...Googleの管理下だし安心できるから...

こちらにまとめました。

↓クリックで移動↓

webdevopment.hatenablog.com

webdevopment.hatenablog.com

 

 

Bloggerを使うメリット

 


 

テーマ
無料ブログBlogger

 

無料で使えて広告無し!!

無料で使えるブログサービスは数多く存在しますが有料プランや広告で結局支出...
このようなことはBloggerでは一切ありません!!
そもそもBloggerには有料プランは無く、広告も全く表示されません。
とても使いやすいサービスです。

Googleアドセンスが使いやすい!!

Googleが提供するサービスなので、
初めからGoogle  Adsenseのメニューが用意されています。
Adsenseの審査に通っていれば簡単に広告非常にを貼り付けることができるます。

商用利用できる!!

無料のブログサービスだと利用規約をしっかり読まないと商用利用出来ないものがあったりします。
ですがBloggerは商用利用できます。
お金のためにブログを書きたい人も安心して使えます。

幅広い話題が書ける!!

Bloggerは侮辱的な書き込みや否定的な意見が含まれるブログを削除したりすることはありません。
なので、基本的にどんな内容でも書くことが出来ます。
ただし他人を脅かしたりする内容などは削除されるようです。モラルはきちんと守りましょう。
詳しくはこちらで確認して下さい。
Bloggerコンテンツポリシー

httpsに簡単に接続できる!!

Bloggerhttpsに接続するには設定でONにするだけです。
現在Google検索ではhttps接続されているかがSEOに関わって来るので確認しましょう。

設定画面
最後に

今回は無料のブログサービス「Blogger」のメリットを5つ紹介しました。
もっとメリットもあると思いますが、やはり有料サービスにはかなわない部分があります。
こちらにまとめているのでご覧下さい。

↓クリックで移動↓

webdevopment.hatenablog.com

 

基本HTMLタグ

このブログではWEB制作をしていくときによく使うHTMLタグを紹介します。



テーマ
最低限覚えておくべきHTMLタグ

 


hタグ

6段階のレベルで見出しを作るタグ

最大の見出しがh1で
h2
h3
h4     ←基準値
h5
h6
の順で小さくなっていきます。

使い方

<h1>ここに文章</h1>


aタグ

href属性を使ってリンク先を指定することで、他のページに移動することができるタグ

使い方

<a href="ここにURL">表示する文字</a>


divタグ

ブロック要素の指定や、スタイルシートの適用に用いるタグ

以下のように指定することで、CSSを使ってスタイルを変更することができるようになります。

使い方

<div class="example"></div>


metaタグ

サイトの本文とは別に、付加情報を記述できるタグ

このタグを使い、情報を記述することで、ブラウザなどに対して、製作者やキーワードの情報を伝えることができます。

例えば以下のような情報を記述できます。
・author : 製作者
・date : 作成日
・keywords : キーワード
・reply-to : 連絡先 
・description : 頁の説明文
・copyright : 著作権

使い方

文書を説明

<meta name="description" content="HTMLタグの解説。">

キーワードを指定
<meta name="keywords" content="HTML,タグ,リファレンス">


hrタグ

区切り線を下に引くタグ

使い方

終了タグはなく、ただ単に記述するだけで区切り線を入れることができます。
<hr>


imgタグ

JPEGやGIF、PNGなどの形式のイメージを表示させるためのタグ

src、altのような属性があり、widthやheightを用いることで幅や高さを指定することもできます。

使い方

<img src="example.jpg" alt="example">
src : ファイル名 / 画像のURL
alt : 何らかの理由で画像が表示できなかったとき代わりに表示する文字


brタグ

改行するタグ

書いたところで改行します。

使い方

<br>

もっと詳しくWEB検索!!

新しいタブが開きます。