きっかけなんて些細なモンですよ。

【エディタ】Visual Studio Code (Microsoft) を導入した。【Python】

f:id:kirintt:20171113220041p:plain

今までずっと Python IDLE という Python インストール時に標準装備されていたエディタ(兼総合開発環境、とwikiには書いてあります。自分はよくわかってません)を使用してきました。ちなみに自分の認識ではエディタというのはプログラムを書くためのノートみたいなものです。しかしテキストが進むにつれてコードが長くなったり内容が難しくなったりしたので、エディタを変えてみようと思った次第です。


 

Visual Studio Code

「エディタ おすすめ」でググったら出てきた下記のサイトを参考に、今回は Microsoft が提供している Visual Studio Code を導入してみることにしました。
eng-entrance.com

Visual Studio Code にした理由は上記サイトで一番上にあったからです。素人だからどうせ使ってみないとわかんないし。

導入

インストール

下記から公式サイトへアクセスします。

code.visualstudio.com


手順は下記サイトを見ればわかると思います。
www.atmarkit.co.jp

Python を使えるように設定

次は Visual Studio Code で Python を使えるようにするための作業です。

これについてはサイトによって手順がまちまちだったのですが、自分は下記のサイトを参考にさせて頂きました。

VS Codeでpythonの開発環境を構築してみる

ただ、自分の PC は Windows 10 のため、ユーザー変数を設定する手順が若干異なりました。
同じように Windows 10 をご利用の方は下記サイトも併せて参照すると良いんじゃないでしょうか。
www.wannko.net


自分の場合は上記サイトの手順1でシステムをクリックした際、バージョン情報が表示されました。
で、左側を見ても手順2にあるようなシステムの詳細設定という項目はありませんでした。どうしろと。
手探りにやってみたら解決しました。バージョン情報を下にスクロールしていくと、「システム情報」があるのでこれをクリックすれば出てきます。
f:id:kirintt:20171113214652p:plain

あとは上記サイトに従えばユーザー変数の設定までいけます。
自分がやった感じだと以下のようになります。

☟これを
f:id:kirintt:20171113215048p:plain

☟こう
f:id:kirintt:20171113215143p:plain

これでいけました。
個人的に IDLE から変えて良かった点は行数がついたことですね。
まだ導入したばかりで機能を全然把握していないため、細かいことは追々知っていけたらいいなーと思います。

それではまた。

NEW GAME!を観ました。プログラミング始めます。(22)

記事を書くとき、はてな記法にするのいっつも忘れてしまう。
f:id:kirintt:20171109214001p:plain



前回
nagoyanofes.hatenadiary.jp




※基本的に、愛知大学の有澤先生がプログラミングの講義で使用しているテキスト「Pythonによるプログラミング入門」に沿って進めています。
Python 2.7.13を使用しています。

今回のテーマは「再帰アルゴリズム」です。

再帰アルゴリズム

ここでは再帰アルゴリズムがどれほど有り難いかを示そう。具体的なテーマとして第 4.3節に出て来た問題、すなわち、非常に大きな m に対して x ** (m − 1) を m で割った余りを計算する問題を取り扱う。
(引用元:Pythonによるプログラミング入門, p. 50)

テキストでは、例として x = 117, m = 1644455544992686074722684291497 について考える。
まず思いつくのは下記のようなプログラムだと思う。

x=117
m=1644455544992686074722684291497
print x**(m-1) % m

(引用元:Pythonによるプログラミング入門, p. 50)

でもやってみると全然結果が出ない…。
このほかにも、テキストではいくつか例が示されているが、どれもできない。
このような問題を解くには、そもそも発想を変える必要があるらしい。

 電卓を持っているとしたまえ。その下で 2 ** 16 の計算を考えてみよう。何回の掛け算が必要か? 15 回と答えると失格だ。次のようにたったの 4 回で計算できる。必要な計算量の差は m が大きい場合には凄まじい。
f:id:kirintt:20171109204821p:plain
 こんなにうまく行くのは m が特殊な数だけか? そんなことはない。例えば m = 17 の場合には 2 ** 16 × 2 で計算できる。
(引用元:Pythonによるプログラミング入門, p. 51, 52)

天才かよ…。
これをプログラムで表現すると、以下のようになるらしい。

def pow(x,n):
    if n==0:
        return 1
    k=n/2
    y=pow(x,k)
    if n%2 == 0:
        return y*y
    return y*y*x

(引用元:Pythonによるプログラミング入門, p. 52)

  • pow(x, n) は x ** n を計算してくれるとのこと。
  • 以下の様に考えることで、べき乗の計算が半分に!
  • n が偶数の場合:n = 2k として、x ** n を (x ** k) ** 2 として計算。
  • n が奇数の場合:n = 2k + 1 として、x ** n を x * (x ** k) ** 2 として計算。

関数 pow のように、その定義の内部に同じ関数を含む時に「再帰的関数」と言う。再帰的に計算法が表現されている場合に「再帰アルゴリズム」と言う。
(引用元:Pythonによるプログラミング入門, p. 52)


この再帰的関数を使うと、例題は次のプログラムで計算できる。

譜 4.13 x ** (m − 1) を m で割った余りを計算するプログラム

def mpow(x,n,m):
    if n==0:
        return 1
    k=n/2
    y=mpow(x,k,m)
    if n%2 == 0:
        return y*y%m
    return y*y*x%m
m= 1644455544992686074722684291497
x=117
print mpow(x,m-1,m)

(引用元:Pythonによるプログラミング入門, p. 52)


結果

448225599079959033691973915232


すぐ計算終わった!すごぉい…。

おまけ

譜4.13 の pow(x,n,m) はもともと Python に入ってる関数らしい。
やってみた。

プログラム(1)pow

m= 1644455544992686074722684291497
x=117
print pow(x,m-1,m)


結果:譜4.13 と同じ

またしても一瞬で出たぁ。Python すげーな。
ついでに一つ発見があったのでメモ。
下記のプログラムだと実行できない。

プログラム(2)math モジュールの pow

from math import * 
m= 1644455544992686074722684291497
x=117
print pow(x,m-1,m)


結果

Traceback (most recent call last):
  File "(略)\mpow.py", line 4, in <module>
    print pow(x,m-1,m)
TypeError: pow expected 2 arguments, got 3


math モジュール内の関数 pow では pow(x, y) の計算しかできないらしい。pow(x, y, z) の形で使いたいときには math モジュールと区別する必要がありそう。

参考
2. 組み込み関数 — Python 2.7.14 ドキュメント
9.2. math — 数学関数 — Python 2.7.14 ドキュメント


今回はここまで!

次:まだ

NEW GAME!を観ました。プログラミング始めます。(21)

記事を書くとき、はてな記法にするのいっつも忘れてしまう。
f:id:kirintt:20171103224811p:plain



前回
nagoyanofes.hatenadiary.jp



※基本的に、愛知大学の有澤先生がプログラミングの講義で使用しているテキスト「Pythonによるプログラミング入門」に沿って進めています。
Python 2.7.13を使用しています。

今回のテーマは「フェルマーの問題」です。

フェルマーの問題

問題提起

ついに Fermat(フェルマー) の大定理が証明されたそうである。この定理は n が 3 以上の整数の時、
f:id:kirintt:20171103210838p:plain
自然数解 (x , y , z) は存在しない事を主張する。
(引用元:Pythonによるプログラミング入門, p. 49)

金色のガッシュ!! でウンコティンティンが出題してたやつだ。
ここではそれに似た問題について考えていくみたいです。

例11

f:id:kirintt:20171103211600p:plain
となる自然数の組を見つけよ。
(引用元:Pythonによるプログラミング入門, p. 50)

これの答えを系統的に探すプログラムが以下。

譜 4.12 整数解を求めるプログラム

for z in range(1,20):
    for y in range(1,z+1):
        for x in range(1,y+1):
            v = x**3 + y**3 + z**3
            u = int(v**(1.0/3)+0.5)
            if u**3== v: print x,y,z,u

(引用元:Pythonによるプログラミング入門, p. 50)


結果

3 4 5 6
1 6 8 9
6 8 10 12
9 12 15 18
2 12 16 18
7 14 17 20
3 10 18 19
  • 全体:x =< y =< z の条件で試す(手あたり次第計算するよりも効率的)
  • 1:上限は20(上限を決めておかないとプログラムが終わらないから)
  • 4~6:v ** (1/3) + 0.5 の小数点以下を切り捨てた整数値 u を 3乗した値が v と等しいとき、x**3+y**3+z**3=u**3 を満たすと判断→x, y, z, u を表示
補足:Python の小数点計算

譜 4.12 の6行目では、v (= x**3 + y**3 + z**3) の 1/3 乗に 0.5 を足した値の整数値を u にしている。
0.5を足す意味ってあるの?と思ったので、結果の一つ目 (3 4 5 6) を例にやってみた。

プログラム(1)a ** 1/3 の色々な計算結果

a=(3**3)+(4**3)+(5**3)
b=a**(1.0/3)
c=int(a**(1.0/3))
d=int(a**(1.0/3)+0.5)
print b, c, d


結果

6.0 5 6
  • 1:小数点以下も考えた計算結果(".0"は小数点以下も考えてますよという Python のアピール)
  • 2:int() に 0.5 を含まなかった場合。ここでは 6 が正しいのに、なぜか1少ない値が出た。
  • 3:プログラムで使われている結果。問題の答えとしてはこっちが正しい。


これは 1.0/3 が悪いんだと思う。1.0 / 3 は 小数点で書くと、0.33333...だけど、Python の計算だと最大でも小数点以下何桁まで、みたいな制限がある。だから、完璧に1/3を計算できない。
今の a (=(3**3)+(4**3)+(5**3)) について、以下のような計算をしてみると、

プログラム(2)a ** 1/3 の近似値

a=(3**3)+(4**3)+(5**3)
b=a**0.3
c=a**0.33
d=a**0.333
print b, c, d


結果

5.01575281247 5.89345182585 5.98925906864


このように、小数点以下の桁が増えるほど 6 に近付いていくものの、ぴったり 6 にはならない。
だから、int() で小数点以下を切り捨てると 5 になってしまった、というわけ。それを防ぐために 0.5 を足してたんすね。0.5 という値自体にはたぶん意味はなくて、1以下ならなんでも良いと思われる。

でもプログラム(1)の2行目だと結果が6.0じゃん!と思うけれど、これは Python で計算できる桁数の値が近似的にほぼ 6 だから 6.0 って表示しときましたよ、みたいなことだと思う。譜 4.12 を見るとわかるけど、最終的には自然数の u と v を比較しないといけないから、int() での整数化は必要な手順なんだよな。

ちなみに Python の計算では、たとえば 0.1 は正確には 0.1 ではないらしい。今回の問題に直接関係はないけど、調べてる過程で知ったので参考までに。これは10進数を2進数で無理矢理表現していることが原因らしい。詳しくは以下のリンクで説明されてる。

浮動小数点演算、その問題と制限(Python 公式サイト)

問2

f:id:kirintt:20171103223709p:plain
となる自然数の組についてはどうだろうか?
(引用元:Pythonによるプログラミング入門, p. 50)

譜 4.12 をちょっと書き換えて試してみた。

プログラム(3)問2

for z in range(1,30):
    for y in range(1,z+1):
        for x in range(1,y+1):
            v = x**4 + y**4 + z**4
            u = int(v**(1.0/4)+0.5)
            if u**4== v: print x,y,z,u


結果
なし

一応1行目で上限を30や50にしてみたけど、結果は出力されず。問題の式を満たす組み合わせはないということか?
調べてみたところ、これはオイラーの予想と呼ばれるものらしい。

www.suriken.com

上記サイトによると、条件を満たす組み合わせは存在するらしい。でも桁数がヤバイので、上限50では結果が出なくて当然だった。というわけで、とりあえずプログラム的にはOK。

以上!

次:
nagoyanofes.hatenadiary.jp

NEW GAME!を観ました。プログラミング始めます。(20)

64のスマブラキャプテンファルコンが好きです。
f:id:kirintt:20171031001047p:plain


前回
nagoyanofes.hatenadiary.jp



※基本的に、愛知大学の有澤先生がプログラミングの講義で使用しているテキスト「Pythonによるプログラミング入門」に沿って進めています。
Python 2.7.13を使用しています。

今回のテーマは「誕生日の怪」です。

誕生日の怪

問題提起

この節では、最初に次のような問題が出された。

フランク先生はとても優しい先生で子供たちから慕われていた。ある日教室で「私の誕生日のパーティには必ず来てね」と生徒たちにせがまれ約束す事になった。フランク先生は約束した後でちょっと不安になった。誕生日が同じ子がいたら困るな.... 同じ日に 2 カ所には行けないよ.... でもフランク先生はこの不安を打ち消した。なあにクラスの子は 30 人だ。1年は 365 日もあるのだ。ぶつかるなんてよほど運が悪くないと...
(引用元:Pythonによるプログラミング入門, p. 47)

さて、どうしたもんかね。

コンピュータシミュレーション

テキストでは、とりあえず1~365の数字をランダムに30回発生させて、それらが被るかを見ることから始めている。

乱数の発生

いきなりだけどサンプルコード貼る。

譜 4.9 乱数を使ったシミュレーション

from random import *
for i in range(0,30):
    x=int(365*random())+1
    print x

(引用元:同上, p. 48)

このプログラムについて。ちなみにそれぞれ頭の数字は行数のこと。

  • 1:乱数(ランダムな数字)を使うための宣言。
  • 3:random() は0以上1未満の範囲から、ランダムに1つ数字を取り出すことができる。これを365倍すると、範囲が0以上365未満に。さらに、これを int() で囲むと、ランダムに選ばれた数字の小数点以下が切り捨てられ、整数になる。最後に1を足すと、ここで得られる x は1~365の整数のどれかになるって寸法。すっごーい!


結果

199
136
80
62
195
94
145
130
275
178
64
246
165
168
84
220
306
43
324
218
103
257
297
317
240
276
45
280
358
110

計算はランダムなので、これはあくまで一例。

整列すれば見やすくなる

さっきのプログラムの結果を見れば、数字が被っているかどうかは確かめられる。でも正直面倒くさい。
なんで面倒なのか? 表示される数字が小さい順とかになってないから?
じゃあ小さい順に結果を表示させればいいじゃん。
というわけで、次のサンプルプログラムがこちら。

譜 4.10 整列による譜 4.9 の改良版

from random import *
d=[]
for i in range(0,30):
    x=int(365*random())+1
    d.append(x)
print d
d.sort()
print d

(引用元:Pythonによるプログラミング入門, p. 48)

  • 2:[] は空のリスト。要素がいくつとかも特に決まってない状態。
  • 5:4行目で計算した乱数 x をリスト d の最後に追加。for を繰り返して x がどんどん追加されていく。
  • 7:for が終わって、リスト d に30個の乱数が詰まった状態で、そいつらを小さい順に並べ替え。


結果

[7, 262, 232, 95, 126, 334, 100, 205, 228, 153, 51, 265, 310, 247, 273, 244, 249, 352, 27, 57, 118, 148, 362, 287, 54, 56, 313, 191, 266, 274]
[7, 27, 51, 54, 56, 57, 95, 100, 118, 126, 148, 153, 191, 205, 228, 232, 244, 247, 249, 262, 265, 266, 273, 274, 287, 310, 313, 334, 352, 362]
  • プログラム見ればわかるけど、一つ目は並べ替えなし、二つ目は並べ替えあり。
  • これも乱数なので結果は毎回違う。
  • リストを表示すると、[1, 3, ...] みたいに表示される。
重複した誕生日だけを書き出す

並べ替えのおかげで多少見やすくはなったけど、どうせなら数字が被ってるかどうかも教えてくれませんかね…?

Python「仕方ねぇな」

譜 4.11 重なりだけを出力する譜 4.10 の更なる改良版

from random import *
d=[]
for i in range(0,30):
    x=int(365*random())+1
    d.append(x)
print d
d.sort()
print d
for i in range(0,29):
    if d[i]==d[i+1]: print d[i]

(引用元:Pythonによるプログラミング入門, p. 49)

  • 結果を並べ替えるプログラムの尻に2行だけ追加された。
  • 9, 10:リスト d の i 番目の数がそのすぐ次( i+1 番目)と同じなら、その数を表示。


成歩堂龍一!!

問1

最後におまけみたいな問題もあったのでご紹介。

 そこでフランク先生は誕生日の衝突の確率を理論的に見積もる事にしました。30 人の問題をいきなり扱うのは難しすぎるので、まずは 3 人から...
 3 人で誕生日の衝突が発生しない確率 P は
P = (365 / 365) * (364 / 365) * (363 / 365)
で計算できます。これぐらいなら電卓でも計算できますが、30 人だとやっぱり計算機ですね。やってみましょう。また P が 5 割を切るのは何人でしょうね。
(引用元:Pythonによるプログラミング入門, p. 49)

プログラム

from math import *
x = 1
d = []
n = 30 # クラス人数
for i in range(0, n):
    x = x * (365.0 - i) / 365.0
    d.append(x)
print d # 確認用
print # 改行
print "30 students:", x
for i in  range(0, n):
    if d[i] <= 0.5 :
        print "When", i + 1, "students, P is lower than 0.5 ("+str(d[i])+")"
        break # 初めて0.5を下回る確率になった時点で終了

結果

[1.0, 0.9972602739726028, 0.9917958341152185, 0.9836440875334497, 0.9728644263002063, 0.9595375163508884, 0.9437642969040244, 0.9256647076483308, 0.905376166110833, 0.8830518222889221, 0.8588586216782667, 0.8329752111619353, 0.8055897247675702, 0.7768974879950266, 0.7470986802363133, 0.7163959947471498, 0.6849923347034391, 0.6530885821282105, 0.6208814739684632, 0.5885616164194198, 0.5563116648347941, 0.5243046923374498, 0.49270276567601445, 0.4616557420854711, 0.431300296030536, 0.40175917986406096, 0.37314071773675794, 0.3455385276576005, 0.319031462522223, 0.2936837572807313]

30 students: 0.293683757281
When 23 students, P is lower than 0.5 (0.492702765676)


ちなみに、この問題では計算式的に d[i] はどんどん小さくなっていくので、d.sort()とかの並び替えは要らないのだ。

今回はここまで。
ザコだから未だに計算式の中に".0"入れ忘れて小数点以下切り捨てられたり、for の条件の後に":"付け忘れたりしてる…。

次:
nagoyanofes.hatenadiary.jp

NEW GAME!を観ました。プログラミング始めます。(19)

初めてコメントを頂きました!本当にありがとう!!
f:id:kirintt:20171027040636p:plain


前回
nagoyanofes.hatenadiary.jp


※基本的に、愛知大学の有澤先生がプログラミングの講義で使用しているテキスト「Pythonによるプログラミング入門」に沿って進めています。
Python 2.7.13を使用しています。

今回のテーマは「グラフの交点」です。

グラフの交点

この節ではグラフの交点を求める簡単なアルゴリズムについて勉強する。

 ここに紹介するのは二分法である。交点の x 座標が x0 と x1 の間に入るような x0 と x1 を最初に適当に選ぶ。但し x0 と x1 の間には交点は1つだけ存在しなくてはならない。また話を簡単にするために x0 < x1 とする。
f:id:kirintt:20171026231244p:plain
(引用元:Pythonによるプログラミング入門, p. 46)

ふむふむ…。
とりあえずどんなプログラムか見てみよう。

譜 4.8 2分法を使った交点の計算

#
# root of a function
# Bisection method
#
from math import *
def f(x):
    return cos(x)-x
x0=0
x1=pi/2
while x1 - x0 > 1.0e-8:
    x = (x0+x1)/2
    y = f(x)
    print x,y,x0,x1
    if y > 0: x0=x
    elif y < 0: x1=x
    else: break

(引用元:同上, p. 46)

順番に何をしているか書いてみる。

  • 5行目:pi(円周率)を使う準備。
  • 6, 7行目:関数f(x)の定義。f(x)が0のとき、y=cos(x)とy=xのグラフは交差する。
  • 8, 9行目:最初に見る範囲の設定。
  • 10行目以降: x1 - x0 > 1.0e-8 の間繰り返す。
  • 11行目:変数xにx0とx1を2分する値を入れる。
  • 12行目:変数yにf(x)を入れる。xは11行目で代入された値。
  • 13行目:いくつかの変数を表示。計算が正しく行われているか確認できる。
  • 14, 15行目:yの正負によって、次に狭める範囲がx0かx1かを判断する。
  • 16行目:y=0なら、交点が見つかったということなので計算終了。


結果

0.785398163397 -0.0782913822109 0 1.57079632679
0.392699081699 0.531180450813 0 0.785398163397
0.589048622548 0.242420989754 0.392699081699 0.785398163397
…(中略)…
0.739085137954 -7.9310493728e-09 0.739085126251 0.739085149657
0.739085132102 1.86237991695e-09 0.739085126251 0.739085137954

問1

次の式で表される 2 つのグラフ
    y = − x ** 2 + 1
    y = x
の交点を求めなさい。(2 つとも求めなさい)
(引用元:Pythonによるプログラミング入門, p. 47)


プログラム

#
# root of a function
# Bisection method
#
# from math import *
def f(x):
    return -1*(x**2)+1-x
x0=0
x1=1.0
x00=x0
x2=-2.0

print "When x>0"
while x1 - x0 > 1.0e-8:
    x = (x0+x1)/2
    y = f(x)
    n1 = x
    print x,y,x0,x1
    if y > 0: x0=x
    elif y < 0: x1=x
    else: break
print   # new line
print "When x<0"
while x00 - x2 > 1.0e-8:
    x = (x00+x2)/2
    y = f(x)
    n2 = x
    print x,y,x2,x00
    if y > 0: x00=x
    elif y < 0: x2=x
    else: break
print   # new line
print "result ("+str(n1)+","+str(n1)+"),("+str(n2)+","+str(n2)+")"


譜 4.8 からの変更点・追加点

  • 全体:交点が2つ存在するため、x = 0を境にx >= 0 と x <= 0 の2つに分けて考える。(交点がx >= 0, x <= 0 それぞれの範囲に1つずつあることが前提)
  • 5行目:ここではpiを使わないのでコメントアウト
  • 9行目:小数点以下まで計算するために".0"を追加
  • 10, 11行目:x00, x2 は x <= 0 の範囲での交点探索に使用する。
  • 13, 23行目:2つの交点を求める過程が表示されるので、どっちがどっちか分かるようにするための文。
  • 17, 27行目:n1, n2 にそれぞれ交点の x 座標を入れる。(最後の結果表示で使用)
  • 22, 32行目:結果を見やすくするために空白行を設けた。
  • 29, 30行目:x <= 0においては、x > (交点) において y > 0, x < (交点) において y < 0 という具合で、x >= 0 の場合と条件が逆転する。これについては y = − x ** 2 + 1, y = x のグラフを1つの図に書いてみるとわかりやすいはず。

33行目:2つの交点を表示。str(n1)は変数n1を文字として表示します、という意味。こうしないと、「文字と数値は"+"でつなげないよ!」といった感じのエラーが出た。


結果

When x>0
0.5 0.25 0 1.0
0.75 -0.3125 0.5 1.0
(中略)
0.618033990264 -3.38550543155e-09 0.618033975363 0.618034005165
0.618033982813 1.32744992776e-08 0.618033975363 0.618033990264

When x<0
-1.0 1.0 -2.0 0
-1.5 0.25 -2.0 -1.0
(中略)
-1.61803399026 -3.38550520951e-09 -1.61803400517 -1.61803397536
-1.61803398281 1.32744992776e-08 -1.61803399026 -1.61803397536

result (0.618033982813,0.618033982813),(-1.61803398281,-1.61803398281)


今回はここまで。
2分法は専門科目で習ったけど、当時Python知ってたら絶対もっと簡単だったなぁ…としみじみ。

次:
nagoyanofes.hatenadiary.jp

はてなブログでのソースコード表示に行番号を追加する方法

f:id:kirintt:20171027011332j:plain

以前、はてな記法を使ってソースコードを表示する方法を記事にしました。

nagoyanofes.hatenadiary.jp


しかし、はてな記法を使う方法では、行の番号が表示されません。
プログラミングのお勉強記事が増えて来るにつれて、ソースコードに行番号があったら嬉しいなと思うことが多くなったので、今回はその方法を調べてみました。

ずばりこのサイトを見よ!!

いくつかのサイトを見て回りましたが、ここが自分みたいなプログラミング初心者にはいちばんわかりやすかったです。
こちらを読んで、手順通りやれば問題ないかと思います!

am1tanaka.hatenablog.com

おまけ

背景の色について

先のサイトでは奇数行と偶数行で色を分けることでコードを見やすくしています。
手順を読んでいくとわかりますが、デザイン CSSに追加されたコード(以下)によって奇数行の色が変更されます。

.code-list:nth-child(2n+1) {
    background-color: #eee;
}

tanaka's Programming Memoより引用


具体的には、
background-color: #eee;
の赤字部分が色の種類を示しています。
ここをいじることで、色を変更できます。
色の種類については、例えば下記のサイトが参考になります。

www.colordic.org

また、ソースコード全体の背景色を変更したい場合はデザイン CSSに以下のコードをコピペすればOKです。

.entry-content pre.code { background-color:#f9f9f9;}


具体的には、
.entry-content pre.code { background-color:#f9f9f9;}
の赤字部分が色の種類を示しています。
ここをいじることで、色を変更できます。

背景色以外にも、ソースコードのテキストなどの色を変更することができます。
詳しくは下記サイトが参考になると思います。
orangain.hatenablog.com

GitHub Gist

GitHubという外部サイトによって行番号付きのソースコードを載せるという方法もあります。
下記でわかりやすく紹介されています。

raptor36.hateblo.jp


読んでいただくとわかりますが、手順だけなら多分いちばん簡単だし楽です。
ただ、個人的には外部サイトを通しての表示には以下のような懸念事項があるため、採用を見送りました。

  • そのサイトが使えなくなった時にコードが見れなくなってしまうのでは?
  • そうなったら自分で記事を見直してもコードがわからず、不便なのでは?


まぁ心配のしすぎだとは思いますが…。

おわりに

今回は、はてなブログでのソースコード表示に行番号を追加する方法+αを紹介しました。
自分にとっても前より見やすいブログになったので良かったです!みなさんもぜひお試しください!!

Google アナリティクス&Google Search Console 関連記事まとめ【導入編】

f:id:kirintt:20171025021941j:plain

ブロガーに限らず、Webサイトを運営する人の間では有名らしいアクセス解析ツール『Google アナリティクス』とサイトの監視・管理ツール『Google Search Console』。
使うかどうかはわかりませんが、ありがたいことに無料なのでこの度K介も導入してみました。
今回はこれらをはてなブログに導入する際の手順について、参考にさせて頂いたwebページをまとめておきます。
自分もそうですが、パソコンに全然詳しくない人でもこれらを読めば出来ると思います。

Ⅰ.Google アナリティクスの導入と設定

まずはGoogle アナリティクスから準備します。
参考にしたのは以下のwebページ。

memobiz.net

スクショが多く、説明も丁寧でわかりやすかったです。

Ⅱ.Google Search Console の導入と設定

お次は Google Search Console です。

www.mutant-tetsu.com

作業画面のスクショだけでなく説明もちゃんと読みましょう。
重要な部分は赤字で記してくれているので、見過ごさないよう。

Ⅲ.Google アナリティクスとGoogle Search Consoleの連携

それぞれの登録が済んだら、いよいよ導入編最後のステップとなる Google アナリティクスと Google Search Console の連携を行います。

GoogleアナリティクスにSearch Consoleを連動させる方法
www.peko.co.jp

上記のページで、目次から「2.Googleアナリティクスから連動させる」を選択しましょう。
また、以降の「3.Search Consoleとの連動を確認する」や「4.検索クエリの分析方法」も併せて見ておくと良いと思います。

この記事は最終更新日が2015年のため、一部の情報が古くなっています。
具体的には「2-1.Googleアナリティクスの「検索クエリ」をチェックする」の部分。

GoogleアナリティクスTOP>集客>検索エンジンの最適化>検索クエリ
(引用元:GoogleアナリティクスにSearch Consoleを連動させる方法

とありますが、現在は以下のように検索クエリの位置が変わっています。

f:id:kirintt:20171025015802p:plain


GoogleアナリティクスTOP>集客>Search Console>検索クエリ

まとめに代えて

導入編は以上です。振り返ってみると結構面倒くさかったです。
まとめに代えて、最後にK介が躓いたところを1つ紹介しておきます。
K介はいくつかの google アカウントトを使い分けているのですが、Google Search Consoleでウェブプロパティを登録する際、Google アナリティクスと異なるアカウントに登録してしまいました。
これが原因で連携がうまくいかなかったわけですが、アカウントを間違えていることに全く気付かず苦労しました。
K介のように google アカウントを複数管理している方はくれぐれもご注意を…。