msys2でgtkをインストールする。

msys2でgtkとその依存ライブラリをインストールして、コードをコンパイルしてみる。

msys2はここからインストールできる。

まず、msys2のインストールされたフォルダの中のmsys2.exeを起動する。

そうすると、msys2のコマンド入力画面がでるので、

pacman -S mingw-w64-x86_64-gtk3

と書き込んで実行する。

すると、gtkのインストールが始まる。

インストールが終わると、mingw64のbinの中にdllなどが生成されている。

Getting Started with GTK+: GTK+ 3 Reference Manualを参考にしてなにかgtkのコードを書いてみる。

コードをコンパイルするには、msys2のフォルダの中のmingw64.exeを起動して、コードのあるディレクトリまで移動して以下のコマンドを実行する。

gcc `pkg-config --cflags gtk+-3.0` ファイル名 -o 出力するexe `pkg-config --libs gtk+-3.0`

そして、生成されたexeと同じ階層に、mimgw64/bin の中の依存しているdllをコピー&ペーストする。私はめんどくさいので全部入れている。

cairoやpangoなどgtkが依存しているライブラリも使えるようになっている。

cairoやpangoを自分でビルドするのは非常にめんどくさいので私はこの方法をおすすめする。

ElectronでUncaught ReferenceError: $ is not definedがでるときの対処法。

基本的にElectronでエラーが起きた場合はブラウザの方で一回試してみることをおすすめする。

ブラウザで成功した場合そのエラーはElectronに問題がある。

<script>window.$ = window.jQuery = require('./jquery-バージョン.min');</script>

jqueryの読み込みscriptを上記のコードに置き換える。

これで直らなかった場合、scriptの読み込み順に問題がある可能性が高い。

Rust備忘録002

コードや理解が間違っているところがあったらコメントで教えてください。

 

所有権について

fn main() {
    let v1 = vec![1, 2, 3];
    let h = run(v1);
    println!("{}", v1[0]);
    /// この場合、use of moved value: `v1`というエラーになる。
    /// 理由は、let h = run(v1);のところでv1をムーブ(所有権を別のものに送ること。)
    /// しているため、v1にアクセスできない。
}
fn run(v1: Vec<i32>) -> i32{
    return 42;
}

この場合、参照型にすればよい。

fn main() {
    let mut v1 = vec![1, 2, 3];
    let h = run(&v1);
    println!("{}", v1[0]);
}
fn run(v1: &Vec<i32>) -> i32{
    return 42;
}

ただ、この場合、v1はrunにおいて、値が変更不可になる。

参照渡しするには、&mutをつかう。

fn main() {
    let mut v1 = vec![1, 2, 3];
    let h = run(&mut v1);
    println!("{}", v1[0]);
    ///2が出力される。
}
fn run(v1: &mut Vec<i32>) -> i32{
    v1[0] = 2;
    return 42;
}

このように、参照型の効果を保ちつつ、参照渡しができる。

この所有権についてもっと詳しく知りたい場合は、

https://rust-lang-ja.github.io/trpl-ja-pdf/a4.pdf

を読んでみることをおすすめする。

所有権以外にもRustの基本文法や使い方が載っている。

Rust備忘録001

コードや理解が間違っているところがあったらコメントで教えてください。

 

まずHello, World

fn main(){
    println!("Hello, World!");
}

数値の出力

let x = 10;
println!("{}", x);

変数

let mut x = 10;
x = 12;
println!("{}", x);

標準入力

use std::io;
...
let mut x = String::new();
io::stdin().read_line(&mut x).expect("error");
println!("{}", x.len() - 1);

パターンマッチ

let mut x = 10;
match x {
    1 => println!("x = 1"),
    10 => println!("x = 10"),
    100 => {
        println!("omg");
        return 0;
    }
    _ => {}
}

Skiaのダウンロードとビルドの方法(Windows)

Skiaは、Googleが開発している2Dグラフィックスライブラリで、Google Chromeや、Firefoxなどで使われている。

https://skia.org/

今回は、そのSkiaのダウンロードとビルドの方法について解説していく。

まず、Chromiumなどのビルドに必要なdepot_toolsをインストールする。

Gitをインストールしていない場合は、先にインストールしておく。

 今回は、c:\skiaというフォルダを作ってその中で作業していく。

まず以下のコマンドをgit bashに入力する。

git clone 'https://chromium.googlesource.com/chromium/tools/depot_tools.git'
export PATH="${PWD}/depot_tools:${PATH}"

次に、Skiaリポジトリをダウンロードする。

git clone https://skia.googlesource.com/skia.git
cd skia
python tools/git-sync-deps

注意したいのが、Skiaのビルドで使用するPythonは、2.7系でなければならない。

3.6系だとエラーになるので、先にPython2.7をインストールしておく。

これでSkia自体のダウンロードはできたので、次はSkiaをビルドしていく。

bin/gn gen out/Static --args='is_official_build=true'
bin/gn gen out/Shared --args='is_official_build=true is_component_build=true'

このコマンドで、ビルドファイルを生成できたので、次はdepot_toolsのninjaを使ってSkiaをコンパイルする。

ninja -C out/Static
ninja -C out/Shared

これでコンパイルできたので、次はVisual Studioで使えるようにする。

bin/gn gen --ide=vs out/foo
python gn/gn_meta_sln.py

参考にしたサイト

github.com

https://skia.org/user/build

はてなブログでソースコードを表示する(Google Code Prettify)。

はてなブログGoogle code prettify(ソースコード表示ライブラリ)使えるんじゃねと思い、いろいろ試行錯誤してたらできた。

public static void main(String[] args){
  System.out.println("hello ,world");
}

こんな感じ。

ではやり方を説明していく。

まず管理画面から、デザイン -> カスタマイズ -> ヘッダ -> タイトル下のところに以下を書き込む。

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<script>
prettyPrint();
</script>

これでGoogle Code Prettifyが使えるようになる。

早速試してみよう。

<pre class="prettyprint lang-ソースコードの言語 linenums">
  //ソースコード
</pre>

これでソースコードは表示できるが、若干味気ないのでテーマを追加する。

Color themes for Google Code Prettify

ここからテーマを選び、.cssをクリックして出てきたコードをコピーする。

そして、先ほどの管理画面 -> デザイン -> カスタマイズ -> ヘッダ -> タイトル下のところに

<style>
  //先ほどコピーしたコード
</style>

と書き込む。

すると、ソースコードのテーマが変更される。

参考にしたサイト様

技術ブログの「ソースコード」表示を効果的にカスタマイズする方法 | maesblog

はてなブログでソースコードを表示する(独自Syntax Highlight作成)。

はてなブログではMarkdownを使ってソースコードを色付きで表示することが出来る。

public static void main(String args[]){
    System.out.println("hello, world!");
}

こんな感じ。

方法を説明していく。

まず編集モードをMarkdownに変更する。

f:id:Decoy_Mine:20180322163106p:plain

\```ソースコードの言語
//ソースコード
\```

と書く。 (バックスラッシュは除いてください)

そのままでも十分だが、背景色や文字の色を変えたい場合は、管理画面から、デザイン -> カスタマイズ -> デザインCSSと進んでいき、cssの欄に

.entry-content pre.code {
    background-color: カラーコード; /* 背景色 */
    color: カラーコード; /* デフォルトの文字色 */
}
.synSpecial { color: カラーコード } 
.synType { color: カラーコード }
.synComment { color: カラーコード }
.synPreProc { color: カラーコード }
.synIdentifier { color: カラーコード }
.synConstant { color: カラーコード }
.synStatement { color: カラーコード }

という感じで書いていく。

参考までに、私の使っているSyntax Highlightも書いておく。

.entry-content pre.code {
    background-color: #000000;
    color: #93a1a1;
}
.synSpecial { color: #dc322f }
.synType { color: #b58900 }
.synComment { color: #657b83}
.synPreProc { color: #cb4b16 }
.synIdentifier { color: #1a7cbf }
.synConstant { color: #2aa198 }
.synStatement { color: #859900 }

3月23日追記 : Google Code Prettify(ソースコード表示ライブラリ)を使ってコードを表示できた。

decoy-mine.hatenablog.com

多分こっちのほうが良い。