THE・雑記

ゲームのことだったりITについてだったり記していきます

MacでElectronを始めよう その1

Electronとは

クロスプラットフォーム型の実行フレームワークMacWindowsLinux上で動く

・HTML、CSSJavaScriptなどのWebの技術で作ったものをデスクトップアプリケーション化できる

・開発元はGitHub社で安心

 

Electronでできているサービス

・Slack
Atom 
・Kobito
・Docker GUI
Visual Studio Code など

 

Electronを始めるには

まずElectornはnodejsでできているのでnodejsのインストールが必要です。

(nodejsのインストールは こちら で)

ターミナルを開きnpmでelectronをインストールします。

$ npm i electron -g

 

上のコマンドでインストールは終わり。あっさりですね。

起動はこのコマンド。

$ electron

 

起動するとこんな画面が表示されます 

f:id:tunndoraookami:20181120122414p:plain

 

これで何ができるかというと・・・続きは次回で!

 

中国・深センの超絶LEDマッピング

中国・深セン高層ビルの「超絶LEDマッピング」が桁違いの壮大さとのことでtwitterのつぶやきを見てきた。

 

いやはや、、すごすぎですね。

年内なら毎日やってるみたいなので一度は見に行きたいですね!

最初はプロジェクションマッピングかな?と思ったんですけどツイートを追ってたらLEDパネルのようです。

 

 

ディズニーのシンデレラ城のプロジェクションマッピングで感動している自分からすると、圧倒されそう・・・

npm install のエラーで Refusing to install package with name が出た

 npmでモジュールをインストールしようとしてた時に出たエラー。

npm ERR! Darwin 15.6.0
npm ERR! argv "/Users/xxxxxx/.nvm/versions/node/v8.2.1/bin/node" "/Users/xxxxxx/.nvm/versions/node/v8.2.1/bin/npm" "install" "electron"
npm ERR! node v8.2.1
npm ERR! npm  v4.0.5
npm ERR! code ENOSELF

npm ERR! Refusing to install package with name "electron" under a package
npm ERR! also called "electron". Did you name your project the same
npm ERR! as the dependency you're installing?
npm ERR!
npm ERR! For more information, see:
npm ERR!     <https://docs.npmjs.com/cli/install#limitations-of-npms-install-algorithm>
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/xxxxxxx/git/electron/npm-debug.log

 

npmのキャッシュを削除してみたりとか色々試してたけどうまくいかず。

 

よーくエラーを読んでみるとDid you name your project the same で気がつかなきゃいけなかったです。

 

端的に言うとモジュール名と同じ名前のプロジェクト名をつけるとダメみたいです。

 

エラーが出ている人はpackage.jsonの中のnameがインストールしようとしているモジュールと同じ名前ではないでしょうか?

 

さっさとプロジェクト名を変えてインストールしてしまいましょう。

ろくにエラーを読まずに色々試しちゃダメでしたね。反省。

らんまのマグカップですごいアイデア作品に出会った

すごいの見つけてしまった。

らんま1/2の世界では呪泉郷という呪いの泉があって 水をかぶると変身お湯をかぶると元に戻るという設定があります。

この設定をうまく使ったマグカップがこれ!

らんま1/2 呪泉郷の呪いマグカップ

 

なんというか、、感動しました。

発想の転換といいますか、やっぱり商売はアイデアなんだなぁと。

こういった発想ができる人に憧れます。

理系の方への喜ばれそうなプレゼント

面白いものを見つけてしまいました。

 

理系の方には特に喜ばれそう・・・!

レビューには理系彼女への誕生日プレゼントで喜んでいただけたとのこと・・!

 

愛龍社 お勉強マグ 円周率 AR-1187円周率

 

かくいう私も昔は無駄に円周率を覚えたもので、もらったらニヤけてしまいそうです。

 そこまで値段も張らないので、理系彼女へのプレゼントでお困りの方はいかがでしょうか?

 

 

 

nodejsは何でも出来る!WEB待ち受け等

nodejs、皆さん使ってますか?

サーバーで動くjavascriptでリアルタイム通信で使ったりするので有名ですよね。

でも私は細かいことをするときによく使います。

便利なパッケージがたくさんあったりするので、必要な機能だけサクッと入れてさっと動かすのがとても楽。スクリプト言語なんでビルドもいらない。

ファイルの解析とかWebリクエストの結果を解析したりテストしたり。 なんでもできます。すごい簡単にWebサーバーもnodeだけで立てれます。

例えばこんな感じのコードを置いておき、実行するだけでport3000で待ち受けできます。

test.js
var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('hello world');
}).listen(3000, '127.0.0.1');

↑を仮にローカル環境で実行していたらブラウザで(http://localhost:3000)にアクセス出来るようになります。

Visual Studio Codeをダウンロードして上のコードを貼り付けて実行する。これだけでいけます。

Visual Studio Code - Code Editing. Redefined

nodejsのエディタはこれがオススメ。デバッグも簡単。

ただ、非同期処理なので少し癖があるので、理解した上で使わないとドツボにはまります。。。

でもシンプルなことをするにはすごく簡単なので是非利用して見てください。

Youtube Premium を始めるならiPhone、iPadユーザは気をつけて!

Youtubeを広告なしで見れるようになるYoutube Premium

 

他にも動画のダウンロードをしておいてオフライン再生や、Youtube Musicなどのバックグラウンド再生、Youtube Originalsという映画などを見れるようになるサービスなどがついてて月1180円ということ。

 

Youtubeをかなり利用している人がターゲットとなりそうです。

 

バックグラウンド再生 & Youtube Music & オフライン再生 はうまく使いこなせれば、他のサービスを喰ってしまいそうですね。

ただ、YouTube Premiumに入ろうと思ってるiPhoneiPadユーザーは要注意。

アプリからだと値段が大分違い月1550円

 

ブラウザ・またはPCから購入した方がお得です。

ファミリータイプというのもあります。

自分を除く同世帯の最大5人の家族を登録できて月1780円、アプリからだと2400円。

 

とりあえずバックグラウンド再生はAndroidならごにょごにょすればやりようはありますが、機能としてはかなり優秀なので標準でできるのはかなり使い勝手が良さそう。

 

www.youtube.com