問題
解説
IDSの解説
IPSの解説
Intrusionを使った熟語
- unwarranted intrusion 不法侵入
- intrusion alarm 侵入警報
- intrusion alert 侵入警報
- intrusion attack 侵入攻撃
- an intrusion on other people's privacy 他人のプライバシーの侵害
(定義)第二条 この法律において「個人情報」とは、生存する個人に関する情報であって、次の各号のいずれかに該当するものをいう。一 当該情報に含まれる氏名、生年月日その他の記述等(文書、図画若しくは電磁的記録(電磁的方式(電子的方式、磁気的方式その他人の知覚によっては認識することができない方式をいう。次項第二号において同じ。)で作られる記録をいう。以下同じ。)に記載され、若しくは記録され、又は音声、動作その他の方法を用いて表された一切の事項(個人識別符号を除く。)をいう。以下同じ。)により特定の個人を識別することができるもの(他の情報と容易に照合することができ、それにより特定の個人を識別することができることとなるものを含む。)二 個人識別符号が含まれるもの2 この法律において「個人識別符号」とは、次の各号のいずれかに該当する文字、番号、記号その他の符号のうち、政令で定めるものをいう。一 特定の個人の身体の一部の特徴を電子計算機の用に供するために変換した文字、番号、記号その他の符号であって、当該特定の個人を識別することができるもの二 個人に提供される役務の利用若しくは個人に販売される商品の購入に関し割り当てられ、又は個人に発行されるカードその他の書類に記載され、若しくは電磁的方式により記録された文字、番号、記号その他の符号であって、その利用者若しくは購入者又は発行を受ける者ごとに異なるものとなるように割り当てられ、又は記載され、若しくは記録されることにより、特定の利用者若しくは購入者又は発行を受ける者を識別することができるもの・・・・・4 この法律において個人情報について「本人」とは、個人情報によって識別される特定の個人をいう。5 この法律において「仮名加工情報」とは、次の各号に掲げる個人情報の区分に応じて当該各号に定める措置を講じて他の情報と照合しない限り特定の個人を識別することができないように個人情報を加工して得られる個人に関する情報をいう。・・・・・6 この法律において「匿名加工情報」とは、次の各号に掲げる個人情報の区分に応じて当該各号に定める措置を講じて特定の個人を識別することができないように個人情報を加工して得られる個人に関する情報であって、当該個人情報を復元することができないようにしたものをいう。・・・・・7 この法律において「個人関連情報」とは、生存する個人に関する情報であって、個人情報、仮名加工情報及び匿名加工情報のいずれにも該当しないものをいう。・・・・・
アクチュエータの機能として,適切なものはどれか。
ア キーボード,タッチパネルなどに使用され,コンピュータに情報を入力する。
イ アナログ電気信号を,コンピュータが処理可能なディジタル信号に変える。
ウ コンピュータが出力した電気信号を力学的な運動に変える。
エ 物理量を検出して,電気信号に変える。
本記事では論理演算子のAND、OR演算子を紹介します。
論理演算子は基本的に真偽値を扱う演算子です。
AND演算子は両辺の演算子がどちらも、trueであればtrueを返し、そうでなければfalseを返す、OR演算子は両辺の演算子がどちらも、falseであればfalseを返し、そうでなければtrueを返すという演算子です。
AND演算子(&&)は、左辺の値の評価結果がtrueに変換できるならば、
右辺の評価結果を返します。
一方で、左辺の値の評価結果がfalseに変換できるならば、
右辺は評価されること無く、左辺の値がそのまま返されます。
このような値が決まった時点でそれ以上評価しないような評価のことを
短絡評価(Short-circuit evaluation)と呼びます。
// 左辺はtrueであるため、右辺の評価結果を返す
console.log(true && true); //true
console.log(true && false); //false
// 左辺がfalseであるなら、その時点でfalseを返す。 右辺は評価されない
console.log(false && true); //false
console.log(false && false); //false
また、AND演算子は左辺を評価する際に、左辺を真偽値へと暗黙的な型変換をしてから判定します。 真偽値への暗黙的な型変換ではどの値がtrueでどの値がfalseになるかは、次のルールによって決まります。
falsyな値はfalseになる
falsyでない値はtrueになる
falsyな値とは以下の値のことを言います。
trueへと変換される値の種類は多いため、falseへと変換されない値はtrueとなると考えておけば十分だと思います。 このオペランドを真偽値に変換してから評価するのはAND、OR演算子で共通の動作です。
次のように、AND演算子(&&)は左辺を真偽値へと変換した結果がtrueの場合は、右辺をそのまま返します。 左辺がfalsyの場合は、右辺は評価されず、左辺がそのまま返されます。
// 左辺はfalsyではないため、評価結果として右辺を返す
console.log(true && 'hello'); //hello
console.log('other' && 'hello'); //hello
// 左辺がfalsyであるため、評価結果として左辺を返す
console.log(false && 'hello'); //false
console.log(undefined && 'hello'); //undefined
console.log(null && 'hello'); //false
console.log(0 && 'hello'); //0
console.log(-0 && 'hello'); //-0
console.log(0n && 'hello'); //On
console.log(NaN && 'hello'); //NaN
console.log("" && 'hello'); //空文字列
論理演算子は、if文と組み合わせて利用することが多い演算子です。
次のように、numberが3で割り切れかつ 5で割り切れる場合という条件をひとつの式として書くことができます。
let number = 15;
if (number % 3 == 0 && number % 5 == 0) {
console.log(number);
}
// if文のネストで書くと以下のようになる
let number = 15;
if (number % 3 == 0) {
if (number % 5 == 0) {
console.log(number);
}
}
//出力 15
AND演算子(&&)を使うと、if文のネストに比べて短く書くことができます。
なお、このときに、numberが3で割り切れない(例えば5等の)場合は、その時点でif文の条件式はfalseとなります。 そのため、AND演算子(&&)の右辺は評価されずに、if文の中身も実行されません。
let password = "123456";
if (password && password.length < 8) {
console.log('パスワードは8文字以上で入力してください。');
}
この例では、passwordのlengthプロパティを確認し、8よりも小さければエラーメッセージを設定しています。
変数passwordに格納された文字列の長さを見ています。
なので、やりたいことだけを書くと、以下のようなプログラムになりそうです。
if (password && password.length < 8) {
console.log('パスワードは8文字以上で入力してください。');
}
ただし、この書き方はよくないです。
これはJavaScript以外の言語にもいえますが、
オブジェクトのpropertiesを参照する時には、そのオブジェクト自体が
nullやundefinedである可能性を考慮しなければいけません。
(厳密な言い方をすると、nullやundefinedはプリミティブだから、
propertiesを持てないのですが、本記事では詳細を割愛します。)
つまり、以下のような書き方をした時に、
エラーが発生し、プログラムが終了してしまいます。
let password;
if (password && password.length < 8) {
console.log('パスワードは8文字以上で入力してください。');
}
// 出力
// Error evaluating Javascript output: TypeError: Cannot read properties of undefined (reading 'length')
上記の例ではpasswordは宣言されただけで、何も値が代入されていません。
そのため変数passwordの中身はundefinedになっているのですが、
if分の中ではpassword.lengthという形で、passwordのpropertiesを呼び出しています。
当然undefinedにはlengthという名前のpropertiesはありません。
そのため、エラーが生じてしまうのです。
それを防ぐために、
password &&
という記載を追加します。
つまり、passwordに値が代入されていない場合は、
エラーが発生するプログラムが実行される前に、処理を打ち切ります。
passwordの中身がnullやundefinedだった場合には、
AND演算子の左側の値がfalseであるとみなされ、その時点で処理が打ち切られるので、
エラーが発生するpassword.lengthという処理が実行されません。
この書き方はよく用いられます。
OR演算子(||)は、左辺の値の評価結果がtrueに変換できるならば、そのまま左辺の値を返します。 一方で、左辺の値の評価結果がfalseならば、右辺の評価結果を返します。
// 左辺がtrueなので、左辺の値が返される
console.log(true || true); //true
console.log(true || false); //true
// 左辺がfalseなので、右辺の値が返される
console.log(false || true); //true
console.log(false || false); //false
また、AND演算子と同様に、OR演算子は左辺を評価する際に、左辺を真偽値へと暗黙的な型変換します。 次のように、OR演算子は左辺がfalsyの場合には右辺の値を返します。
// 左辺はfalsyではないため、左辺の値が返される
console.log(true || 'hello'); //other
console.log('other' || 'hello'); //other
// 左辺がfalsyなので、右辺の値が返される
console.log(false || 'hello'); //hello
console.log(undefined || 'hello'); //hello
console.log(null || 'hello'); //hello
console.log(0 || 'hello'); //hello
console.log(-0 || 'hello'); //hello
console.log(0n || 'hello'); //hello
console.log(NaN || 'hello'); //hello
console.log("" || 'hello'); //hello
let firstName = "";
let lastName = "mue";
let userName = "駆け出しエンジニア";
const name = firstName || lastName || userName || "Anonymous";
console.log(name);
// 出力 mue
上記の例では、firstName、lastName、userNameの順に値を確認していき、trueに変換できるものがあれば、それ以降は評価されず、その値が出力されます。変換できるものが無ければ、Anonymousが出力されるようになっています。
let obj = { test: 'test' };
obj = obj || {};
console.log(obj);
//出力 { test: 'test' }
let obj ;
obj = obj || {};
console.log(obj);
//出力 {}
上記2つのコードの2行目をみてください。obj が未定義ならば、obj を生成され、すでに存在してる場合は、そのまま使うということをやっています。
なぜこんな紛らわしい書き方をするかというと、AND演算子の使用例でも述べたように、
オブジェクト自体がnullやundefinedである可能性を考慮しなければいけないからです。
変数に自分自身を代入する読みにくい変なコードなのですが、
初期値を指定する際などに、非常によく使われる書き方なので覚えておきましょう。
・ITやWebに関する備忘録 IT / Web技術. JavaScriptのANDとOR【現場でよく使われる特殊な書き方】. <https://web.lingual-ninja.com/2019/07/javascript-and-or.html> (参照日2022年10月8日).
・JavaScript Primer. 演算子. <https://jsprimer.net/basic/operator/> (参照日2022年10月8日).
・ゼロプラスワン. JavaScript 論理演算子OR「||」の特殊な用法. <https://zero-plus-one.jp/javascript/javascript-logical-operators-or/> (参照日2022年10月8日).
Windows11にローカルでインストールしたnode_modulesを
エクスプローラー経由での削除ができなくて困っていたので、
node_modulesを削除方法をメモとして残しておきます。
結論からいうと、パスの長さが250文字以上をデフォルトで認識しないようになっているからです。
npmでは依存ライブラリをnode_modulesというディレクトリの中に保存しています。
ライブラリhogeが依存しているライブラリはnode_modules/hoge/node_modules/
の中に保存されます。この方式をとることで、使っているライブラリAとBが、
共通のライブラリCに依存している場合に、AとBが使っているCのバージョンが
異なっていても問題無くなります。
その代償として、ファイル数が増えています。
また、依存関係が深ければ深いほどファイルシステム上のパスも長くなっています。
LinuxやMacではパスが長くても問題ありません。
しかし、Windowsでは長いパスは、OSやファイルシステムは対応してますが、エクスプローラーやコマンドプロンプトが対応してません。
要するに、Windowsでは、ファイルパス名が長すぎて削除できないモジュールが
出てくるため、node_modules ディレクトリを削除できませんでした。
削除方法としては、フォルダの共有化で一括削除する方法やnpm uninstall パッケージ名
で削除する方法等があるようですが、本記事ではより簡潔な方法を紹介します。
①windowsアプリのubuntuを立ち上げます。
②消去したいnode_modulesディレクトリまでcdコマンドで移動します。
③以下のコマンドを実行します。
rm -r node_modules
rm(ファイルを削除する)コマンドに、オプションとして
-r(ディレクトリを削除)をつけています。
エクスプローラーは対応していないけれど、OS自体は対応しているので、
以上の方法で削除できるかと思います。
・Qiita @ryomoucmei. Windows10でnode_modulesをサクッと消す手順. <https://qiita.com/ryomoucmei/items/2b7c9494316976217ae7> (参照日2022年10月1日).
・Qiita @kusano_k. Windows 10でnpmのnode_modulesを削除する方法. <https://qiita.com/kusano_k/items/570b6442780538b83a41> (参照日2022年10月1日).
・Monaural. Windows環境下でローカルインストールされたnpmモジュールを一括削除する. <https://ka2.org/delete-local-installed-npm-modules-into-windows> (参照日2022年10月1日).
本記事では、LinuxOSを操作するときに出てくる sudo su というコマンドを解説します。
スーパーユーザー(=root)としてsudoに続くコマンドを実行する権限を
その都度与えるコマンドです。
つまり、その瞬間だけroot権限(Windows系OSでいうとAdministrator)
になってsudoに続くコマンドを実行するコマンドです。
コマンド実行完了後は権限が元に戻ります。
root権限は、システム管理者用のアカウントに付与されるほぼすべての
操作ができる強力な権限なので、sudoを使う際には注意が必要です。
#管理者として実行したいコマンドがある場合に使う
sudo 実行したいコマンド
sudoの続きによくくる「su」というのはコマンドです。
suコマンド(switch user)はユーザを切り替えるコマンドになります。
このsuコマンドを実行すると以降の操作は切り替えたユーザで操作になります。
#ユーザを切り替えたいときに使う。
su 切り替えるアカウント名
suコマンドでユーザを省略するとrootを切り替えたことになります。
つまり、sudo suコマンドはroot権限でsuコマンドを実行します。(sudo su rootと同じ)
suコマンドに-(ハイフン)がついているときとそうでないときがあります。
ハイフンがついているときは、ホームディレクトリが
切り替えたユーザのホームディレクトリに移動します。
#ユーザーを切り替え+切り替えたユーザーのホームディレクトリへ移動
su - 切り替えるアカウント名
つまり、sudo su - ではホームディレクトリがrootに移動します。
そのため、カレントディレクトリを切り替えたくない場合はハイフンは付けません。
・Qiita @msht0511. 「sudo su」ってざっくり言ってなんぞ?. <https://qiita.com/msht0511/items/31294277a4415ccb4ac9> (参照日2022年9月24日).
・株式会社CONFRAGE ITソリューション事業部. Linuxコマンドのsudoとsuとsudo suとsudo su -コマンドの違いを分かりやすく. <https://confrage.jp/linux%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%AEsudo%E3%81%A8su%E3%81%A8sudo-su%E3%81%A8sudo-su-%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%AE%E9%81%95%E3%81%84%E3%82%92%E5%88%86%E3%81%8B%E3%82%8A/> (参照日2022年9月24日).
Windowsで、「desktop.ini」がデスクトップ上に表示される場合と起動時に勝手に開かれる場合の対処方法を紹介します。私もこの不具合に遭遇して解決方法を調べたのですが、よく紹介されている方法では解決せず困っていため、忘備録として残しておきます。
デスクトップ画面の構成情報を保存しているシステムファイルです。desktop.iniにはデスクトップアイコンやフォルダ名・表示情報が記述されています。
desktop.iniはシステムファイルなので基本的には非表示設定されています。
しかし、フォルダーオプションの設定が変更されてシステムファイルが表示されるようになった場合に、このdesktop.iniファイルもデスクトップ画面に表示されたり、起動時に勝手に開かれたりするようになります。
一応削除すれば不具合は解決するのですが、削除してしまうとデスクトップの構成情報が参照できなくなり、表示が崩れたり、英語表記になったりするので、注意しましょう。
そこで、システムファイルの表示設定を初期状態に戻すことで、「desktop.ini」ファイルを非表示にする方法をおすすめします。
以上の方法が、本記事の不具合の解消方法としてよく他のサイトでも紹介されていました。
私の場合はこの方法では非表示にならず、以下の方法で解決しました。
PowerShellを開き、以下のコマンドを打ち込んでください。
attrib +s +h +r /s desktop.ini
現在のディレクトリとそのすべてのサブディレクトリ内にある(/s)、desktop.iniにシステムファイル属性(s)、隠しファイル属性(h)、読み取り専用ファイル属性(r)をattribコマンドで設定する(+)という仕掛けです。
・Aprico. desktop.iniとは?削除しても大丈夫?非表示方法を紹介!. <https://aprico-media.com/posts/3875> (参照日2022年9月3日).
・microsoft. Docs/Windows Server/Windows のコマンド/関連項目/attrib. <https://docs.microsoft.com/ja-jp/windows-server/administration/windows-commands/attrib> (参照日2022年9月3日).
/* Header
----------------------------------------------- */
.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;
}
.Header h1 {
font: $(header.font);
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}
.Header h1 a {
color: $(header.text.color);
}
.Header .description {
font-size: $(description.text.size);
color: $(description.text.color);
}
.header-inner .Header .titlewrapper {
padding: 22px $(header.padding);
}
.header-inner .Header .descriptionwrapper {
padding: 0 $(header.padding);
}
.Header h1 {
color: $(header.text.color);
text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
font-size: 1.2rem; /*ブログタイトルのサイズを変更*/
font-family: Georgia, serif; /*ブログタイトルのフォントの種類を変更*/
}
.Header .description {
font-size: 0.7rem; /*ブログの説明の文字のサイズを変更*/
color: $(description.text.color);
}
この記事では、Bloggerで目次を自動生成する方法を、紹介します。
jQueryを使用しない方法を用いるため、サイトが重くならず軽快に表示されます。
Bloggerの、テーマ→カスタマイズ→HTMLを編集
を選択してください。
windowsなら「Ctrl + F」、Macなら「command+F」を押すと、左上に、「search: 」とでるので、そこに「</head>」を入れて「Enter」を押します。
</head>の直前に下記ソースを挿入します。
<!-- [START] 目次作成プラグイン-->
<b:if cond='data:blog.pageType == "item"'>
<script>
//以下のオプションを好みに合わせて変更
var toc_options = {
target: ["h2", "h3", "h4"],
autoNumber: true,
condTargetCount: 2,
insertPosition: "top",
showToc: true,
width: "auto",
marginTop: "20px",
marginBottom: "20px",
indent: "20px",
postBodySelector: ".widget.Blog"
};
//これ以降のソースは編集しないでください
;(function (window) { var id_seq= 0; document.addEventListener('DOMContentLoaded', function () { var rootElement= document.querySelector(toc_options.postBodySelector); if (rootElement== null || typeof rootElement=== "undefined") { return;} if (toc_options.target.length== 0) return; rootContent= searchHeadLine(toc_options, rootElement); if (rootContent.children.length >= toc_options.condTargetCount) { var wrap= createElement(rootContent); appendElement(wrap);}}); function searchHeadLine(toc_options, rootElement) { var count= toc_options.target.length; var fn= function (index, element, parentContent) { var currentTarget= toc_options.target[index]; var nextTarget= index < count - 1 ? toc_options.target[index + 1] : ""; var id= "toc_headline_" + (++id_seq); var content= createItem(currentTarget, text(element), index + 1, id); parentContent.children.push(content); element.id= id; var el= next(element); if (nextTarget== "") { return;} var prevTarget= ""; for(var i= index; i >= 0; i--) { prevTarget += (toc_options.target[i] + ",");} while (true) { if (el== null || typeof el=== "undefined") break; if (tagName(el)== currentTarget) break; if (tagName(el)== nextTarget) { fn(index + 1, el, content);} else { var nextElements= el.querySelectorAll(prevTarget + nextTarget); var breakFlg= false; for (var i= 0; i < nextElements.length; i++) { if (tagName(nextElements[i]) != nextTarget) { exitFlg= true; break;} fn(index + 1, nextElements[i], content);} if (breakFlg) break;} var el= next(el);}}; var rootContent= createItem("ROOT", "", 0); var elements= rootElement.getElementsByTagName(toc_options.target[0]); for (var i= 0; i < elements.length; i++) { fn(0, elements[i], rootContent, "");} return rootContent;} function createElement(rootContent) { var wrap= document.createElement("div"); wrap.classList.add("b-toc-container"); wrap.style.marginTop= toc_options.marginTop; wrap.style.marginBottom= toc_options.marginTop; if (toc_options.width== "100%") { wrap.style.display= "block";} else { wrap.style.width= toc_options.width;} var p= document.createElement("p"); var span1= document.createElement("span"); var span2= document.createElement("span"); var span3= document.createElement("span"); span2.classList.add("b-toc-show-wrap"); span3.classList.add("b-toc-show-wrap"); var a= document.createElement("a"); span1.innerText= "目次"; span2.innerText= "["; span3.innerText= "]"; a.href= "javascript:void(0);"; p.appendChild(span1); p.appendChild(span2); p.appendChild(a); p.appendChild(span3); var toggleToc= function (state) { var s= typeof state=== "boolean" ? state : hasClass(wrap, "hide"); if (s) { a.innerText= "非表示"; wrap.classList.remove("hide");} else { a.innerText= "表示"; wrap.classList.add("hide");}}; a.addEventListener('click', toggleToc); toggleToc(toc_options.showToc); var ul= document.createElement("ul"); ul.classList.add("toc-root-list"); rootContent.children.forEach(function (content, index) { createContentItemElement(ul, content, (index + 1) + "");}); wrap.appendChild(p); wrap.appendChild(ul); return wrap;} function createContentItemElement(ul, content, no) { var li= document.createElement("li"); li.classList.add("toc-list-item"); var a= document.createElement("a"); li.style.paddingLeft= toc_options.indent; ul.style.paddingLeft= 0; a.href= "#" + content.id; smoothScroll(a); if (toc_options.autoNumber) { var spanNm= document.createElement("span"); spanNm.classList.add("toc-number"); spanNm.innerText= no + ".";} var spanText= document.createElement("span"); spanText.classList.add("toc-text"); spanText.innerText= content.text; if (toc_options.autoNumber) a.appendChild(spanNm); a.appendChild(spanText); li.appendChild(a); ul.appendChild(li); if (content.children.length > 0) { var childUl= document.createElement("ul"); childUl.classList.add("toc-sub-list"); li.appendChild(childUl); content.children.forEach(function (childContent, index) { createContentItemElement(childUl, childContent, no + "." + (index + 1));});}} function smoothScroll(a) { a.addEventListener('click', (e)=> { e.preventDefault(); let href= a.getAttribute('href'); let targetElement= document.getElementById(href.replace('#', '')); const rect= targetElement.getBoundingClientRect().top; const offset= window.pageYOffset; const target= rect + offset - 0; window.scrollTo({ top: target, behavior: 'smooth', });});} function appendElement(element) { var el= null; var rootElement= document.querySelector(toc_options.postBodySelector); if (toc_options.insertPosition== "firstHeadBefore" || toc_options.insertPosition== "firstHeadAfter") { el= rootElement.querySelector(toc_options.target[0]);} else if (toc_options.insertPosition== "top") { el= rootElement;} if (el== null) return; if (toc_options.insertPosition== "firstHeadBefore") { before(el, element);} else if (toc_options.insertPosition== "firstHeadAfter") { after(el, element);} else if (toc_options.insertPosition== "top") { before(el, element);}} function createItem(tagName, text, nestLevel, id) { return { tagName: tagName, text: text, children: [], nestLevel: nestLevel, id: id
};} function text(element) { return element.innerText;} function next(element) { return element.nextElementSibling;} function prev(element) { return element.previousElementSibling;} function tagName(element) { return element.tagName.toLowerCase();} function hasClass(element, className) { return element.classList.contains(className);} function parentElement(element) { return element.parentNode;} function after(element, insertElement) { var parent= parentElement(element); var nextEl= next(element); if (parent != null && nextEl != null) { parent.insertBefore(insertElement, nextEl);}} function before(element, insertElement) { var parent= parentElement(element); if (parent != null) { parent.insertBefore(insertElement, element);}} })(window);
</script>
<style type="text/css">
.b-toc-container{background:#f9f9f9;border:1px solid #aaa;padding:10px;margin-bottom:1em;width:auto;display:table;font-size:95%}.b-toc-container p{text-align:center;margin:0;padding:0}.b-toc-container ul{list-style-type:none;list-style:none;margin:0;padding:0}.b-toc-container>ul{margin:15px 0 0}.b-toc-container.hide>ul{display:none}.b-toc-container ul li{margin:0;padding:0 0 0 20px;list-style:none}.b-toc-container ul li:after,.b-toc-container ul li:before{background:0;border-radius:0;content:""}.b-toc-container ul li a{text-decoration:none;color:#008db7!important;font-weight:400;display:flex;align-items:flex-start;flex-wrap:nowrap}.b-toc-container ul li .toc-number{margin:0 .5em 0 0;white-space:nowrap}.b-toc-container ul li .toc-text:hover{text-decoration:underline}
</style>
</b:if>
<!-- [END] 目次作成プラグイン-->
コードを貼り付けたら、画面上の [テーマを保存] をクリックして、内容を保存します。
以上で、プラグインの導入は完了です。
コピーしたコードに、toc_options = {…} と書かれている部分があります。
この JSON を直接編集して、目次の表示オプションを変更できます。
target
目次の作成。見出しタグを h1〜h6の 範囲で指定。
この機能とhタグの関係は以下になります。
autoNumber
目次に、自動的に連番を付けるか指定。
condTargetCount
目次を表示する見出の数を指定。
例えば、2 を指定した場合、targetオプションで指定したトップレベルの見出し(デフォルトではh2タグ)が、2つ以上あるとき、目次が表示されます。
insertPosition
目次の表示位置を以下から指定。
showToc
初期の目次表示状態を指定。
他の表示オプションも変更できますが、本記事は参考文献にある下記のサイトを参照して
つくらせていただいため、詳しくはそちらを参照してください。
GitHubに登録しようと、ターミナル等のコマンドラインで"git add ファイル名"を実行すると、
fatal: pathspec 'ファイル名' did not match any files
上記の様なエラーが発生したことはありませんか。本記事ではこのエラーへの対応策を解説します。
エラー要因
エラーを訳してみると、「'ファイル名' はどのファイルにも一致していませんでした。」
ということをいっています。
つまり、'ファイル名'が見つけられずエラーが発生したということです。
Gitに登録していないファイルがあると出るエラーです。
解決策
ファイルが見つからないといっているので、
まずは、ファイル名に誤字脱字が無いかを確認しましょう。
ファイル名が合っていたら、"git add"を'ファイル名'を保管しているディレクトリ上で実行されているかを確認しましょう。gitは階層構造を基本としていて、ディレクトリ毎に管理されています。下の階層にファイルがあったとしても、作業しているディレクトリにファイルが無ければgitは読み込んでくれません。そのため、指定のディレクトリ(cd ディレクトリ名)へ移動して、"git add"を打ち込みましょう。
また、下記のようにファイル名にスペースがあると、
コマンドだと認識されてしまうためエラーとなります。
git add file program出力
fatal: pathspec 'file' did not match any files
パスを""で囲むとスペースがあってもエラーを吐きません。
git add "file program"
ただし、予期せぬエラーが起きうるため、
ファイル名にスペースを入れないほうがよいでしょう。
Kaggleの回帰問題のチュートリアルである、住宅価格の予測「House Prices: Advanced Regression Techniques」に挑戦しました。
このチュートリアルの目的は、与えられた79の説明変数(敷地面積や天井の高さ等の住宅データ)をもとにSalePrice(住宅の販売価格)を予測することです。
まず今回使用するライブラリをインポートします。
# numpy , pandas import numpy as np import pandas as pd # 可視化用ライブラリ import matplotlib.pyplot as plt # Jupyter Notebookの中でインライン表示する場合の設定(これが無いと別ウィンドウでグラフが開く) %matplotlib inline import seaborn as sns # 歪度 from scipy.stats import skew # scikit-learn from sklearn.model_selection import cross_val_score from sklearn.linear_model import Ridge from sklearn.linear_model import LassoCV # xgboost import xgboost as xgb
# 訓練データをデータフレームに読み込む train = pd.read_csv( "../input/house-prices-advanced-regression-techniques/train.csv") # テストデータをデータフレームに読み込む test = pd.read_csv( "../input/house-prices-advanced-regression-techniques/test.csv") print('train shape:', train.shape) # 訓練データの形状を出力 print('test shape:', test.shape) # テストデータの形状を出力
出力結果
train shape: (1460, 81)
test shape: (1459, 80)
訓練データには1460レコード、テストデータには1459レコードのデータが収録されています。訓練データのカラム数は81ですが、テストデータでは予測に使用する'SalePrice'がないので、カラム数は80となっています。訓練データの情報をDataFrame.info()メソッドで出力してみます。
# 訓練データの情報を出力 train.info()
出力結果
<class 'pandas.core.frame.DataFrame'>
RangeIndex: 1460 entries, 0 to 1459
Data columns (total 81 columns):
# Column Non-Null Count Dtype
--- ------ -------------- -----
0 Id 1460 non-null int64
1 MSSubClass 1460 non-null int64
2 MSZoning 1460 non-null object
3 LotFrontage 1201 non-null float64
4 LotArea 1460 non-null int64
5 Street 1460 non-null object
6 Alley 91 non-null object
7 LotShape 1460 non-null object
8 LandContour 1460 non-null object
9 Utilities 1460 non-null object
10 LotConfig 1460 non-null object
11 LandSlope 1460 non-null object
12 Neighborhood 1460 non-null object
13 Condition1 1460 non-null object
14 Condition2 1460 non-null object
15 BldgType 1460 non-null object
16 HouseStyle 1460 non-null object
17 OverallQual 1460 non-null int64
18 OverallCond 1460 non-null int64
19 YearBuilt 1460 non-null int64
20 YearRemodAdd 1460 non-null int64
21 RoofStyle 1460 non-null object
22 RoofMatl 1460 non-null object
23 Exterior1st 1460 non-null object
24 Exterior2nd 1460 non-null object
25 MasVnrType 1452 non-null object
26 MasVnrArea 1452 non-null float64
27 ExterQual 1460 non-null object
28 ExterCond 1460 non-null object
29 Foundation 1460 non-null object
30 BsmtQual 1423 non-null object
31 BsmtCond 1423 non-null object
32 BsmtExposure 1422 non-null object
33 BsmtFinType1 1423 non-null object
34 BsmtFinSF1 1460 non-null int64
35 BsmtFinType2 1422 non-null object
36 BsmtFinSF2 1460 non-null int64
37 BsmtUnfSF 1460 non-null int64
38 TotalBsmtSF 1460 non-null int64
39 Heating 1460 non-null object
40 HeatingQC 1460 non-null object
41 CentralAir 1460 non-null object
42 Electrical 1459 non-null object
43 1stFlrSF 1460 non-null int64
44 2ndFlrSF 1460 non-null int64
45 LowQualFinSF 1460 non-null int64
46 GrLivArea 1460 non-null int64
47 BsmtFullBath 1460 non-null int64
48 BsmtHalfBath 1460 non-null int64
49 FullBath 1460 non-null int64
50 HalfBath 1460 non-null int64
51 BedroomAbvGr 1460 non-null int64
52 KitchenAbvGr 1460 non-null int64
53 KitchenQual 1460 non-null object
54 TotRmsAbvGrd 1460 non-null int64
55 Functional 1460 non-null object
56 Fireplaces 1460 non-null int64
57 FireplaceQu 770 non-null object
58 GarageType 1379 non-null object
59 GarageYrBlt 1379 non-null float64
60 GarageFinish 1379 non-null object
61 GarageCars 1460 non-null int64
62 GarageArea 1460 non-null int64
63 GarageQual 1379 non-null object
64 GarageCond 1379 non-null object
65 PavedDrive 1460 non-null object
66 WoodDeckSF 1460 non-null int64
67 OpenPorchSF 1460 non-null int64
68 EnclosedPorch 1460 non-null int64
69 3SsnPorch 1460 non-null int64
70 ScreenPorch 1460 non-null int64
71 PoolArea 1460 non-null int64
72 PoolQC 7 non-null object
73 Fence 281 non-null object
74 MiscFeature 54 non-null object
75 MiscVal 1460 non-null int64
76 MoSold 1460 non-null int64
77 YrSold 1460 non-null int64
78 SaleType 1460 non-null object
79 SaleCondition 1460 non-null object
80 SalePrice 1460 non-null int64
dtypes: float64(3), int64(35), object(43)
memory usage: 924.0+ KB
訓練データの'SalePrice'には、住宅の販売価格が格納されています。'SalePrice'の分布状況を確認してみます。
sns.displot(train['SalePrice'])
出力結果
分布状況が低価格帯に偏っていて、やや右側に尾を引くような分布になっています。
回帰分析をする上では正規分布にならなければ精度が下がるので、対数変換を利用して正規分布に変換します。
# SalePriceについて底をxの対数に変換し、 # 元の値と共にデータフレームに登録 prices = pd.DataFrame({'price':train['SalePrice'], 'log(price)':np.log(train['SalePrice'])}) print(prices, '\n') # 'price'の対数変換前後の歪度を出力 print('price skew :', skew(prices['price'])) print('log(price) skew:', skew(prices['log(price)'])) # "SalePrice"の変換前と変換後をヒストグラムにする plt.rcParams['figure.figsize'] = (12.0, 6.0) prices.hist()
# SalePriceの値を、底をeとする対数に変換する train["SalePrice"] = np.log(train["SalePrice"])ヒストグラムを見ると、対数変換したことで正規分布に近づいているのが分かります。また、歪度(分布が正規分布からどれだけ歪んでいるかを表す統計量)をみても、対数変換後の方が0に近い値であるため、分布が正規分布に近づいたということがいえます。今回のように対数変換することで正規分布に近づく変数は多くあります。今回は、RMSEで評価するために対数変換したら、たまたま正規分布に近づきました。ただし、目的変数を正規分布にする必要は必ずしもあるわけではありません。回帰分析において、残差が正規分布であることが望ましいのですが、目的変数を正規分布に近づけると残差も正規分布に近づく場合が多くあります。
# 訓練データとテストデータからMSSubClass~SaleConditionのカラムのみを抽出して連結 all_data = pd.concat((train.loc[:,'MSSubClass':'SaleCondition'], test.loc[:,'MSSubClass':'SaleCondition'])) # 連結したデータを出力 all_data
ここからは、欠損値の処理をしていきます。欠損値の処理には、主に以下の2つがあります。
①欠損値を含む行または列の削除
②欠損値を代表値などで埋める
最も欠損が多かったのはPoolQC(プールの質)で、更に文字列のデータした。このカラムは削除したくなりますが、Kaggleの提供しているデータdata_description.txtにPoolQCを確認すると次のように記載されています。
PoolQC: Pool quality
Ex Excellent
Gd Good
TA Average/Typical
Fa Fair
NA No Pool
つまり、NaN(欠損)は「No Pool」の事であり、データの欠損そのものが情報となっています。他の変数を確認してもobject型の変数のほとんどが該当の施設が存在しないという意味でデータが欠損していました。そこで、今回は、object型の欠損値はNAで埋めることにします。(より詳細にデータを確認すると、他のカラムを参照すると、施設が存在しているけれど、データが欠損している箇所もあるので、もう少し丁寧に前処理を行うべきだと思います。)
#na_col_listに欠損値を含む説明変数のリストを作成 na_col_list = all_data.isnull().sum()[all_data.isnull().sum()>0].index.tolist() #連結したデータのobject抽出 na_obj = all_data[na_col_list].dtypes[all_data[na_col_list].dtypes=='object'].index.tolist() #データの欠損値をNAで補間 for i in na_obj: all_data.loc[all_data[i].isnull(),i] = 'NA'
ここで、もう一度データの欠損状況を確認します。
# データの欠損状況 all_data.isnull().sum()[all_data.isnull().sum()>0].sort_values(ascending=False)
出力結果
最も欠損の多いLotFrontageから見ていきます。LotFrontageの説明をみると、 Linear feet of street connected to property(物件に隣接した道路の長さ)とかいてあります。区画サイズによってLotFrontageの値がほぼ決まると考えられます。他の方の方法を参考にさせていただいたのですが、区画サイズは地区ごとに標準のサイズが決まっているので、地区ごとにLotFrontageの値がほぼ決まるのではないかと考えられます。そこで、地区を表すNeighborhoodごとのLotFrontageを箱ひげ図で見てみます。
sns.boxplot(data=all_data, x='Neighborhood', y='LotFrontage')
出力結果
確かに見た感じ、地区ごとにLotFrontageの値がほぼ決まってそうです。そこで、LotFrontageの欠損値をNeighborhoodごとの代表値で埋めることにします。代表値といえば、平均値が思い浮かびますが、今回は外れ値の影響が大きそうなので、中央値で埋めることにしました。そのためのコードが合っているのか自信がないのですが、もし間違っていたらご指摘いただきたいです。
all_data.LotFrontage[all_data.LotFrontage.isnull()] = all_data.groupby("Neighborhood").LotFrontage.median()[all_data.loc[all_data.LotFrontage.isnull(),"Neighborhood"]]
次に欠損値の多かったGarageYrBltをみていきます。データを具体的に見てみます。
all_data['GarageYrBlt']
出力結果
all_data = all_data.drop('GarageYrBlt', axis=1)
残りの欠損値のある列について考えましょう。ほとんどの列が、該当の施設が存在しないという意味でデータが欠損していました。そのため、欠損値は、0で埋めていきます。
all_data = all_data.fillna(0)
数字が入っているが、数字の大小関係が予測に影響を与えない方が良いものは文字列にすべきです。
例えば、MSSubClass(住居の種類)は
{'1-STORY 1946 & NEWER ALL STYLES' : 20 ,'1-STORY 1945 & OLDER' : 30 , '1-STORY W/FINISHED ATTIC ALL AGES' : 40,・・・, '2 FAMILY CONVERSION - ALL STYLES AND AGES' : 190 }と割り当てられている場合、数の大小に意味はないので{'1-STORY 1946 & NEWER ALL STYLES' : '20' ,'1-STORY 1945 & OLDER' : '30' , '1-STORY W/FINISHED ATTIC ALL AGES' : '40' ,・・・, '2 FAMILY CONVERSION - ALL STYLES AND AGES' : '190' }に変換します。
num_str_list = ['MSSubClass','YrSold','MoSold'] for i in num_str_list: all_data[i] = all_data[i].astype(str)
#相関係数が0.7以上の変数の組を表示 all_data_corr = all_data.corr() all_data_corr[all_data_corr > 0.7].stack()
出力結果
LotFrontage LotFrontage 1.000000
LotArea LotArea 1.000000
OverallQual OverallQual 1.000000
OverallCond OverallCond 1.000000
YearBuilt YearBuilt 1.000000
YearRemodAdd YearRemodAdd 1.000000
MasVnrArea MasVnrArea 1.000000
BsmtFinSF1 BsmtFinSF1 1.000000
BsmtFinSF2 BsmtFinSF2 1.000000
BsmtUnfSF BsmtUnfSF 1.000000
TotalBsmtSF TotalBsmtSF 1.000000
1stFlrSF 0.801376
1stFlrSF TotalBsmtSF 0.801376
1stFlrSF 1.000000
2ndFlrSF 2ndFlrSF 1.000000
LowQualFinSF LowQualFinSF 1.000000
GrLivArea GrLivArea 1.000000
TotRmsAbvGrd 0.808354
BsmtFullBath BsmtFullBath 1.000000
BsmtHalfBath BsmtHalfBath 1.000000
FullBath FullBath 1.000000
HalfBath HalfBath 1.000000
BedroomAbvGr BedroomAbvGr 1.000000
KitchenAbvGr KitchenAbvGr 1.000000
TotRmsAbvGrd GrLivArea 0.808354
TotRmsAbvGrd 1.000000
Fireplaces Fireplaces 1.000000
GarageCars GarageCars 1.000000
GarageArea 0.889890
GarageArea GarageCars 0.889890
GarageArea 1.000000
WoodDeckSF WoodDeckSF 1.000000
OpenPorchSF OpenPorchSF 1.000000
EnclosedPorch EnclosedPorch 1.000000
3SsnPorch 3SsnPorch 1.000000
ScreenPorch ScreenPorch 1.000000
PoolArea PoolArea 1.000000
MiscVal MiscVal 1.000000
dtype: float64
相関係数を確認してみたところ、
・TotalBsmtSF 1stFlrSF
・GrLivArea TotRmsAbvGrd
・GarageArea GarageCars
以上の列の組に強い相関がありました。GarageCars(車容量)とGarageArea(車庫の大きさ)などは項目の意味からも相関の強さは明らかです。これらの変数は多重共線性の点から一つに絞る必要があります。多重共線性とは学習モデルに用いる説明変数同士で相関係数が高い場合、数値的に不安定な予測を引き起こしてしまうことを指します。そのため、相関関係が高いと考えられる説明変数を外したり、それらの変数を合成して新しい変数をつくる等の処理が必要です。
特徴量エンジニアリングでは予測の精度向上に貢献しそうな新しい変数を追加していきます。
# 特徴量エンジニアリングによりカラムを追加する関数 def add_new_columns(df): # 建物内の総面積 = 1階の面積 + 2階の面積 + 地下の面積 df['TotalSF'] = df['1stFlrSF'] + df['2ndFlrSF'] + df['TotalBsmtSF'] # 一部屋あたりの平均面積 = 建物の総面積 / 部屋数 df['AreaPerRoom'] = df['TotalSF']/df['TotRmsAbvGrd'] # 築年数 + 最新リフォーム年 : この値が大きいほど値段が高くなりそう df['YearBuiltPlusRemod']=df['YearBuilt']+df['YearRemodAdd'] # お風呂の総面積 # Full bath : 浴槽、シャワー、洗面台、便器全てが備わったバスルーム # Half bath : 洗面台、便器が備わった部屋)(シャワールームがある場合もある) # シャワーがない場合を想定してHalf Bathには0.5の係数をつける df['TotalBathrooms'] = (df['FullBath'] + (0.5 * df['HalfBath']) + df['BsmtFullBath'] + (0.5 * df['BsmtHalfBath'])) # 合計の屋根付きの玄関の総面積 # Porch : 屋根付きの玄関 日本風にいうと縁側 df['TotalPorchSF'] = (df['OpenPorchSF'] + df['3SsnPorch'] + df['EnclosedPorch'] + df['ScreenPorch'] + df['WoodDeckSF']) # 2階の有無 df['Has2ndFloor'] = df['2ndFlrSF'].apply(lambda x: 1 if x > 0 else 0) # カラムを追加 add_new_columns(all_data)
このように、設備があるかないかを0,1で分類したり、面積等を合計したりして、新たな特徴量を作ります。工夫次第で様々な特徴量を作成できそうです。
先ほどは、新たに特徴量を作成しましたが、特徴量は多ければ良いというものではありません。ノイズにより予測精度が落ちてしまうことがあるのです。
そこで、相関が高いカラムを片方削除したり、重要度が低いカラムを削除したりする等してノイズによる影響を減らします。
dr_cols = ['GarageCars','1stFlrSF','2ndFlrSF','TotalBsmtSF','TotalSF','TotRmsAbvGrd','YearBuilt','YearRemodAdd','FullBath','HalfBath','BsmtFullBath','BsmtHalfBath','OpenPorchSF','3SsnPorch','EnclosedPorch','ScreenPorch','WoodDeckSF' ] for i in dr_cols: all_data = all_data.drop(i, axis=1)
#ラベルエンコーディングするクラス from sklearn.preprocessing import LabelEncoder #インスタンス LE = LabelEncoder() LE_cols = ['Utilities','ExterQual','ExterCond','BsmtQual','BsmtCond','BsmtExposure','BsmtFinType1','BsmtFinType2','HeatingQC','KitchenQual','FireplaceQu','GarageFinish','GarageQual','GarageCond','PavedDrive','PoolQC','Fence'] for i in LE_cols: #Label エンコーディング LE.fit_transform(all_data[i].values) #データ変換 all_data[i] = LE.fit_transform(all_data[i].values)
# One Hotエンコーディングで生成した列を1つ削除する all_data = pd.get_dummies(all_data,drop_first=True)
#相関係数が0.7以上の変数の組を表示 all_data_corr = all_data.corr() all_data_corr[(all_data_corr > 0.7) & (all_data_corr != 1)].stack()
dr_cols = ['KitchenAbvGr','BldgType_Duplex','BldgType_2fmCon','HouseStyle_1Story','HouseStyle_SLvl','HouseStyle_SFoyer','MSZoning_FV','Exterior2nd_Brk Cmn','Exterior2nd_AsphShn','Exterior2nd_CmentBd','Exterior2nd_HdBoard','Exterior2nd_MetalSd','Exterior2nd_Plywood','Exterior2nd_Stucco','Exterior2nd_VinylSd','Exterior2nd_Wd Sdng','SaleCondition_Partial' ] for i in dr_cols: all_data = all_data.drop(i, axis=1)
from sklearn.preprocessing import StandardScaler #訓練データとテストデータを標準化 sc = StandardScaler() all_data = sc.fit_transform(all_data)
# 訓練データとテストデータに分ける X_train = all_data[:train.shape[0]] X_test = all_data[train.shape[0]:] y = train.SalePrice
def rmse_cv(model): """二乗平均平方根誤差 Parameters: model(obj): Modelオブジェクト Returns: (float)訓練データの出力値と正解値とのRMSE """ # クロスバリデーションによる二乗平均平方根誤差の取得 rmse = np.sqrt( -cross_val_score( model, X_train, y, scoring="neg_mean_squared_error", # 平均二乗誤差を指定 cv = 5)) # データを5分割 return(rmse)
# リッジ回帰モデルを生成 model_ridge = Ridge() # L2正則化の強度を10パターン用意 alphas = [0.05, 0.1, 1, 10, 50, 100, 200, 300, 400, 500] # 正則化の各強度でリッジ回帰を実行 # 5分割のクロスバリデーションでRMSEを求め、その平均を取得 cv_ridge = [rmse_cv(Ridge(alpha = alpha)).mean() for alpha in alphas] # cv_ridgeをSeriesオブジェクトに変換 cv_ridge = pd.Series(cv_ridge, index = alphas) # スコアを出力 print('Ridge RMSE loss:') print(cv_ridge, '\n') # スコアの平均を出力 print('Ridge RMSE loss Mean:') print(cv_ridge.mean()) # 正則化の強度別のスコアをグラフにする plt.figure(figsize=(10, 5)) # 描画エリアのサイズ plt.plot(cv_ridge) # cv_ridgeをプロット plt.grid() # グリッド表示 plt.title('Validation - by regularization strength') plt.xlabel('Alpha') plt.ylabel('RMSE') plt.show()
from sklearn.linear_model import LassoCV # ラッソ回帰モデルで推定する # L1正則化項を4パターンで試す model_lasso = LassoCV( alphas = [1, 0.1, 0.001, 0.0005]).fit(X_train, y) print('Lasso regression RMSE loss:') # クロスバリデーションによる print(rmse_cv(model_lasso)) # RMSEを出力 print('Average loss:', rmse_cv(model_lasso).mean()) # RMSEの平均を出力 print('Minimum loss:', rmse_cv(model_lasso).min()) # RMSEの最小値を出力 print('Best alpha :', model_lasso.alpha_) # 採用されたalpha値を出力
# Learning APIのXGBoostモデルで使用される、データオブジェクトDMatrixを生成する dtrain = xgb.DMatrix(X_train, label = y) #dtest = xgb.DMatrix(X_test) # 決定木の深さ5、(3~9の間で1刻みで設定。5から試してみるといい。) #学習率0.1 params = {"max_depth":5, "eta":0.1} # xgboostモデルでクロスバリデーションを実行 cross_val = xgb.cv( params, dtrain, # トレーニングされるデータ num_boost_round=1000, # 決定木の本数 early_stopping_rounds=50) # アーリーストッピングの監視回数(一般的に50程度が良いとされている) cross_val
# 30回以降の検証データと訓練データのRMSEをグラフにする plt.figure(figsize=(8, 6)) # 描画エリアのサイズ plt.plot(cross_val.loc[30:,["test-rmse-mean", "train-rmse-mean"]]) plt.grid() # グリッド表示 plt.xlabel('num_boost_round') plt.ylabel('RMSE') plt.show()
# xgboostで学習する model_xgb = xgb.XGBRegressor( n_estimators=242, # 決定木の本数 max_depth=5, # 決定木の深さ learning_rate=0.1) # 学習率0.1 model_xgb.fit(X_train, y) print('xgboost RMSE loss:') print(rmse_cv(model_xgb).mean())
lasso_preds = np.exp(model_lasso.predict(X_test)) xgb_preds = np.exp(model_xgb.predict(X_test))
preds = lasso_preds*0.7 + xgb_preds*0.3
solution = pd.DataFrame({"id":test.Id, "SalePrice":preds}) solution.to_csv("ridge_sol.csv", index = False)
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js" type="text/javascript"> MathJax.Hub.Config({ HTML: ["input/TeX","output/HTML-CSS"], TeX: { extensions: ["AMSmath.js","AMSsymbols.js"], equationNumbers: { autoNumber: "AMS" } }, extensions: ["tex2jax.js"], jax: ["input/TeX","output/HTML-CSS"], tex2jax: { inlineMath: [ ['$','$'], ["\\(","\\)"] ], displayMath: [ ['$$','$$'], ["\\[","\\]"] ], processEscapes: true }, "HTML-CSS": { availableFonts: ["TeX"], linebreaks: { automatic: true } } }); </script>
$$ \frac{d}{d x} x^2 = 2x \tag{1} \\ $$
定積分$ \int_{a}^{b}f(x)dx $の値を求めることを,関数f(x)をaからbまで積分するという
Bloggerにソースコードを埋め込む方法として、
Google-code-prettify
を使う方法があります。
Bloggerの、
テーマ→カスタマイズ→HTMLを編集
を選択してください。
そして、<head>と</head>の間(例えば</head>の前)に
以下のコードを追加してください。
<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian' type='text/javascript'/>
</head>を数千行あるコードの中から探すのは大変に思えますが、
「Ctrl + F」を押すと、簡単に探し出せます。
左上に、「search: 」とでるので、そこに「</head>」を入れて
「Enter」を押せば見つかります。
ここまでで、準備は終わりました。
まず、HTMLビューにします。そこにコードを書きます。
そして、コードを<pre class="prettyprint"></pre>ではさみます。
<pre class="prettyprint”>
ここにコードを書く
</pre>
メジャーな言語は、下記のようにclassに追加指定することで、
何の言語のコードなのか自動で判別してくれます。
<pre class="prettyprint lang=python”>
pythonのコードを書く
</pre>
行番号を表示するときは、以下のようにlinenumsを付加します。
<pre class="prettyprint lang=python linenums">
横スクロールバーを付けるには、以下のように
style="overflow:auto; overflow-y:hidden;"を指定します。
<pre class="prettyprint linenums" style="overflow:auto; overflow-y:hidden;">
<pre class="prettyprint lang=python linenums" style="overflow:auto; overflow-y:hidden;">
def test_hello_world():
str = "Hello World"
print(str)
test_hello_world()
</pre>
def test_hello_world(): str = "Hello World" print(str) test_hello_world()