読者です 読者をやめる 読者になる 読者になる

【Electron】ウィンドウサイズ指定をコンテンツサイズに指定する方法

Electronの情報ってなかなか検索してもヒットしない。
日本語はもちろん、英語でもそんなに出てこないので辛いところです。

そんな私が直近でこまったのがウィンドウサイズ。


Electronを触ったことがある人ならわかると思うが、
new Browser()で指定したwidthとheightはフレーム込みの高さと幅になってしまいます。

var win = new Browser({
    width: 800px,
    height: 600px
  })

この場合フレーム込みで800*600になるため、
コンテンツの大きさ(HTML)は790px*598pxとか、
なんかそんな感じの大きさになります。
なのでcssで目一杯のwidth600pxに設定したりすると、
溢れてしまってスクロールバーが表示されてしまう事態に。

これだと、非常に作りにくいですし、フレームの大きさが1pxでもずれた場合
スクロールバーが表示されてしまって困る!


そこで、ElectronのuseContentSizeというオプションをtrueにすることで、
widthとheightで設定するサイズをコンテンツの大きさにすることができます。

var win = new Browser({
    width: 800px,
    height: 600px,
    useContentSize: true
  })

フレームの内側のコンテンツのサイズが800*600になるため、
cssで600pxを指定してもスクロールバーが表示されることはない!


それでもスクロールバーが表示される場合
useContentSizeで指定してるのにcssで目一杯していすると
スクルールバーがでてくんぞ!と言う場合はhtmlを疑いましょう。

開発者ウィンドウなどでコンテンツのサイズを観てみることをおすすめします。


おそらく、htmlかbodyにmarginが設定されていませんか?

html {
  margin: 0px;
}
body {
  margin: 0px;
}

これでコンテンツの要素はちゃんとウィンドウの要素にぴったり収まると思います。

【jQuery】on()で関数呼び出し

javascript jquery jQuery

ボタンをクリック時のイベント定義は大体下のような感じ。

$(function(){
  $("#button").on("click", function(){
    // クリック処理
  });
});

なんだけど、
無名関数ではなくて名前付き関数を呼び出すこともできる。

$(function(){
  $("#button").on("click", logHello);

  function logHello() {
    console.log("hello, world");
  }  
});


定義した関数は呼び出されているので、即時関数の外に出してもOK

$(function(){
  $("#button").on("click", logHello);
});

function logHello() {
  console.log("hello, world");
}  


注意として、関数呼び出し時に括弧をつけると上手く動かないので注意。
logHello関数はlogHello()ではなくlogHelloと呼び出す必要がある。

$(function(){
  // これだと思ったように動かない
  $("#button").on("click", logHello());

  function logHello() {
    console.log("hello, world");
  }  
});

あとは、関数呼び出しでもthisで呼び出し元を取得できます。
そのとき呼び出し側ではなにも指定しなくて大丈夫。

$(function(){
  $("#button").on("click", logHello);
});

function logHello() {
  // thisには呼び出し元が入っている。
  console.log(this);
  console.log("hello, world");
}  

event要素も取れますが、eventの場合は明示的に仮引数で受け取る必要があるみたいです。

$(function(){
  $("#button").on("click", logHello);
});

function logHello(event) {
  // eventには呼び出し元が入っている。
  console.log(event);
  // eventのtargetはthisと同じ
  console.log(event.target);
  console.log("hello, world");
}  

【javascript】空文字チェックを少しスマートに書く

javascript

文字列が空なのかどうかを判定する時、素直に

if (str == "") {
  // 空文字の時の処理
} else {
  // 空文字でない時の処理
}

と書いていたのですが、
C#なんかでは文字列が空文字かどうかの判定にはemptyメソッドが用意されています。
確かjavaにも用意されていたはず。

わざわざイコールで結んでいると、複数指定すると長くなっちゃうんですよね。

//なげぇ(´・ω・`)
if (str1 == "" && str2 == "" && str3 == "" && str4 == "" &&) {
  // 空文字の時の処理
} else {
  // 空文字でない時の処理
}

そこでjavascriptにも何かそういう関数が用意されていないかとちょっと調べたんですがない模様。
ただ、こちらの記事を読んでいる時に、真偽値を使えばいいのかと思いました。
phiary.me



javascriptでは、
文字列はtrue、
空文字はfalse
という真偽値になっています。

なので以下のように書くことができるようです。

// 短くなった(・ω<)
if (!str1 && !str2 && !str3 && !str4) {
  // 空文字の時の処理
} else {
  // 空文字でない時の処理
}

ただ、真偽値判定知らないで読んだら意味不明だなこりゃ

【Scala】groupBy関数でやさしいグルーピング

Scala

groupBy関数についてちょっと色々試してみる。

最近よくわからない関数はREPLで試すということを学習した。
RubyとかLispではよく活用していたのだが、Scalaではすっかり失念していた。



groupByというのはコレクションメソッドで、
キーでグルーピングしたMapを返します。

なんかようわからん。
てか、scalaのメソッドは説明読んでも全く使い方のイメージが湧いてこない。
単純にscalaのことよくわかってないってのが理由だけども、悔しいねぇ


とりあえず使ってみるのが一番!

val peopleList 
= List(("taro", 21, "Tokyo"), ("hanako", 19, "Saitam"), ("tanaka", 19, "Tokyo"))

サンプルとしてリストを用意した。
このリストは、(名前、年齢、出身地)という形式になっていて、3人分入っている。

これを出身地ごとにグループ化してみる。

val result = peopleList.groupBy(_._3)
println(result)
Map(Tokyo -> List((taro,21,Tokyo), (tanaka,19,Tokyo)), Saitam -> List((hanako,19,Saitam)))

TokyoとSaitamaというkeyでグループ化されたMapが生成されていることが確認できた。

もう少し詳しく見ていこう。
groupBy関数やmap関数、foreachなどのコレクション関数は引数に関数を受け取り、
コレクションの各要素に適用した結果を返す。
なんとまあわかりにくい説明だろうか。

peopleList.groupBy(n => n._3)

groupBy関数はコレクションメソッドなので、コレクションの各要素を取り出す。
まず1週目にpeopleListの1つ目の要素である、("taro", 21, "Tokyo")という要素が、
groupBy(n => n._3)のnに入る。
そしてn._3でnの3つ目の要素をkeyとして返している。
つまり、
("taro", 21, "Tokyo")の3つ目の要素"Tokyo"をkeyとする。

この動きを順々に繰り返し、重複したkeyの場合はグループ化するので、
結果として出身地でグループ化することができた。

最初のサンプルでは、

peopleList.groupBy(_._3)

と書いたが、これは各要素を_(アンダースコア)で受け取り、その_3を指定しているだけ。


そして、このようにグループ化して出身地のリストだけ得たい場合には、keysを使う。

val lives = peopleList.groupBy(_._3).keys
println(lives)
Set(Tokyo, Saitam)

Setになって取得できていることがわかる。
Setは重複を許さないリスト型だ。つまり取得できたkeyは重複されていないことがここでもわかる。

では逆に、valueの方を取得したい場合はというと、valuesを使う。

val values = peopleList.groupBy(_._3).values
println(values)
MapLike(List((taro,21,Tokyo), (tanaka,19,Tokyo)), List((hanako,19,Saitam)))

MapLikeの中にそれぞれのvalueのリストが入っている。



では今度は年齢でもグループ化してみよう。
出身地と同じことをするだけ。

val result = peopleList.groupBy(_._2)
println(result)
Map(19 -> List((hanako,19,Saitam), (tanaka,19,Tokyo)), 21 -> List((taro,21,Tokyo)))

今度は2番目の要素を指定してあげるだけ。
ばっちりグループ化できました。

【Scala】for式のyieldがよくわかんなかった

Scala

scalaってなんか難しいんですよね。

最近いまいち理解してなかったのがfor式のyield。
色々自分で書いてみてなんとなくこれかなって結論に達した。
コップ本で学習してんのになんで理解できないのよって、自分で思う。悲しい。

よくわからなかった点

yieldをつかわない時

val ary = Array(1, 2, 3)
for (num <- ary) {
  println(num)
}
1
2
3

yieldを使った時

val ary = Array(1, 2, 3)
for (num <- ary) yield {
  println(num)
} 
1
2
3

これ両方共numの値を出力しているので結果は一緒


yield使っても使わなくてもコレクションの中身に対して何かできるなら
yield使わんでもよくない??って疑問に思った。


もうひとつサンプル。

val ary = Array(1, 2, 3)
for (num <- ary if num % 2 == 0) {
  println(num)
}
2
val ary = Array(1, 2, 3)
for (num <- ary if num % 2 == 0) yield {
  println(num)
}
2

配列の要素を順番にnumに入れつつ、
if文で偶数の場合だけにしている。
その結果をprintlnで表示しているのだが、
こちらもyieldを使っても使わなくても一緒。

???yieldって何者なんだ・・・??

yieldはこう使う

結論として、yieldはfor式で得られた結果に対して新たにコレクションを生成する。
本にしっかりと書いてあるし、yieldで検索すればみんなそう書いてる。
ちゃんと読んではいたんだけど、おつむが弱かった。。

どういうことかというと、

val ary = Array(1, 2, 3)
val evens = for (num <- ary if num % 2 == 0) yield num

for式で配列aryの要素に対してフィルターをかけたとする。
というか上のサンプルでは偶数フィルターをかけている。
結果として、「2」だけがnumに入る。
その「2」というフィルター後の結果で新しくコレクション(配列)を生成して返すのがyield
なのでevensという変数にはArray(2)が入っているということだ。

それでは、yieldをつかわない版ではどうなるか。

val ary = Array(1, 2, 3)
val evens = for (num <- ary if num % 2 == 0) {
    num
  } 

if式の結果によって中括弧の中のnumには2だけが入るが、新しくコレクションを生成しているわけではないので、
結果はUnitが帰りevensに入る。


yieldを使うことによってfor式の結果をコレクションとして返せるっていうことでした。

個人的に良かったvimカラースキームまとめ!【随時更新】

vim

おすすめvimカラースキームと検索してみても、
大体8割がmolokaiで残りの2割がhybridな感じなので色々紹介してみます。

最近、下のURLをふらふらしてカラースキームを試すのにハマっているので、
気に入ったものがあれば随時更新していきます。
vimcolors.com

目次

molokai

https://github.com/tomasr/molokai
まあまずはここから。
vimの超定番スキームmolokai。個人的にもベストスキームだと思ってます。
コントラスト強めですが、はっきりとしたシンタックスハイライトが抜群の見やすさを誇ってます。
f:id:AddyPlusy:20161103132027p:plain
f:id:AddyPlusy:20161103205206p:plain

hybrid

https://github.com/scwood/vim-hybrid
これも人気のスキーム。
molokaiとは打って変わってコントラストを抑えたテーマ。
コントラストは抑えてますが、シンタックスハイライトが見やすい。
molokaiがコントラスト強めな定番。
hybridがコントラスト抑えめな定番と言ったところでしょうか。
f:id:AddyPlusy:20161103205319p:plain
f:id:AddyPlusy:20161103205335p:plain

eva01

https://github.com/hachy/eva01.vim
いきなりのマニアック路線。
名前からもわかるとおり、エヴァンゲリヲンエヴァ初号機をイメージしたカラースキーム(だと思う)
エヴァのカラーリング通り、紫をメインにサブに緑を据えながらも、
キャラ物のなので見やすさはおざなり。。なんてことは全くありません。
どの言語でもシンタックスハイライトが見やすく不満はほぼなし。
ヴィジュアルモードも見やすいのが素晴らしい。
私の現在メインスキームです。
f:id:AddyPlusy:20161103205453p:plain
f:id:AddyPlusy:20161103205511p:plain

wombat256mod

https://github.com/michalbachowski/vim-wombat256mod
コントラストは少し抑え目ながらもしっかりカラフルなシンタックスハイライト。
暗めな黄色が結構主張してくる感じですね。
結構見やすいです。
全体的に明るめな色が多い印象を受けました。
明るめな水色と黄色など、ちょっと南国な印象も受けますね。
f:id:AddyPlusy:20161103213437p:plain
f:id:AddyPlusy:20161103213459p:plain

adventurous

https://github.com/philpl/vim-adventurous
全体的に暗めな配色が特徴、かな?
ポップな印象がいいですね。暗めな色使いなので長時間でもそこまで目がきつくなさそう。
色々なシンタックスで試してみましたが、視覚的に色使いがきつい!というものはない感じでした。
f:id:AddyPlusy:20161103214651p:plain
f:id:AddyPlusy:20161103214701p:plain

1989

https://github.com/sonjapeterson/1989.vim
このテーマは日本でも大人気の歌手テイラースウィフトをイメージしたテーマのようです。
1989という曲があるのかと思ったのですが、アルバム名のようですね(違ったらごめんなさい)
テイラーファンは選ぶことを強いられるのではないでしょうか(適当
2日ほどこのテーマ使いましたけど、良い。
すごく良い。使いやすいです。
f:id:AddyPlusy:20161106221122p:plain
f:id:AddyPlusy:20161106221136p:plain

am-colors

https://github.com/muellan/am-colors
ダンな色合いでvimであることを忘れてしまうような色合いです。
背景の黒も明るめなのでなおのこと現代感があります。見やすい!
おしゃれ度高めです(^^ゞ
f:id:AddyPlusy:20161108225735p:plain
f:id:AddyPlusy:20161108225750p:plain

jellybeans

https://github.com/nanotech/jellybeans.vim
同期が使っているカラースキーム。メジャーなスキームです。
すっかり失念していました。
教えられてすぐ入れて使ってみたのですが、素晴らしい色味ですね。
落ち着いた配色ながらコントラスもそこそこあるので非常にバランスがいいように感じます。
個人的にはmolokaiよりも好きです。
f:id:AddyPlusy:20161116231632p:plain
f:id:AddyPlusy:20161116231651p:plain

【Knockout.js】idとclass属性をバインディングで指定する

javascript html Knockout.js

knockoutのdata-bindでidとclassを指定したかったのだが、
検索しても出てこないしドキュメントにも触れられてないし困ってしまった。

動的にid指定することも多いだろうに。。。


結論として、attrバインディングでできました。
一応、公式のattrのところにやんわりとできそうな雰囲気が書かれてはいるんだけども、
実際にサンプルとして載ってないとできないと思っちゃう。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="../javascript/knockout-3.4.0.js"></script>
</head>
<body>
  お名前:<span data-bind="text: name"></span>

  <script>
    var viewModel = {
      name : "Bob"
    }
    ko.applyBindings(viewModel);
  </script>
</body>
</html>
お名前:Bob

とりあえず公式の一番最初に出てくるサンプルです。
オブジェクトのnameをバインドして表示しています。


では、このspan要素にid指定やclass指定をしてみます

  お名前:<span data-bind="attr: {id: name}"></span>

attrバインドでid属性を指定します。
そのid属性に入れるオブジェクト名を指定してあげればいいです。

<span id="Bob" data-bind="attr: {id: name}">

こんな感じでid属性がバインドされた値になっているはずです。

同様にclassもattrで指定できます。

  お名前:<span data-bind="attr: {class: name}"></span>
<span class="Bob" data-bind="attr: {id: name}">