2016年6月30日木曜日

JavaScriptで書かれたコードエディタの「Ace」

JavaScriptで書かれたコードエディタの「Ace」を組み込んでみました。動作はもちろんなのですが、様々なデザインが用意されていて、カッコイイです!

<script src="/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/javascript");
</script>

<div id="editor"></div>


参考サイト
テキストエディターを作ってElectronの基礎を学ぼう! HTML5でPCアプリ開発入門(ICS MEDIAさん)

2016年6月29日水曜日

Electronで、ファイル保存

Electronで、ファイル保存です。 dialog.showSaveDialogで、ダイアログを出して、保存先を指定し、コールバック関数でファイル書き込みという流れになります。「ほげほげー」というテストの文章が保存されていました。馬鹿な文章ですが、嬉しい。涙が出そう。

renderer.js
const remote = require('electron').remote;
const {dialog} = require('electron').remote;
var fs = require('fs');

var window = remote.getCurrentWindow();
var options = {
  title: 'タイトル',
  filters: [
    { name: 'ドキュメント', extensions: ['txt', 'text']},
    { name: 'All Files', extensions: ['*'] }
  ],
  properties: ['openFile', 'createDirectory']
};
dialog.showSaveDialog(window, options,
  // コールバック関数
  function (filename) {
    if (filename) {
      var data = 'ほげほげー';
      writeFile(filename, data);
    }
  });
console.log('saved!');

function writeFile(path, data) {
  fs.writeFile(path, data, 'utf8', function (err) {
    if (err) {
      return console.log(err);
    }
  });
}

参考サイト
dialog(Electron)
テキストエディターを作ってElectronの基礎を学ぼう! HTML5でPCアプリ開発入門(ICS MEDIAさん)
fs.writeFile(file, data[, options], callback)(Node.js Documentation)
Electronで、ダイアログ

2016年6月28日火曜日

Electronで、ファイルオープン

Electronで、ファイルオープンです。 fs.readFileの説明を必死に探しましたが見つからず。最終的に、Node.jsの機能であることに気づきました(笑)。何もわかっちゃいないので、躓くことが多いです。

renderer.js
const remote = require('electron').remote;
const {dialog} = require('electron').remote;
var fs = require('fs');

var window = remote.getCurrentWindow();
var options = {
  title: 'タイトル',
  filters: [
    { name: 'ドキュメント', extensions: ['txt', 'text']},
    { name: 'All Files', extensions: ['*'] }
  ],
  properties: ['openFile', 'createDirectory']
};
dialog.showOpenDialog(window, options,
  // コールバック関数
  function (filenames) {
    if (filenames) {
      readFile(filenames[0]);
    }
  });

function readFile(path) {
  fs.readFile(path, 'utf8', function (err, data) {
    if (err) {
      return console.log(err);
    }
    textarea.innerHTML = data;
  });
}

参考サイト
dialog(Electron)
テキストエディターを作ってElectronの基礎を学ぼう! HTML5でPCアプリ開発入門(ICS MEDIAさん)
fs.readFile(file[, options], callback)(Node.js Documentation)
Electronで、ダイアログ

2016年6月27日月曜日

Electronで、ファイルのドラッグ&ドロップ(File Object)

Electronで、ファイルのドラッグ&ドロップ(File Object)です。確かに、これでファイルのパスは拾えますが、この先の機能が問題ですよね。

const holder = document.getElementById('holder');
holder.ondragover = () => {
  return false;
};
holder.ondragleave = holder.ondragend = () => {
  return false;
};
holder.ondrop = (e) => {
  e.preventDefault();
  const file = e.dataTransfer.files[0];
  console.log('File Path:', file.path);
  return false;
};

参考サイト
File Object(Electron)
Electronでファイルのドラッグ&ドロップを実装する(Qiita)

2016年6月26日日曜日

Microsoft、C言語を拡張した新しいプログラミング言語「Checked C」をオープンソースでリリース

Microsoft、C言語を拡張した新しいプログラミング言語「Checked C」をオープンソースでリリースしたとのこと。
C言語はポインタの扱いを間違えると本来アクセスしてはいけないメモリを指した操作をしてしまうことがあり、これがバグや脆弱性の原因の1つになっている。「Checked C」はこうした問題を回避することを目指してC言語の機能を拡張するもので、ポインタに対してあらかじめ範囲情報を持たせておき、ポインタの指し示す先が範囲内に収まっているかをチェックできるようにした内容になっている。



参考サイト
Microsoft、C言語を拡張する「Checked C」を開発中(マイナビニュース)
Microsoft、C言語を拡張した「Checked C」リリース(Think IT)

2016年6月25日土曜日

Fedora 24がリリース

Fedora 24がリリースされました。
Fedora 24 CloudにOpenShift Originが追加されたことで、FedoraユーザーはLinuxコンテナの最新のイノベーションを、開発だけでなく配備やオーケストレーションの場面でも利用できるようになった


参考サイト
「Fedora 24」がリリース--クラウド向け機能が充実(ZDNet Japan)

2016年6月24日金曜日

Electronアプリアイコンの変更でエラー(spawn wine ENOENT)

Electronアプリアイコンの変更でエラー(spawn wine ENOENT)です。アイコン(--icon=icon.ico)を指定すると、エラーで止まってしまいます。何度やってもダメ。挫折です。諦めました。


$ electron-packager . appname --out=dist --platform=win32 --arch=x64 --version 1.2.2 --icon=icon.ico
Packaging app for platform win32 x64 using electron v1.2.2
spawn wine ENOENT

$ electron-packager . appname --out=dist --platform=win32 --arch=x64 --version 1.2.2
Packaging app for platform win32 x64 using electron v1.2.2

参考サイト
Not able to compile for Windows on Mac(electron-userland/electron-packager)

2016年6月23日木曜日

JavaScriptのコーディングスタイル検証ツール「ESLint」

JavaScriptのコーディングスタイル検証ツール「ESLint」を試してみました。厳しいチェックにより、エラーの嵐になります(笑)。最初にきちんと設定ファイルを用意しておかないと、使いづらいものになってしまいそうな気がします。.eslintrc ファイルでチェック項目が設定可能です。チェックルールはこちら

npm install -g eslint
eslint --init
eslint ○○.js


参考サイト
ESLint 最初の一歩(Qiita)
ESLintの設定事始め(Umi Uyuraのブログさん)

2016年6月22日水曜日

Electronで、トレーメニュー(Tray)

Electronで、トレーメニュー(Tray)です。カッコイイ(笑)! アイコンに凝りたくなってしまいます。

Linuxの場合は、libappindicator1をインストール
sudo apt-get install libappindicator1
main.js
const Tray = electron.Tray;
const Menu = electron.Menu;

var appIcon = null;
app.on('ready', () => {
  appIcon = new Tray('./icon.png');
  var contextMenu = Menu.buildFromTemplate([
    { label: 'メニュー1', type: 'radio' },
    { label: 'メニュー2', type: 'radio' },
    { label: 'メニュー3', type: 'radio', checked: true },
    { label: 'メニュー4', type: 'radio' }
  ]);
  appIcon.setToolTip('マイクのテスト中です。');
  appIcon.setContextMenu(contextMenu);
})


参考サイト
electron/tray(GitHub)
クロスプラットフォームなアプリ作成ツール「Electron」で遊ぶ その9:メニューバー(Bye Bye Mooreさん)
JavaScript (Electron) を使ってアプリの見栄えを整える(Qiita)

2016年6月21日火曜日

ElectronのBootstrap? Macライクな美しいUIを実現できる「Photon」

ElectronBootstrap? Macライクな美しいUIを実現できる「Photon」 レイアウトやボタン、アイコンなどのElectron用UIデザインセットです。使い方は、スタイルシートとして photon.min.css を組み込むだけ。エレガントで、格調高いプロの仕上がりになります。素晴らしい。

index.html
<link rel="stylesheet" href="../css/photon.min.css">


参考サイト
connors/photon(GitHub)

2016年6月20日月曜日

Electronで、セッション(session)

Electronで、セッション(session)です。ses.cookies.get でセッションデータを取得して、ses.cookies.set で設定できます。

ses.cookies.get(filter, callback)
ses.cookies.set(details, callback)

main.js
const electron = require('electron')
const session = electron.session;

session.defaultSession.cookies.get({url: 'http://www.github.com'}, (error, cookies) => {
  console.log(cookies);
});

const cookie = {url: 'http://www.github.com', name: 'name', value: 'value'};
session.defaultSession.cookies.set(cookie, (error) => {
  if (error) {
    console.error(error);
  }
});

参考サイト
session(Electron)
ElectronでBrowserWindowのCookieを設定する(totorajの開発日記さん)

2016年6月19日日曜日

Ubuntuのsnapパッケージが他の主要ディストリビューションでも利用可能に

Ubuntuのsnapパッケージが他の主要ディストリビューションでも利用可能になるとのこと。ディストリビューションによって異なるパッケージ形式に対応する必要がなくなるというのが良いですよね。
snapは、アプリケーションがサンドボックスによって互いに隔離されるため、セキュリティに優れており、アップデートも自動的にできるという特長を持っている。



参考サイト
Ubuntuの「snap」パッケージが他の主要ディストリビューションでも利用可能に(ZDNet Japan)
Linuxの新しいパッケージフォーマット、Ubuntu生まれのSnapsは、小アプリケーション群のためのコンテナのようだ(TechCrunch Japan)

2016年6月18日土曜日

無料のオープンソース脆弱性スキャンツール「Vuls(VULnerability Scanner)」

無料のオープンソース脆弱性スキャンツール「Vuls(VULnerability Scanner)」 ちょっとソースを覗いてみましたが、goで書かれています。スゴイ! これは使ってみるしかないでしょう!

  • 対象Linuxサーバー
    (Ubuntu、Debian、CentOS、Amazon Linux、RHEL、クラウド、オンプレミス、Docker)
  • プログラミング言語のライブラリやフレームワーク、ミドルウェアの脆弱性スキャン
  • EmailやSlackで通知可能(日本語でのレポートも可能)


参考サイト
脆弱性スキャンツール「Vuls」を無償で公開(時事ドットコム)
あなたのサーバは本当に安全ですか?今もっともイケてる脆弱性検知ツールVulsを使ってみた(Qiita)

2016年6月17日金曜日

Electronで、ショートカットキー(globalShortcut)

Electronで、ショートカットキー(globalShortcut)です。アプリの ready イベントが発生するまで使うべきではないとあります。

globalShortcut.register(accelerator, callback)

main.js
const globalShortcut = electron.globalShortcut; 

// 'CommandOrControl+X' でアプリケーションを閉じる
const ret = globalShortcut.register('CommandOrControl+X', () => {
  console.log('CommandOrControl+X is pressed');
  app.quit();
});

// エラーの場合
if (!ret) {
  console.log('registration failed');
}

参考サイト
globalShortcut(Electron)
クロスプラットフォームなアプリ作成ツール「Electron」で遊ぶ その5:ショートカットキーを設定する(Bye Bye Mooreさん)

2016年6月16日木曜日

Electronで、フレーム無しのウィンドウ(Frameless Window)

Electronで、フレーム無しのウィンドウ(Frameless Window)です。本当は、ウィンドウを透明にする「transparent: true」のオプションも付けたかったのですが、Linuxではうまく動作しないようです。

main.js
const {BrowserWindow} = require('electron')
let win = new BrowserWindow({width: 800, height: 600, frame: false})
フレーム無しのウィンドウにすると、ドラッグできなくなってしまうため、スタイル属性に「-webkit-app-region: drag」を追加する必要があります。

index.html
<body style="-webkit-app-region: drag">
</body>
さらに、このままだとボタンがクリックできなくなってしまうので、スタイル属性に「-webkit-app-region: no-drag」を追加します。

style.css
button {
  -webkit-app-region: no-drag;
}

.titlebar {
  -webkit-user-select: none;
  -webkit-app-region: drag;
}

参考サイト
Frameless Window(Electron)
JavaScript (Electron) を使ってアプリの見栄えを整える(Qiita)

2016年6月15日水曜日

Electronで、ダイアログ

Electronで、ダイアログです。何か処理を行いたい場合は、コールバック関数(callback)に、処理を記述することになるのだろうと思います。

dialog.showOpenDialog(browserWindow, options, callback);

index.html
<script>
const {dialog} = require('electron').remote;

var win = remote.getCurrentWindow();
var options = {
  title: 'タイトル',
  filters: [
    {name: 'Images', extensions: ['jpg', 'png', 'gif']},
    {name: 'Movies', extensions: ['mkv', 'avi', 'mp4']},
    {name: 'Custom File Type', extensions: ['as']},
    {name: 'All Files', extensions: ['*']}
  ],
  properties: ['openFile', 'createDirectory']
};

// コールバック関数(callback)は、省略。
dialog.showOpenDialog(win, options);
</script>

参考サイト
dialog(Electron)
Electronで各種ダイアログ表示(SourceChordさん)

2016年6月14日火曜日

Electronで、プリケーションメニュー

Electronで、プリケーションメニューです。実際にフルスクリーン表示したり、ウィンドウを最小化したり、ヘルプとして外部のウェブページを表示したりすることができます。なかなか面白い。

index.html
<script>
const {remote} = require('electron');
const {Menu, MenuItem} = remote;

const template = [
  {
    label: '編集',
    submenu: [
      {
        label: 'やり直し',
        accelerator: 'CmdOrCtrl+Z',
        role: 'undo'
      },
      {
        label: '再度',
        accelerator: 'Shift+CmdOrCtrl+Z',
        role: 'redo'
      },
      {
        type: 'separator'
      },
      {
        label: '切り取り',
        accelerator: 'CmdOrCtrl+X',
        role: 'cut'
      },
      {
        label: 'コピー',
        accelerator: 'CmdOrCtrl+C',
        role: 'copy'
      },
      {
        label: '貼り付け',
        accelerator: 'CmdOrCtrl+V',
        role: 'paste'
      },
      {
        label: 'すべてを選択',
        accelerator: 'CmdOrCtrl+A',
        role: 'selectall'
      },
    ]
  },
  {
    label: '表示',
    submenu: [
      {
        label: 'リロード',
        accelerator: 'CmdOrCtrl+R',
        click(item, focusedWindow) {
          if (focusedWindow) focusedWindow.reload();
        }
      },
      {
        label: 'フルスクリーン',
        accelerator: process.platform === 'darwin' ? 'Ctrl+Command+F' : 'F11',
        click(item, focusedWindow) {
          if (focusedWindow)
            focusedWindow.setFullScreen(!focusedWindow.isFullScreen());
        }
      },
      {
        label: '開発ツール',
        accelerator: process.platform === 'darwin' ? 'Alt+Command+I' : 'Ctrl+Shift+I',
        click(item, focusedWindow) {
          if (focusedWindow)
            focusedWindow.webContents.toggleDevTools();
        }
      },
    ]
  },
  {
    label: 'ウィンドウ',
    role: 'window',
    submenu: [
      {
        label: '最小化',
        accelerator: 'CmdOrCtrl+M',
        role: 'minimize'
      },
      {
        label: '閉じる',
        accelerator: 'CmdOrCtrl+W',
        role: 'close'
      },
    ]
  },
  {
    label: 'ヘルプ',
    role: 'help',
    submenu: [
      {
        label: '詳細',
        click() { require('electron').shell.openExternal('http://electron.atom.io'); }
      },
    ]
  },
];

const menu = Menu.buildFromTemplate(template);
Menu.setApplicationMenu(menu);
</script>


参考サイト
Menu(Electron)

2016年6月13日月曜日

Electronで、コンテキストメニュー

Electronで、コンテキストメニューです。アプリが起動した画面上でクリックすると、コンテキストメニューが表示されます。何の動きもありませんが、デスクトップアプリらしくなります(笑)。

index.html
<script>
const {remote} = require('electron');
const {Menu, MenuItem} = remote;

const menu = new Menu();
menu.append(new MenuItem({label: 'コンテキストメニュー1', click() { console.log('item 1 clicked'); }}));
menu.append(new MenuItem({type: 'separator'}));
menu.append(new MenuItem({label: 'コンテキストメニュー2', type: 'checkbox', checked: true}));

window.addEventListener('contextmenu', (e) => {
  e.preventDefault();
  menu.popup(remote.getCurrentWindow());
}, false);
</script>


参考サイト
Menu(Electron)

2016年6月12日日曜日

プログラムの構文規則を検索できる検索エンジン「SyntaxDB」

プログラムの構文規則(シンタックス)を検索できる検索エンジン「SyntaxDB」 確かに、あちこち探しまわるより、こういったかたちで一箇所にまとまっていたほうが便利でしょう。

使い方のサンプル
For Loop in C
If Statement in C#
Switch Case in Go



参考サイト
プログラマのための検索エンジン「SyntaxDB」とは?(マイナビニュース)
シンタックスとは|syntax(IT用語辞典)

2016年6月11日土曜日

デスクトップとモバイル環境を切り替えられるAndroid OSの「Maru OS」

デスクトップとモバイル環境を切り替えられるAndroid OSの「Maru OS」 スマートなOSですねぇ。重いノートブックPCを持って出かけるという行為は、過去のものになるかもしれません(笑)!
MaruOS は、Linux ディストリ Debian Linux と Android を一体化したもので、スマートフォンとモニタを HDMI ケーブルで接続すると、自動的に Debian に切り替わる仕組みです。




参考サイト
AndroidとDebianを一体化したカスタムROM「Maru OS」が登場、スマートフォンをモニタに接続するLinuxデスクトップに切り替わる(ガジェット通信)

2016年6月10日金曜日

Electronで、jQueryの読み込み

Electronで、jQueryの読み込みです。確かに、普通に読み込んだのでは、エラーが出て使えませんでした。
試しに$(ドル)マークをjQueryの文字に変えてみましたが、それでもやっぱりダメでした。

index.html
<script>
window.jQuery = window.$ = require('./js/jquery.js');
</script>

参考サイト
ElectronでjQueryがundefinedになる(Qiita)
ElectronでjQueryをスマートに読み込む方法(phiaryさん)

2016年6月9日木曜日

Electronで、ウェブコンテンツを表示「webview」タグ

Electronで、ウェブコンテンツを表示「webview」タグです。これは、わかりやすいですね。

index.html
<webview id="foo" src="https://www.github.com/" 
style="display:inline-flex; width:640px; height:480px"></webview>

参考サイト
electron/web-view-tag.md(GitHub)
ElectronでwebViewの簡易ブラウザをつくってみる(Qiita)
Electron の <webview> 内でリンクを開いたときに外部ブラウザで開く(Qiita)

2016年6月8日水曜日

Electronでアプリのパッケージング(electron-packager)

Electronでアプリのパッケージング(electron-packager)です。Mac OSX、Windows、Linux環境、それぞれのアプリが出来上がるのは感動です。

# electron-packagerのインストール
$ sudo npm install electron-packager -g

# アプリのパッケージ化
$ electron-packager . appname --out=dist --platform=darwin,win32,linux --arch=x64 --version 1.2.2
Downloading electron-v1.2.2-darwin-x64.zip
Downloading electron-v1.2.2-win32-x64.zip
Downloading electron-v1.2.2-linux-x64.zip
[================================>] 100.0% of 43.21 MB (123.45 kB/s)
Packaging app for platform x64 using electron v1.2.2
Wrote new apps to:
dist/appname-darwin-x64
dist/appname-win32-x64
dist/appname-linux-x64

参考サイト
Electron で実現するクロスプラットフォームなデスクトップアプリ開発(iroha Tech Noteさん)
Electron 1.0でデスクトップアプリ開発超入門――動作の仕組み、基本的な使い方、セキュリティの懸念点 (3/3)(@IT)

2016年6月7日火曜日

ElectronでMySQLに接続

ElectronMySQLに接続です。Node.jsのMySQLクライアントを利用して接続できました。う、う、嬉しい(笑)。

renderer.js
'use strict';

var resultText = document.querySelector('#result');
var queryButton = document.querySelector('#query');

queryButton.addEventListener('click', function() {
  var mysql      = require('mysql');
  var connection = mysql.createConnection({
    host     : 'localhost',
    user     : 'me',
    password : 'secret',
    database : 'sampledb'
  });
  connection.connect();
  connection.query('SELECT title FROM blogs', function(err, rows, fields) {
    if (err) throw err;
    console.log('title:', rows[0]);
    resultText.innerHTML = rows[0].title ;
  });
  connection.end();
});

参考サイト
ElectronでMySQLに接続してみた(Developers.IOさん)
felixge/node-mysql(GitHub)

2016年6月6日月曜日

Electronで、window.close

Electronで、window.closeです。remote モジュールを読み込んで、プロセス間通信(IPC)を制御するらしい(?)。画面を閉じるだけですが、精根尽き果てました。

renderer.js
'use strict';

const remote = require('electron').remote;

var closeButton = document.querySelector('#close');

closeButton.addEventListener('click', function () {
  var window = remote.getCurrentWindow();
  window.close();
});

参考サイト
electron/remote(GitHub)
Electronのremoteでプロセス間通信を高レベルに扱う(Qiita)

2016年6月5日日曜日

オープンソースのペイントソフト「Krita」

オープンソースのペイントソフト「Krita」 むちゃくちゃ高機能です。 自在に操れるようになったら、芸術性を爆発させられること、間違いなし。




参考サイト
オープンソースのペイントソフトウェア「Krita 3.0.0」リリース(Think IT)

2016年6月4日土曜日

ユーザーがどの程度ページをスクロールしたのかがわかるjQueryプラグインの「Scroll Depth」

ユーザーがどの程度ページをスクロールしたのかがわかるjQueryプラグインの「Scroll Depth」 最近、1ページで完結するシンプルなデザインのサイトが増えていますから、そんなサイトでは、重宝するでしょう。

<script src="jquery.scrolldepth.min.js"></script>
<script>
jQuery(function() {
  jQuery.scrollDepth();
});
</script>


参考サイト
jQuery Scroll Depthを使ってみたので詳細を書いとく(ファンブログハックさん)
ユーザーがどのようにスクロールしてページを見ているかGoogle Analyticsで解析できるスクリプト - Scroll Depth(コリスさん)

2016年6月3日金曜日

electron-quick-startで「Hello World」

electron-quick-startで「Hello World」です。最初に試すべきは、こちらでしたね。遥かにシンプルでわかりやすいです。まずは、index.html と renderer.js を編集すればいいらしい。とにかく、すべては、node.js なので、勉強し直しです。先は長い。

$ git clone https://github.com/electron/electron-quick-start
$ cd electron-quick-start
$ npm install && npm start
ファイル構成
app/
├─ package.json
├─ main.js
├─ renderer.js
└─ index.html


参考サイト
Quick Start(Electron Documentation)

2016年6月2日木曜日

electron-boilerplateで「Hello World」

electron-boilerplateで「Hello World」です。フォルダ構成は以下のとおり。

app

開発用アプリのHTMLとJavaScript。主な開発作業はこのフォルダで行う。

build

「npm start」すると、アプリがここで実行される。

config

変更する必要なし。

node_modules

「npm install」で、nodeモジュールがインストールされる。

resources

インストーラパッケージを作成するためのファイル。

tasks

Electron-Boilerplateのコード。build、start、インストーラ作成など。


app.js の中を覗いてみると、ほぼ node.js であることがわかります。自作モジュールである greet を変更していけば、進めていけるでしょう。

/app/app.js
// モジュールの読み込み
import os from 'os'; // ネイティブ node.js モジュール
import { remote } from 'electron'; // ネイティブ electron モジュール
import jetpack from 'fs-jetpack'; // npm モジュール
import { greet } from './hello_world/hello_world'; // 自作モジュール
import env from './env';

console.log('Loaded environment variables:', env);

var app = remote.app;
var appDir = jetpack.cwd(app.getAppPath());

console.log('The author of this app is:', appDir.read('package.json', 'json').author);

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('greet').innerHTML = greet();
    document.getElementById('platform-info').innerHTML = os.platform();
    document.getElementById('env-name').innerHTML = env.name;
});
参考サイト
GitHub Electron Tutorial: Using Electron-Boilerplate(Don't Panic Labsさん)

2016年6月1日水曜日

Electronで「Hello World」

Electronで「Hello World」です。雛形アプリの electron-boilerplate を利用してみました。「Hello World」の画面が起動しました! 嬉しい。何をやっているのか、全くわからないけど(笑)。挫折しないように、ゆっくり進むことにします。

$ git clone https://github.com/szwacz/electron-boilerplate.git
$ cd electron-boilerplate
$ npm install
$ npm start