Electron,JavaScript

こんにちは、しきゆらです。

今回は、electron-builderというものを触ってみます。

 

私は、よく使うサイトをElectronアプリとして書き出して使っています。

ビルドはelectron-packagerというものを使い、時々Electronをビルドしていました。

先日久々にビルドしていると、エラーが出て動かなくなっていました。

正直、NodeやElectronについてはにわか程度の知識しかなく、更新情報なども追えているわけではありませんでした。

調べてみると、electron-builderというものもあるということで、今回はこっちの方を使ってみました。

 

簡単ではありますが、記録として残しておきます。

といっても、参考サイトをほぼそのままやっただけ。

参考サイトは以下です。

electron-builderでElectronアプリのビルド

https://qiita.com/nanairo24/items/73356574b0dc65c0e617

 

Mac,Ruby

こんにちは、しきゆらです。

毎年、この時期はRubyの最新版リリースが熱いですよね。

ということで、早速環境を作っていきましょう。


Rubyは、Ruby3x3という目標のもと、高速化のための改良が続けられています。

今回は、高速化のための変更としてJITコンパイラが導入されました。

オプションとして–jitをつけると、JITを使って動作するようです。

詳しい更新内容については、以下を参照して下さい。

高速化以外の変更でよく使いそうなものとしては、「終端なしRange」の追加でしょうかね。

あとは、何気にCSVファイルの扱いも高速になっているようです。

さて、それでは実際にコンパイルしてみて、どのくらい早くなったのかを、簡単なベンチマークを取りながらみてみましょう。

Ruby

こんにちは、しきゆらです。

今回はExcelで書き出したCSVファイルをRubyで読み込むときに躓いたところをメモしておきます。

 

状況

Excelで管理していたとあるデータをCSVで書き出し、Rubyで変換しつつDBへ突っ込もうと思っていました。

CSVファイルは、先頭にヘッダーとなるタイトルをつけていて、2行目からが実質のデータでした。

 

ExcelでCSVファイルを吐き出す

Excelで書き出すことができるCSVファイルは2種類あります。

  • 「一般的な形式」の中にある「CSV UTF-8 (コンマ区切り) (.csv)」
  • 「特別な形式」の中にある「CSV (コンマ区切り) (.csv)」

「特別な形式」では、文字コードがShift-JISのため「一般的な形式」の方で吐き出しました。

あとは、RubyのCSVライブラリで読み込んでforeachなどですべての行を読み込めば終わり。

・・・と思っていた時代が私にもありました。

このUTF-8が曲者でした。

 

詳しくは、続きから。

 

Ruby

こんにちは、しきゆらです。

今回は、タイトル通りですが、GoogleのAPIを利用したアプリケーションを作るときの流れを見ていきます。

大まかな流れとしては、以下のとおりです。

  • Google Cloud Consoleから、APIを有効にする
  • APIを叩くための認証を通す
  • 認証情報をもとに、APIを叩く

では、それぞれ見ていきます。

Ruby,Slack

こんにちは、しきゆらです。

前回・前々回とSlackとのやり取りをさっくりと確認していました。

前回の記事

【Ruby】Slack Botことはじめ

前々回の記事

【Ruby】Slack Appことはじめ

タイトルが似ているので間違えそうですね・・・。

Slack AppがBotも含んだ広い意味でのSlack上で動くアプリ全般を表しています。

Slack BotはAppの中でもBotとして振る舞うようなアプリを指しています。

 

今回は、Slack Botでもう少し複雑なこともしたいので、RTMを利用してみます。

 

RTMとは?

タイトルにもある通り、Real Time Messaging APIの略で

Slackと常に接続し、ユーザの動きを監視して特定の行動が起こったら反応する、というようなことができるAPIです。

例えば、

  • ユーザが入力を始めたとき、通知する
  • メッセージが変更されたとき、前後の差分を表示する

などができそうです。

この辺は発想次第でなんとでもできそうですね。

 

では、実際に使って行きます。

 

Ruby,Slack

こんにちは、しきゆらです。

前回はSlackのAppを作ってみました。

前回の記事

【Ruby】Slack Appことはじめ

 

今回は、Botを作っていきます。

といっても、前半は前回の記事とほぼ同じになります。

詳しい手順は、続きからどうぞ。

 

Ruby,Slack

こんにちは、しきゆらです。

今回は、最近話題のSlackのAppを作ってみます。

 

Slackは、最近色んな所で使われているチャットツールです。

こいつは、ただのチャットツールではなく、様々なAPIやサービスと連携できたり

アプリとして自分で拡張することができるなど、自由度がかなり高いツールとなっています。

 

いろんな事ができるようAPIも公開されています。

これを利用して自分用のAppを作ってみましょう。

 

JavaScript,React

最近のフロントエンドは、様々なツールやフレームワーク、ライブラリ等を利用し、

いろいろなものを組み合わせてコーディングしているようです。

こうなってくると、細かいファイルが沢山生成されていきますね。

それぞれの管理をどうするのか、というと細かいファイルをガッチャンコとまとめてくれるツールを利用するわけですね。

 

今回触るparcelもがっちゃんこしてくれるツールの一つです。

公式サイト

https://parceljs.org

特徴といえば、設定ファイルがないこと。

Webpackは便利で情報も多く、導入している方も多いかと思いますが、設定ファイルを作るのが、なんとも面倒。

parcelさんは、そんな面倒さをなんとかしてくれるかもしれない救世主となるのか。

 

ということで、今回はparcelを導入し実際に実行してみて便利さを味わっていきます。

 

JavaScript

こんにちは、しきゆらです。

台風の影響で天気が悪いですね。

それに伴い、やる気もどこかに飛んでいってしまいました。悲しい。

 

以前、JSで特定の要素のみを前/後ろにまとめる記事を書きました。

【JS】特定のものを前/後ろにソートする

https://wp.me/p6IU5Y-cm

この後、色んなサイトを眺めていると、よりきれいに書く方法を知ったのでメモしておきます。

 

眺めたサイトは以下。

JSのsortに渡す関数は、正負もしくは0を返すことでソートしてくれます。

これを生かして、より簡単に各方法を示してくれていました。

 

今までは、以下のように愚直に分岐させていました。

function(item1, item2){
  if(item1 < item2) return -1;
  else if(item1 > item2) return 1;
  else return 0;
}

しかし、比較するものを計算して、その結果を返す関数を渡しても良いとのことでした。

例えば以下のような感じ。

array = [1,2,3,4,5];
array.sort(function(item1, item2) {
  return item1 - item2;
});

item1とitem2にはarrayの中にある数が渡されてきます。

この2つを計算し、その結果をそのまま返してしまうのです。

パッと見はよくわかりませんが、計算の結果は以下のようになるはずです。

  • item1 < item2 のとき、item1 – item2 < 0
  • item1 = item2 のとき、item1 – item2 = 0
  • item1 > item2 のとき、item1 – item2 > 0

このようになり、きちんとソートしてくれるわけですね。

 

これは、目からウロコでした。

条件式で記述すると3行は使う内容ですが、引き算で表現すると1行で済んでしまいますね。

正直パっと見てわからないと思うので

可読性を取るか、記述量を取るか、という状況かな、と思います。

 

なお、以前の記事を今回の方法で書き換えるとするとこうなると思います。

array = [1,2,3,4,5,6,7,8,9];
array.sort((item1, item2) => {
  return 3 - item1;
});
// => [3, 4, 5, 6, 7, 8, 9, 2, 1]

このようにすると

  • item1 < 3 のとき、 3 – item1 > 0
  • item1 = 3 のとき、 3 – item1 = 0
  • item1 > 3 のとき、 3 – item1 < 0

となり、想定通りの動きをしてくれます。

 

今回はここまで。

おわり。

JavaScript,React

こんにちは、しきゆらです。

最近、怖いと思っていたライブラリやフレームワークは、使ってみると大したことないということに気づき始めました。

Reactさんもその一つです。

基本的なReactの環境構築や使い方をまとめようと思っていますが、今回はちょっとしたメモです。

 

環境

Webpack、Babelを使ってES6をトランスパイルするという状況です。

 

Uncaught TypeError: this.setState is not a function

Reactでstateを変更するときにお世話になる関数であるsetState。

この間、stateを変更すべくsetStateを実行していたら「Uncaught TypeError: this.setState is not a function」とエラーが・・・。

 

コードはこんな感じでした。

import SubComponent from './SubComponent';

class MainComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: props.data,
    }
  }

  updateState(data) {
    this.setState({
      data,
    })
  }

  render(){
    return(
      <SubComponent
        updateState={this.updateState}
      />
    );
  }
}

Mainの方のデータをSubから更新しようとしています。

このとき、上記のようなエラーが起こりました。

 

原因と対策

原因は「this.updateState」のthisがundefinedになることが問題のようです。

対策としては、classで定義する場合constructor内でbindしないと行けないようです。

constructor(){
  super(props); 
  this.state = { data: props.data }

  this.updateState = this.updateState.bind(this); // <= これが重要
}

これでエラーが出ずに更新できるはずです。

わかってしまえば案外簡単ですが、そうでないと無駄に時間がかかってしまいますよね。

 

今回はここまで。

おわり