先日、OneDriveに、データを置くことにしたのですが、データのバックアップは、QNAPに置くことにしました。
OneDriveへアクセスするアプリには、「Connect to Cloud Drive」と「Cloud Drive Sync」の2つあります。
この違いが、よく分からず、とりあえず、「Connect to Cloud Drive」を使ってみました。
これを使うと、「File Station」に、OneDriveが統合され、統一された操作でアクセスできました。
ただし、疑問は、OneDriveのファイルは、ファイルシステムのどこに置かれるのかが分かりません。
クラウドからデータをダウンロードして、QNAP内のHDDに保存していると思うのですが、どこにあるのでしょうか。
これを知りたい理由は、OneDriveには、常にローカルと同期するデータとは別に、必要な時に、必要なファイルだけをダウンロードするデータを分けて置いていて、後者は、通常、Windows10のエクスプローラでは見ることができません。
これらのファイルにアクセスするには、ブラウザでアクセスするか、WebDAVを使うしかありません。
どちらの方法も、大量のファイルを扱うには不向きで、実用的ではありませんでした。
そのため、QNAPに保存された、これらのファイルを共有して、アクセスできるようにしたいと考えました。
要するに、非同期用のデータを置いているフォルダを、共有設定にして、ローカルネットワーク内に公開したかったのです。
しかし、これができませんでした。
「File Station」で、任意のフォルダを共有設定にする方法も知らないのですから。
次に、「Cloud Drive Sync」を使ってみました。
こちらは、一方向のバックアップ用のアプリのようでした。
「Connect to Cloud Drive」とは違い、QNAP内の更新を、クラウド側に反映させることはできないようです。
また、OneDriveの任意のフォルダを指定してバックアップできます。
これを利用して、非同期用のフォルダのみを、共有フォルダにバックアップするように設定しました。
結果的に、両方のアプリを使うことにしました。
非同期用のデータが2つ置かれてしまう設定になりましたが、当初の目的に近い設定にできました。
クラウド側の非同期データをダウンロードするには、遅いことを我慢して、ブラウザやWebDAVを使う方法と、QNAP（バックアップ）からのローカルネットワーク経由での方法を使えるようになりました。
クラウド側への非同期データのアップロードは、QNAPの共有フォルダに、一度、コピーし、そこから、OneDriveフォルダに移動させ、OneDriveに反映させることを考えています。OneDriveへのアップロードするファイル数が少ない場合は、直接、アップロードすれば良いのですが、数が多い場合は、QNAPにアップロードさせるという考えです。
2017年2月28日火曜日
2017年2月24日金曜日
パソコンのデータ管理を整理中
Office 365を使い続けることに決め、これにより、クラウドストレージ（OneDrive） 1TBを確保しました。
OneDriveのデフォルトの設定では、同期のために、最大1TBのデータが、パソコンのディスクに作られることになるため、これを変更しました。
まず、非同期用のフォルダを作りました。
このフォルダを同期させないように、OneDriveを設定しました。
手順としては、
Windowsのタスクバーにある雲のアイコンを右クリックし、[設定]。
[アカウント]タブで、[フォルダの選択]。
ここで、同期のチェックを外しました。
この設定を行うと、エクスプローラーで、このフォルダが見えなくなったのは、不便です。
オンライン専用のフォルダを表すアイコンを用意して、フォルダ構成やファイル名を表示するようにしてくれると、わかりやすいのですが、改善してくれないものでしょうか。
希望としては、非同期フォルダは、フォルダ名やファイル名は表示され、ファイルを見るときには、一時的にダウンロードされるが、一定時間後には、ローカルから削除され、通常は、ローカルには置かれないという仕様になることを期待しています。
Windows8.1の時は、これに近かったように思います。
エクスプローラーでのアクセスができないため、ブラウザで、OneDriveを開き、ファイルをアップロードしました。
Chromeで行いましたが、メモリ不足で、エラーが発生しました。
この方法では、大量のデータをアップするのは無理のようです。
仕方ないので、一度、同期設定に戻し、ファイルをコピー。
同期を待ち、その後で、非同期設定にすることにしました。
OneDriveのデフォルトの設定では、同期のために、最大1TBのデータが、パソコンのディスクに作られることになるため、これを変更しました。
まず、非同期用のフォルダを作りました。
このフォルダを同期させないように、OneDriveを設定しました。
手順としては、
Windowsのタスクバーにある雲のアイコンを右クリックし、[設定]。
[アカウント]タブで、[フォルダの選択]。
ここで、同期のチェックを外しました。
この設定を行うと、エクスプローラーで、このフォルダが見えなくなったのは、不便です。
オンライン専用のフォルダを表すアイコンを用意して、フォルダ構成やファイル名を表示するようにしてくれると、わかりやすいのですが、改善してくれないものでしょうか。
希望としては、非同期フォルダは、フォルダ名やファイル名は表示され、ファイルを見るときには、一時的にダウンロードされるが、一定時間後には、ローカルから削除され、通常は、ローカルには置かれないという仕様になることを期待しています。
Windows8.1の時は、これに近かったように思います。
エクスプローラーでのアクセスができないため、ブラウザで、OneDriveを開き、ファイルをアップロードしました。
Chromeで行いましたが、メモリ不足で、エラーが発生しました。
この方法では、大量のデータをアップするのは無理のようです。
仕方ないので、一度、同期設定に戻し、ファイルをコピー。
同期を待ち、その後で、非同期設定にすることにしました。
2017年2月23日木曜日
OneNoteの右クリックが遅い
OneNoteと、Atokの組み合わせでは、OneNoteで右クリックメニューを出そうとすると、とても時間が掛かります。
OneNoteの問題のようですが、残念ながら、OneNote 2016でも改善されませんでした。
原因は、OneNoteが、再変換要求を出すことにあるようですから、これをオプションで無効化できれば、根本的に解決すると思うのですが。
他のoffice製品で、遅いと感じたことがないので、他のoffice製品と、同じ仕様にしてくれれば良いのにと、いつも思います。
対策としては、Atokの設定で、「テキストサービス」を無効にすれば改善します。
しかし、副作用として、Windowsの検索ボックスで、日本語入力ができなくなったり、Windowsアプリ（例えば、OneNoteのアプリ版）で、日本語入力ができなくなります。
もう一つの方法を見つけました。
http://ameblo.jp/ikiuo/entry-12209282033.html
こちらのサイトでは、ATOK 2016で行っていますが、ATOK 2017でも、ほぼ同じです。
・ATOK30EE.EXE を実行。
・使用中の項目を選択。
・メニューから、項目の追加。
・[再変換候補取得抑制]を選択して、OK。
・項目名の一覧の[番号 135]に[再変換候補取得抑制]が出てくるのでダブルクリックで、[する]に変更
・保存する。
・Windowsを再起動。
これで、右クリックの表示は、１秒程度になります。
テキストサービスを無効にする対処方法に比べると、遅いですが、なんとか、我慢の範囲内です。
OneNoteの問題のようですが、残念ながら、OneNote 2016でも改善されませんでした。
原因は、OneNoteが、再変換要求を出すことにあるようですから、これをオプションで無効化できれば、根本的に解決すると思うのですが。
他のoffice製品で、遅いと感じたことがないので、他のoffice製品と、同じ仕様にしてくれれば良いのにと、いつも思います。
対策としては、Atokの設定で、「テキストサービス」を無効にすれば改善します。
しかし、副作用として、Windowsの検索ボックスで、日本語入力ができなくなったり、Windowsアプリ（例えば、OneNoteのアプリ版）で、日本語入力ができなくなります。
もう一つの方法を見つけました。
http://ameblo.jp/ikiuo/entry-12209282033.html
こちらのサイトでは、ATOK 2016で行っていますが、ATOK 2017でも、ほぼ同じです。
・ATOK30EE.EXE を実行。
・使用中の項目を選択。
・メニューから、項目の追加。
・[再変換候補取得抑制]を選択して、OK。
・項目名の一覧の[番号 135]に[再変換候補取得抑制]が出てくるのでダブルクリックで、[する]に変更
・保存する。
・Windowsを再起動。
これで、右クリックの表示は、１秒程度になります。
テキストサービスを無効にする対処方法に比べると、遅いですが、なんとか、我慢の範囲内です。
2017年2月21日火曜日
OneNote 2016 不具合
Windows7で、OneNote 2016を使っていますが、不具合らしきものがあります。
Windowsの終了時に、OneNote 2016がエラーを発生させ、終了が遅くなりました。
OneNoteで、別のノートブックへのリンクが使えません。
これは、無償版の制限でしょうか。
そうであれば、元のバージョンを使いたいと思います。
Windowsの終了時に、OneNote 2016がエラーを発生させ、終了が遅くなりました。
OneNoteで、別のノートブックへのリンクが使えません。
これは、無償版の制限でしょうか。
そうであれば、元のバージョンを使いたいと思います。
一度、壊れた仮想マシンは捨てる
先月、このような記事を書きました。
Ubuntu 16.04 ソフトウェアの更新で壊れる
Ubuntuが起動しなくなり、fsckコマンドで、復活させました。
結局の所は、バックアップしていた仮想マシンイメージを使うことで、継続して使ってきましたが、再び、壊れました。
どうやら、壊れる原因は、壊れる前からあったようです。
これでは使い続けることに不安があるため、この仮想マシンは捨てることにしました。
一番の不安は、この原因がホストのディスクシステムある場合です。
そうでないことを願うばかりです。
Ubuntu 16.04 ソフトウェアの更新で壊れる
Ubuntuが起動しなくなり、fsckコマンドで、復活させました。
結局の所は、バックアップしていた仮想マシンイメージを使うことで、継続して使ってきましたが、再び、壊れました。
どうやら、壊れる原因は、壊れる前からあったようです。
これでは使い続けることに不安があるため、この仮想マシンは捨てることにしました。
一番の不安は、この原因がホストのディスクシステムある場合です。
そうでないことを願うばかりです。
2017年2月20日月曜日
OneNote 2016
無償のOneNoteは、ローカルにデータを保存できなかったのですが、OneNote 2016ではできるようになっていました。
これを知っていれば、バージョンアップの案内を無視したりしなかったのですが（笑）
とりあえず、メニューは、若干、変わったものの、今まで通り使えそうな感じです。
これを知っていれば、バージョンアップの案内を無視したりしなかったのですが（笑）
とりあえず、メニューは、若干、変わったものの、今まで通り使えそうな感じです。
2017年2月13日月曜日
Material Design Lite グリッドが崩れる
Material Design Liteを勉強中です。
Chromeで、グリッドを試したところ、１行に並ぶはずが、２行に改行されて悩んでいます。
firefoxなら、１行に並ぶのですが。
Chromeで、グリッドを試したところ、１行に並ぶはずが、２行に改行されて悩んでいます。
firefoxなら、１行に並ぶのですが。
2017年2月11日土曜日
WindowsのChromeで崩れる
ここ数日の出来事ですが、WindowsのChromeで、今まで正常に表示されていたHPが、デザインが崩れて表示されるようになりました。
以前は、大丈夫でした。
Windowsでは、パソコン２台で確認し、いずれも崩れました。
Linuxでは、正常に表示されました。
WindowsのFirefoxでは、正常に表示されました。
まとめると、Windowsの最新のChromeで、画面が正常に表示されません。
Chromeに不具合があるのか、Windowsになんらかの変更があったのか、どちらかだと思いますが、対応に苦慮しています。
以前は、大丈夫でした。
Windowsでは、パソコン２台で確認し、いずれも崩れました。
Linuxでは、正常に表示されました。
WindowsのFirefoxでは、正常に表示されました。
まとめると、Windowsの最新のChromeで、画面が正常に表示されません。
Chromeに不具合があるのか、Windowsになんらかの変更があったのか、どちらかだと思いますが、対応に苦慮しています。
2017年2月9日木曜日
Aurelia 学ぶ ６
Aurelia（アウレリア）の勉強をしています。
http://aurelia.io/
チュートリアル
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial/1
前回のつづき
ローディング時の表示
nprogressを使うので、インストール。
$ npm install nprogress --save
aurelia.jsonファイルを開く。
vendor-bundle.jsの部分に記述する
"dependencies": [
...
{
"name": "nprogress",
"path": "../node_modules/nprogress",
"main": "nprogress",
"resources": [
"nprogress.css"
]
}
...
]
これで、利用の準備は完了。
src/resources/elements フォルダに、 loading-indicator.jsを作成
import * as nprogress from 'nprogress';
import {bindable, noView, decorators} from 'aurelia-framework';
export let LoadingIndicator = decorators(
noView(['nprogress/nprogress.css']),
bindable({name: 'loading', defaultValue: false})
).on(class {
loadingChanged(newValue){
if (newValue) {
nprogress.start();
} else {
nprogress.done();
}
}
});
resources/index.jsファイル
export function configure(config) {
config.globalResources(['./elements/loading-indicator']);
}
app.jsの修正
web-apiを、ここで扱えるようにする。
import {WebAPI} from './web-api';
export class App {
static inject() { return [WebAPI]; }
constructor(api) {
this.api = api;
}
configureRouter(config, router){
config.title = 'Contacts';
config.map([
{ route: '', moduleId: 'no-selection', title: 'Select'},
{ route: 'contacts/:id', moduleId: 'contact-detail', name:'contacts' }
]);
this.router = router;
}
}
app.htmlを修正
indicatorを表示する。
<template>
<require from="bootstrap/css/bootstrap.css"></require>
<require from="./styles.css"></require>
<require from="./contact-list"></require>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<i class="fa fa-user"></i>
<span>Contacts</span>
</a>
</div>
</nav>
<loading-indicator loading.bind="router.isNavigating || api.isRequesting"></loading-indicator>
<div class="container">
<div class="row">
<contact-list class="col-md-4"></contact-list>
<router-view class="col-md-8"></router-view>
</div>
</div>
</template>
これで、詳細をロードするときに、ローディングの表示が出る。
これで、一区切り。
http://aurelia.io/
チュートリアル
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial/1
前回のつづき
ローディング時の表示
nprogressを使うので、インストール。
$ npm install nprogress --save
aurelia.jsonファイルを開く。
vendor-bundle.jsの部分に記述する
"dependencies": [
...
{
"name": "nprogress",
"path": "../node_modules/nprogress",
"main": "nprogress",
"resources": [
"nprogress.css"
]
}
...
]
これで、利用の準備は完了。
src/resources/elements フォルダに、 loading-indicator.jsを作成
import * as nprogress from 'nprogress';
import {bindable, noView, decorators} from 'aurelia-framework';
export let LoadingIndicator = decorators(
noView(['nprogress/nprogress.css']),
bindable({name: 'loading', defaultValue: false})
).on(class {
loadingChanged(newValue){
if (newValue) {
nprogress.start();
} else {
nprogress.done();
}
}
});
resources/index.jsファイル
export function configure(config) {
config.globalResources(['./elements/loading-indicator']);
}
app.jsの修正
web-apiを、ここで扱えるようにする。
import {WebAPI} from './web-api';
export class App {
static inject() { return [WebAPI]; }
constructor(api) {
this.api = api;
}
configureRouter(config, router){
config.title = 'Contacts';
config.map([
{ route: '', moduleId: 'no-selection', title: 'Select'},
{ route: 'contacts/:id', moduleId: 'contact-detail', name:'contacts' }
]);
this.router = router;
}
}
app.htmlを修正
indicatorを表示する。
<template>
<require from="bootstrap/css/bootstrap.css"></require>
<require from="./styles.css"></require>
<require from="./contact-list"></require>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<i class="fa fa-user"></i>
<span>Contacts</span>
</a>
</div>
</nav>
<loading-indicator loading.bind="router.isNavigating || api.isRequesting"></loading-indicator>
<div class="container">
<div class="row">
<contact-list class="col-md-4"></contact-list>
<router-view class="col-md-8"></router-view>
</div>
</div>
</template>
これで、詳細をロードするときに、ローディングの表示が出る。
これで、一区切り。
2017年2月8日水曜日
ESET ファイヤウォール
ESET ファイヤウォールを見ると、ブロックされた通信の中に、見知らぬ会社名があります。
・LCFC(HeFei) Electronics
・PEGATRON CORPORATION
これは、どういうことでしょうか。
どんな会社が、どんな目的で、何をしているのか分かりません。
ブロックを解除しても良いのか悩んでいます。
また、ESETのホームネットワーク保護を無効にするべきかも悩んでいます。
ルーターは、Atermを使っていますが、どうやら、この機能のせいで、ルーターが停止することがあるようです。
WG1200HPの方は、パソコンからのネットワークを遮断するだけのようでしたが、
WR8160Nの方は、ルーターが停止してしまいました。
セキュリティ対策としては、有効のままにしたいのですが、副作用があって困っています。
・LCFC(HeFei) Electronics
・PEGATRON CORPORATION
これは、どういうことでしょうか。
どんな会社が、どんな目的で、何をしているのか分かりません。
ブロックを解除しても良いのか悩んでいます。
また、ESETのホームネットワーク保護を無効にするべきかも悩んでいます。
ルーターは、Atermを使っていますが、どうやら、この機能のせいで、ルーターが停止することがあるようです。
WG1200HPの方は、パソコンからのネットワークを遮断するだけのようでしたが、
WR8160Nの方は、ルーターが停止してしまいました。
セキュリティ対策としては、有効のままにしたいのですが、副作用があって困っています。
2017年2月7日火曜日
Wordpressの改ざん被害
Wordpressの脆弱性を突かれて、改ざんの被害が出ているようです。
改ざんされているかは、どこを調べれば良いのでしょうか。
その点が知りたいのに、情報が見つかりません。
投稿や、固定ページが改ざんされるだけで、投稿の日付に関しては、改ざん日が残るという愉快犯的なものでしょうか。
それとも、そこを足がかりに、パスワードの取得や、密かに、悪質なプログラムを潜ませるところまで行っているのでしょうか。
このあたりまでいくなら、かなり、不安です。
改ざんされているかは、どこを調べれば良いのでしょうか。
その点が知りたいのに、情報が見つかりません。
投稿や、固定ページが改ざんされるだけで、投稿の日付に関しては、改ざん日が残るという愉快犯的なものでしょうか。
それとも、そこを足がかりに、パスワードの取得や、密かに、悪質なプログラムを潜ませるところまで行っているのでしょうか。
このあたりまでいくなら、かなり、不安です。
Aurelia 学ぶ ５
Aurelia（アウレリア）の勉強をしています。
http://aurelia.io/
チュートリアル
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial/1
前回のつづき
今回は、イベント関係の部分。
messages.js
export class ContactUpdated {
constructor(contact){
this.contact = contact;
}
}
export class ContactViewed {
constructor(contact){
this.contact = contact;
}
}
EventAggregator は、アウレリアのイベント関係の機能。
リストから選択（ContactViewed）されたとき、詳細情報が更新（ContactUpdated）されたときに、メッセージを発行する(publish)。
contact-detail.js
import {EventAggregator} from 'aurelia-event-aggregator';
import {WebAPI} from './web-api';
import {ContactUpdated,ContactViewed} from './messages';
import {areEqual} from './utility';
export class ContactDetail {
static inject = [WebAPI, EventAggregator];
constructor(api, ea){
this.api = api;
this.ea = ea;
}
activate(params, routeConfig) {
this.routeConfig = routeConfig;
return this.api.getContactDetails(params.id).then(contact => {
this.contact = contact;
this.routeConfig.navModel.setTitle(contact.firstName);
this.originalContact = JSON.parse(JSON.stringify(contact));
this.ea.publish(new ContactViewed(this.contact));
});
}
get canSave() {
return this.contact.firstName && this.contact.lastName && !this.api.isRequesting;
}
save() {
this.api.saveContact(this.contact).then(contact => {
this.contact = contact;
this.routeConfig.navModel.setTitle(contact.firstName);
this.originalContact = JSON.parse(JSON.stringify(contact));
this.ea.publish(new ContactUpdated(this.contact));
});
}
canDeactivate() {
if(!areEqual(this.originalContact, this.contact)){
let result = confirm('You have unsaved changes. Are you sure you wish to leave?');
if(!result){
this.ea.publish(new ContactViewed(this.contact));
}
return result;
}
return true;
}
}
.subscribeで、イベント発生時の処理を記述。
contact-list.js
import {EventAggregator} from 'aurelia-event-aggregator';
import {WebAPI} from './web-api';
import {ContactUpdated, ContactViewed} from './messages';
export class ContactList {
static inject = [WebAPI, EventAggregator];
constructor(api, ea){
this.api = api;
this.contacts = [];
ea.subscribe(ContactViewed, msg => this.select(msg.contact));
ea.subscribe(ContactUpdated, msg => {
let id = msg.contact.id;
let found = this.contacts.find(x => x.id === id);
Object.assign(found, msg.contact);
});
}
created(){
this.api.getContactList().then(contacts => this.contacts = contacts);
}
select(contact){
this.selectedId = contact.id;
return true;
}
}
Object.assign(found, msg.contact);
msg.contactを、foundにコピーする。
http://aurelia.io/
チュートリアル
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial/1
前回のつづき
今回は、イベント関係の部分。
messages.js
export class ContactUpdated {
constructor(contact){
this.contact = contact;
}
}
export class ContactViewed {
constructor(contact){
this.contact = contact;
}
}
EventAggregator は、アウレリアのイベント関係の機能。
リストから選択（ContactViewed）されたとき、詳細情報が更新（ContactUpdated）されたときに、メッセージを発行する(publish)。
contact-detail.js
import {EventAggregator} from 'aurelia-event-aggregator';
import {WebAPI} from './web-api';
import {ContactUpdated,ContactViewed} from './messages';
import {areEqual} from './utility';
export class ContactDetail {
static inject = [WebAPI, EventAggregator];
constructor(api, ea){
this.api = api;
this.ea = ea;
}
activate(params, routeConfig) {
this.routeConfig = routeConfig;
return this.api.getContactDetails(params.id).then(contact => {
this.contact = contact;
this.routeConfig.navModel.setTitle(contact.firstName);
this.originalContact = JSON.parse(JSON.stringify(contact));
this.ea.publish(new ContactViewed(this.contact));
});
}
get canSave() {
return this.contact.firstName && this.contact.lastName && !this.api.isRequesting;
}
save() {
this.api.saveContact(this.contact).then(contact => {
this.contact = contact;
this.routeConfig.navModel.setTitle(contact.firstName);
this.originalContact = JSON.parse(JSON.stringify(contact));
this.ea.publish(new ContactUpdated(this.contact));
});
}
canDeactivate() {
if(!areEqual(this.originalContact, this.contact)){
let result = confirm('You have unsaved changes. Are you sure you wish to leave?');
if(!result){
this.ea.publish(new ContactViewed(this.contact));
}
return result;
}
return true;
}
}
.subscribeで、イベント発生時の処理を記述。
contact-list.js
import {EventAggregator} from 'aurelia-event-aggregator';
import {WebAPI} from './web-api';
import {ContactUpdated, ContactViewed} from './messages';
export class ContactList {
static inject = [WebAPI, EventAggregator];
constructor(api, ea){
this.api = api;
this.contacts = [];
ea.subscribe(ContactViewed, msg => this.select(msg.contact));
ea.subscribe(ContactUpdated, msg => {
let id = msg.contact.id;
let found = this.contacts.find(x => x.id === id);
Object.assign(found, msg.contact);
});
}
created(){
this.api.getContactList().then(contacts => this.contacts = contacts);
}
select(contact){
this.selectedId = contact.id;
return true;
}
}
Object.assign(found, msg.contact);
msg.contactを、foundにコピーする。
2017年2月6日月曜日
Aurelia 学ぶ ４
Aurelia（アウレリア）の勉強をしています。
http://aurelia.io/
チュートリアル
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial/1
前回のつづき
アドレス帳の表示部分
contact-list.js
import {WebAPI} from './web-api';
export class ContactList {
static inject() { return [WebAPI] };
constructor(api){
this.api = api;
this.contacts = [];
}
created(){
this.api.getContactList().then(contacts => this.contacts = contacts);
}
select(contact){
this.selectedId = contact.id;
return true;
}
}
名前付けの規則なのか。
ファイル名が、contact-listであれば、クラス名は、ContactListになっている。
static inject() { return [WebAPI] };
は、よく分からない。
コンストラクタのthis.api=apiにより、WebAPIクラスのメソッドが、this.apiを使って利用できるようになっているようにみえる。
created()は、Aureliaが使うメソッド。
ビューが作られる時に、呼ばれるらしい。
呼ばれると、WebAPIのgetContactListメソッドを使って、アドレス帳データ（contact list）を取得する。
contact-list.html
<template>
<div class="contact-list">
<ul class="list-group">
<li repeat.for="contact of contacts" class="list-group-item ${contact.id === $parent.selectedId ? 'active' : ''}">
<a route-href="route: contacts; params.bind: {id:contact.id}" click.delegate="$parent.select(contact)">
<h4 class="list-group-item-heading">${contact.firstName} ${contact.lastName}</h4>
<p class="list-group-item-text">${contact.email}</p>
</a>
</li>
</ul>
</div>
</template>
repeat.for="contact of contacts"は、ContactListのcontacts配列を繰り返して表示する。
${contact.id === $parent.selectedId ? 'active' : ''}
${}内は、JavaScriptが使える。
$parentは、ビューモデル、つまり、ContactListを意味する。
したがって、ここは、繰り返し表示される中で、選択された人である場合、クラスに、activeを追加する。
<a route-href="route: contacts; params.bind: {id:contact.id}" click.delegate="$parent.select(contact)">
route-hrefは、Aureliaが使う属性。
route:contactsは、htmlで言えば、href="contacts.php"のようなものか。
params.bind: {id:contact.id}は、その引数。
この形式ならば、複数の引数を渡すこともできそう。
html風に書くと、href="contacts.php?id={contact.id}"
実際には、href="contacts/:id"となるのかな。複数の引数を渡すときは、どう記述するのだろうか。
疑問は残るが、これで、Appクラスのroute関係と繋がる。
click.delegate="$parent.select(contact)"は、<a>タグがクリックされた時の処理。
クリックされると、ContactList.select(contact)が実行され、ContactList.selectedIdが設定される。
<a>タグにより、contactsの画面が表示される。
.delegateは、.triggerでも良いが、.delegateが使える場合は、.delegateを使う。
app.html
<template>
<require from="bootstrap/css/bootstrap.css"></require>
<require from="./styles.css"></require>
<require from="./contact-list"></require>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<i class="fa fa-user"></i>
<span>Contacts</span>
</a>
</div>
</nav>
<div class="container">
<div class="row">
<contact-list class="col-md-4"></contact-list>
<router-view class="col-md-8"></router-view>
</div>
</div>
</template>
<require from="./contact-list"></require>で、contact-listを追加する。
<contact-list>の部分に表示される。
これで、画面の左側に、アドレスの一覧が表示される。
前回、Appクラスに
config.map([
{ route: '', moduleId: 'no-selection', title: 'Select'},
とあり、no-selectionが、<router-view>に表示される理由（繋がり）が分かりにくかったのですが、今回は、contact-list同士のため、理解しやすいです。
moduleIdに指定されたモジュール（ここでは、no-selection）は、<router-view>に表示されると考えれば良さそうです。
少し、分かってきました。
http://aurelia.io/
チュートリアル
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial/1
前回のつづき
アドレス帳の表示部分
contact-list.js
import {WebAPI} from './web-api';
export class ContactList {
static inject() { return [WebAPI] };
constructor(api){
this.api = api;
this.contacts = [];
}
created(){
this.api.getContactList().then(contacts => this.contacts = contacts);
}
select(contact){
this.selectedId = contact.id;
return true;
}
}
名前付けの規則なのか。
ファイル名が、contact-listであれば、クラス名は、ContactListになっている。
static inject() { return [WebAPI] };
は、よく分からない。
コンストラクタのthis.api=apiにより、WebAPIクラスのメソッドが、this.apiを使って利用できるようになっているようにみえる。
created()は、Aureliaが使うメソッド。
ビューが作られる時に、呼ばれるらしい。
呼ばれると、WebAPIのgetContactListメソッドを使って、アドレス帳データ（contact list）を取得する。
contact-list.html
<template>
<div class="contact-list">
<ul class="list-group">
<li repeat.for="contact of contacts" class="list-group-item ${contact.id === $parent.selectedId ? 'active' : ''}">
<a route-href="route: contacts; params.bind: {id:contact.id}" click.delegate="$parent.select(contact)">
<h4 class="list-group-item-heading">${contact.firstName} ${contact.lastName}</h4>
<p class="list-group-item-text">${contact.email}</p>
</a>
</li>
</ul>
</div>
</template>
repeat.for="contact of contacts"は、ContactListのcontacts配列を繰り返して表示する。
${contact.id === $parent.selectedId ? 'active' : ''}
${}内は、JavaScriptが使える。
$parentは、ビューモデル、つまり、ContactListを意味する。
したがって、ここは、繰り返し表示される中で、選択された人である場合、クラスに、activeを追加する。
<a route-href="route: contacts; params.bind: {id:contact.id}" click.delegate="$parent.select(contact)">
route-hrefは、Aureliaが使う属性。
route:contactsは、htmlで言えば、href="contacts.php"のようなものか。
params.bind: {id:contact.id}は、その引数。
この形式ならば、複数の引数を渡すこともできそう。
html風に書くと、href="contacts.php?id={contact.id}"
実際には、href="contacts/:id"となるのかな。複数の引数を渡すときは、どう記述するのだろうか。
疑問は残るが、これで、Appクラスのroute関係と繋がる。
click.delegate="$parent.select(contact)"は、<a>タグがクリックされた時の処理。
クリックされると、ContactList.select(contact)が実行され、ContactList.selectedIdが設定される。
<a>タグにより、contactsの画面が表示される。
.delegateは、.triggerでも良いが、.delegateが使える場合は、.delegateを使う。
app.html
<template>
<require from="bootstrap/css/bootstrap.css"></require>
<require from="./styles.css"></require>
<require from="./contact-list"></require>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<i class="fa fa-user"></i>
<span>Contacts</span>
</a>
</div>
</nav>
<div class="container">
<div class="row">
<contact-list class="col-md-4"></contact-list>
<router-view class="col-md-8"></router-view>
</div>
</div>
</template>
<require from="./contact-list"></require>で、contact-listを追加する。
<contact-list>の部分に表示される。
これで、画面の左側に、アドレスの一覧が表示される。
前回、Appクラスに
config.map([
{ route: '', moduleId: 'no-selection', title: 'Select'},
とあり、no-selectionが、<router-view>に表示される理由（繋がり）が分かりにくかったのですが、今回は、contact-list同士のため、理解しやすいです。
moduleIdに指定されたモジュール（ここでは、no-selection）は、<router-view>に表示されると考えれば良さそうです。
少し、分かってきました。
VMware Workstation クリップボードの共有
VMware Workstation 12で、仮想マシンの共有を行いました。
経緯としては、
ノートパソコンに、仮想マシンがあり、それをデスクトップパソコンで操作したいと考えました。
ノートパソコンより、デスクトップの広い画面、快適なキーボードで使いたいですから。
これを行うには、VNC、リモートデスクトップ、仮想マシンの共有という、いくつかの方法があります。
これまで、VNCを使ってきました。
仮想マシンは、linux系のため、仮想マシン内にサーバーを動かす設定にしていました。
他の方法としては、VMwareの機能を使う方法もありますが、試してみて、こちらに落ち着いていました。
デスクトップと、ノートパソコン内にある仮想マシンとの間でのクリップボードの共有もでき、それなりに快適です。
ただし、若干、反応が遅れること。
この点に、少々、不満を感じて、仮想マシンの共有を試すことにしました。
少々、苦労しながら、仮想マシンの共有はできました。
問題は、クリップボードの共有ができないことです。
デスクトップと、ノートパソコン内にある仮想マシンとの間でのクリップボードの共有ができないのであれば、不満ながらも仕方ないと思えるのですが、ノートパソコンのホストOSとの間で共有ができなくなりました。
インターネットで調べ、.vmxに設定を書き込む方法も試しましたがだめでした。
解決策は、Workstationを起動し、仮想マシンを開くという手順ではなく、仮想マシンの.vmxをダブルクリックで開いて、Workstationを起動することでした。
これは、試して、そうなったというだけで、公式な方法ではないと思います。
この手順では、仮想マシンが、共有設定による制約を受けることなく、起動するのだと思います。
蛇足
ESXiなら、仮想マシンとホストの間でのクリップボードの共有ができるのですから、Workstationでもできそうに思いますができませんでした。
今回の目的なら、正攻法は、ノートパソコンに、拡張ドックを繋ぎ、ここにモニタとキーボード、マウスを繋ぐことです。
これは快適ですが、ノートパソコン用の拡張キーボード、デスクトップ用のキーボードと２つのキーボードが机の上に並ぶことになり、これは混乱を招きました。
「心地よく打てるキーボードを使いたい」という妙なこだわりがなければ、キーボードはひとつでよく、問題なかったのですが（笑）
もっとも、ノートパソコンのキーボードを使うと、メイン画面がノートパソコンの画面になり、大きな画面（セカンドモニタ）で作業するのが、少々、辛くなります。
経緯としては、
ノートパソコンに、仮想マシンがあり、それをデスクトップパソコンで操作したいと考えました。
ノートパソコンより、デスクトップの広い画面、快適なキーボードで使いたいですから。
これを行うには、VNC、リモートデスクトップ、仮想マシンの共有という、いくつかの方法があります。
これまで、VNCを使ってきました。
仮想マシンは、linux系のため、仮想マシン内にサーバーを動かす設定にしていました。
他の方法としては、VMwareの機能を使う方法もありますが、試してみて、こちらに落ち着いていました。
デスクトップと、ノートパソコン内にある仮想マシンとの間でのクリップボードの共有もでき、それなりに快適です。
ただし、若干、反応が遅れること。
この点に、少々、不満を感じて、仮想マシンの共有を試すことにしました。
少々、苦労しながら、仮想マシンの共有はできました。
問題は、クリップボードの共有ができないことです。
デスクトップと、ノートパソコン内にある仮想マシンとの間でのクリップボードの共有ができないのであれば、不満ながらも仕方ないと思えるのですが、ノートパソコンのホストOSとの間で共有ができなくなりました。
インターネットで調べ、.vmxに設定を書き込む方法も試しましたがだめでした。
解決策は、Workstationを起動し、仮想マシンを開くという手順ではなく、仮想マシンの.vmxをダブルクリックで開いて、Workstationを起動することでした。
これは、試して、そうなったというだけで、公式な方法ではないと思います。
この手順では、仮想マシンが、共有設定による制約を受けることなく、起動するのだと思います。
蛇足
ESXiなら、仮想マシンとホストの間でのクリップボードの共有ができるのですから、Workstationでもできそうに思いますができませんでした。
今回の目的なら、正攻法は、ノートパソコンに、拡張ドックを繋ぎ、ここにモニタとキーボード、マウスを繋ぐことです。
これは快適ですが、ノートパソコン用の拡張キーボード、デスクトップ用のキーボードと２つのキーボードが机の上に並ぶことになり、これは混乱を招きました。
「心地よく打てるキーボードを使いたい」という妙なこだわりがなければ、キーボードはひとつでよく、問題なかったのですが（笑）
もっとも、ノートパソコンのキーボードを使うと、メイン画面がノートパソコンの画面になり、大きな画面（セカンドモニタ）で作業するのが、少々、辛くなります。
2017年2月5日日曜日
Aurelia 学ぶ ３
Aurelia（アウレリア）の勉強を始めました。
http://aurelia.io/
チュートリアル
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial/1
前回のつづき
ファイルをダウンロードする。
web-api.js
utility.js
style.css
これらを、プロジェクトのsrcフォルダにコピーする。
app.jsを修正。
export class App {
configureRouter(config, router){
config.title = 'Contacts';
config.map([
{ route: '', moduleId: 'no-selection', title: 'Select'},
{ route: 'contacts/:id', moduleId: 'contact-detail', name:'contacts' }
]);
this.router = router;
}
}
ルーティングの設定
ルーティングは、アクセスするURLと、呼び出されるリソースや処理を関連づけること。
route: '', moduleId: 'no-selection'の部分は、ルートが、no-selectionに関連付けられる。
app.html
<template>
<require from="bootstrap/css/bootstrap.css"></require>
<require from="./styles.css"></require>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<i class="fa fa-user"></i>
<span>Contacts</span>
</a>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-4">Contact List Placeholder</div>
<router-view class="col-md-8"></router-view>
</div>
</div>
</template>
router-viewの部分に表示する内容を設定していく。
その前に、このプロジェクトでは、Bootstrapを使う。好みのフレームワークを使うこともできる。
bootstrapのインストール
$ npm install bootstrap --save
warningが出た。
fsevents関係に問題があるらしい。
とりあえず、問題は先送り。
bootstrapは、jQueryが必要なので、インストール
$ npm install jquery@^2.2.4 --save
--save付きでインストールしたため、Node.js用の設定ファイルには設定が保存されるが、aureliaの設定には保存されないため、手動で修正する。
aurelia_projectフォルダのaurelia.jsonファイルを開く。
3rd partyのライブラリに関しては、vendor-bundle.jsに記述する。
ここに、jQueryと、bootstrapの設定を記述する。
"dependencies": [
...
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
},
...
]
ルーティングのモジュールを作成する
srcフォルダ内にファイルを作成。
export class NoSelection {
constructor() {
this.message = "Please Select a Contact.";
}
}
no-selection.html
<template>
<div class="no-selection text-center">
<h2>${message}</h2>
</div>
</template>
先の
route: '', moduleId: 'no-selection'
の、no-selectionが、この部分に対応する。
ここまでで、
index.htmlの<body aurelia-app="main">の部分に、app.htmlが表示される。
app.htmlの<router-view>の部分に、no-selection.htmlが表示される。
とりあえず、router-viewは、configureRouterを使う場合の、デフォルトのタグと考えておく。
これで、右側に、Please Select a Contact.と表示されました。
まだ、繋がりが、ぼんやりとしか見えていませんが、つづく。
http://aurelia.io/
チュートリアル
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial/1
前回のつづき
ファイルをダウンロードする。
web-api.js
utility.js
style.css
これらを、プロジェクトのsrcフォルダにコピーする。
app.jsを修正。
export class App {
configureRouter(config, router){
config.title = 'Contacts';
config.map([
{ route: '', moduleId: 'no-selection', title: 'Select'},
{ route: 'contacts/:id', moduleId: 'contact-detail', name:'contacts' }
]);
this.router = router;
}
}
ルーティングの設定
ルーティングは、アクセスするURLと、呼び出されるリソースや処理を関連づけること。
route: '', moduleId: 'no-selection'の部分は、ルートが、no-selectionに関連付けられる。
app.html
<template>
<require from="bootstrap/css/bootstrap.css"></require>
<require from="./styles.css"></require>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<i class="fa fa-user"></i>
<span>Contacts</span>
</a>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-4">Contact List Placeholder</div>
<router-view class="col-md-8"></router-view>
</div>
</div>
</template>
router-viewの部分に表示する内容を設定していく。
その前に、このプロジェクトでは、Bootstrapを使う。好みのフレームワークを使うこともできる。
bootstrapのインストール
$ npm install bootstrap --save
warningが出た。
fsevents関係に問題があるらしい。
とりあえず、問題は先送り。
bootstrapは、jQueryが必要なので、インストール
$ npm install jquery@^2.2.4 --save
--save付きでインストールしたため、Node.js用の設定ファイルには設定が保存されるが、aureliaの設定には保存されないため、手動で修正する。
aurelia_projectフォルダのaurelia.jsonファイルを開く。
3rd partyのライブラリに関しては、vendor-bundle.jsに記述する。
ここに、jQueryと、bootstrapの設定を記述する。
"dependencies": [
...
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
},
...
]
ルーティングのモジュールを作成する
srcフォルダ内にファイルを作成。
export class NoSelection {
constructor() {
this.message = "Please Select a Contact.";
}
}
no-selection.html
<template>
<div class="no-selection text-center">
<h2>${message}</h2>
</div>
</template>
先の
route: '', moduleId: 'no-selection'
の、no-selectionが、この部分に対応する。
ここまでで、
index.htmlの<body aurelia-app="main">の部分に、app.htmlが表示される。
app.htmlの<router-view>の部分に、no-selection.htmlが表示される。
とりあえず、router-viewは、configureRouterを使う場合の、デフォルトのタグと考えておく。
これで、右側に、Please Select a Contact.と表示されました。
まだ、繋がりが、ぼんやりとしか見えていませんが、つづく。
VMware Worksataion 共有
VMware Worksataion の仮想マシンの共有を使ってみました。
以前も使ったことがあるため、甘く見ていました。
苦労しました。
設定は、簡単。
共有する仮想マシンで。
[VM][管理][共有]
指示に従うと、仮想マシンが共有フォルダに移動して設定終了。
別のパソコンで、「リモートサーバに接続」
仮想マシンのあるパソコン名と、ユーザー名、パスワードを入力。
これで、仮想マシンのリストに、先に設定した仮想マシンが表示されるので選択する。
仮想マシンを起動。
これで終わり。
注意点としては、パスワードは、ローカルのパスワードではなく、マイクロソフトのパスワードを使う場合があることだけです。
実際に行うと、仮想マシンの起動時に
「MKSに接続できません login (username/password) incorrect」
と表示され、画面が表示されませんでした。
まずは、既知の問題。
家のネットワークでは、ホスト名を入力しても、別のパソコンに繋がりません。
IPアドレスを指定して接続していました。
これが問題になっている可能性を考えて、対応しました。
まず、ルーターに、名前解決のルールを設定。MACアドレスと、IPアドレスの関連を設定しました。実際には、既に、設定済みでした。
これで、それぞれのパソコンは、いつも、同じIPアドレスが割り当てられます。
次に、hostsファイルに、IPアドレスと、パソコンの名前を記述しました。
これを、クライアント、サーバ、双方に行いました。
これで、パソコン名を使って、サーバーに接続できるようになりました。
しかし、問題は解決しませんでした。
セキュリティソフトのESETを使っているため、このファイヤーウォールを一時的に無効にしましたが、改善しませんでした。
こちらの情報を元にして、設定を行いました。
https://communities.vmware.com/message/2628616#2628616
C:\ProgramData\VMware\VMware Workstation\config.iniのauthd.client.port = "903"を902に変更する。
これを、双方に行い、解決しました。
次にファイヤーウォールを有効にしました。
今度は、サーバーへの接続自体ができなくなっていました。
ファイヤーウォールで、ポートの開放を設定してみましたが、だめでした。
結論としては、ファイヤーウォールの設定は関係がなく、両方のパソコンを再起動して、動きました。
おそらく、ESETの学習機能のようなものが、私の期待に反した動作をしただけでしょう。
ポートの開放は不要でした。
私のトラブルでは、903を902にすることで解決したのだと思います。
以前も使ったことがあるため、甘く見ていました。
苦労しました。
設定は、簡単。
共有する仮想マシンで。
[VM][管理][共有]
指示に従うと、仮想マシンが共有フォルダに移動して設定終了。
別のパソコンで、「リモートサーバに接続」
仮想マシンのあるパソコン名と、ユーザー名、パスワードを入力。
これで、仮想マシンのリストに、先に設定した仮想マシンが表示されるので選択する。
仮想マシンを起動。
これで終わり。
注意点としては、パスワードは、ローカルのパスワードではなく、マイクロソフトのパスワードを使う場合があることだけです。
実際に行うと、仮想マシンの起動時に
「MKSに接続できません login (username/password) incorrect」
と表示され、画面が表示されませんでした。
まずは、既知の問題。
家のネットワークでは、ホスト名を入力しても、別のパソコンに繋がりません。
IPアドレスを指定して接続していました。
これが問題になっている可能性を考えて、対応しました。
まず、ルーターに、名前解決のルールを設定。MACアドレスと、IPアドレスの関連を設定しました。実際には、既に、設定済みでした。
これで、それぞれのパソコンは、いつも、同じIPアドレスが割り当てられます。
次に、hostsファイルに、IPアドレスと、パソコンの名前を記述しました。
これを、クライアント、サーバ、双方に行いました。
これで、パソコン名を使って、サーバーに接続できるようになりました。
しかし、問題は解決しませんでした。
セキュリティソフトのESETを使っているため、このファイヤーウォールを一時的に無効にしましたが、改善しませんでした。
こちらの情報を元にして、設定を行いました。
https://communities.vmware.com/message/2628616#2628616
C:\ProgramData\VMware\VMware Workstation\config.iniのauthd.client.port = "903"を902に変更する。
これを、双方に行い、解決しました。
次にファイヤーウォールを有効にしました。
今度は、サーバーへの接続自体ができなくなっていました。
ファイヤーウォールで、ポートの開放を設定してみましたが、だめでした。
結論としては、ファイヤーウォールの設定は関係がなく、両方のパソコンを再起動して、動きました。
おそらく、ESETの学習機能のようなものが、私の期待に反した動作をしただけでしょう。
ポートの開放は不要でした。
私のトラブルでは、903を902にすることで解決したのだと思います。
2017年2月4日土曜日
Aurelia 学ぶ ２
Aurelia（アウレリア）の勉強を始めました。
http://aurelia.io/
チュートリアル
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial/1
必要なもの
NodeJS ver4以上
Git
インストール
$ npm install aurelia-cli -g
プロジェクトの作成
適当なフォルダで、
$ au new
プロジェクト名：Contacts
後は、デフォルトで。
$ au run --watch
ブラウザで、http://localhost:9000/
"Hello world!"が表示される。
書き残していたメモを、うっかり消したため、今日は、ここまで。
つづく。
http://aurelia.io/
チュートリアル
http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial/1
必要なもの
NodeJS ver4以上
Git
インストール
$ npm install aurelia-cli -g
プロジェクトの作成
適当なフォルダで、
$ au new
プロジェクト名：Contacts
後は、デフォルトで。
$ au run --watch
ブラウザで、http://localhost:9000/
"Hello world!"が表示される。
書き残していたメモを、うっかり消したため、今日は、ここまで。
つづく。
2017年2月3日金曜日
Atok 2017 買って良かった
Atok 2017が発売されました。
予約していたので、本日、到着。
早速、インストールしました。
ジャストシステム ATOK 2017 for Windows ベーシック 通常版
これまでは、2015を使っていて、2年ぶりの更新です。
どう変わったのか調べてみました。
まず、Cortanaで、日本語入力できました。
Cortanaを使っていないため、いつからできるようになっていたのか知りませんが、これは、Windowsタブレットを使うときには役立ちそうです。
と思いましたが、できなくなりました。
Cortanaで日本語入力ができる状態では、OneNoteで右クリックメニューを表示させると、とても遅くなります。
これを改善するには、ATOKの設定で「テキストサービス」を無効します。
しかし、無効にすると、Cortanaで日本語入力ができません。
この問題の根本は、デスクトップ版のOneNoteにあるので、マイクロソフトになんとかしてもらいたいです。
以前からあった機能かもしれませんが、
「イミクル」の機能は便利です。
単語を範囲指定して、CTRLを2回押せば、その単語の意味を辞書で調べて表示してくれます。
これで、文章の入力だけでなく、文書を読むときにも活躍してくれそうです。
日本語を入力するつもりで、誤ってアルファベットを入力したとき、Shift+変換キーで、遡って、変換してくれます。
私は、英語キーボードを使っているため、Shitf+Insで使えるようカスタマイズしました。
この機能は活躍しそうです。
ただ、少し、気になるのは、この機能が実装できるということは、入力した全ての文字が、Atokには分かっているということです。
パスワードなど、本来、知られてはならないものも、Atokには把握されてしまいそうです。
これは、JustSystemを信用するしかありません。
むしろ、この機能を実装できるOSの仕組みの方が不安です。
キーロガーに頼らずに、ユーザーが入力した文字を取得できるソフトが作れるのではないでしょうか。
もっとも、こうした問題は、googleなどでもあり、気にしたらきりがなく、不安なら、linuxを使うしかなさそうです。
Atok 2017、買って良かった。
予約していたので、本日、到着。
早速、インストールしました。
ジャストシステム ATOK 2017 for Windows ベーシック 通常版
これまでは、2015を使っていて、2年ぶりの更新です。
どう変わったのか調べてみました。
まず、Cortanaで、日本語入力できました。
Cortanaを使っていないため、いつからできるようになっていたのか知りませんが、これは、Windowsタブレットを使うときには役立ちそうです。
と思いましたが、できなくなりました。
Cortanaで日本語入力ができる状態では、OneNoteで右クリックメニューを表示させると、とても遅くなります。
これを改善するには、ATOKの設定で「テキストサービス」を無効します。
しかし、無効にすると、Cortanaで日本語入力ができません。
この問題の根本は、デスクトップ版のOneNoteにあるので、マイクロソフトになんとかしてもらいたいです。
以前からあった機能かもしれませんが、
「イミクル」の機能は便利です。
単語を範囲指定して、CTRLを2回押せば、その単語の意味を辞書で調べて表示してくれます。
これで、文章の入力だけでなく、文書を読むときにも活躍してくれそうです。
日本語を入力するつもりで、誤ってアルファベットを入力したとき、Shift+変換キーで、遡って、変換してくれます。
私は、英語キーボードを使っているため、Shitf+Insで使えるようカスタマイズしました。
この機能は活躍しそうです。
ただ、少し、気になるのは、この機能が実装できるということは、入力した全ての文字が、Atokには分かっているということです。
パスワードなど、本来、知られてはならないものも、Atokには把握されてしまいそうです。
これは、JustSystemを信用するしかありません。
むしろ、この機能を実装できるOSの仕組みの方が不安です。
キーロガーに頼らずに、ユーザーが入力した文字を取得できるソフトが作れるのではないでしょうか。
もっとも、こうした問題は、googleなどでもあり、気にしたらきりがなく、不安なら、linuxを使うしかなさそうです。
Atok 2017、買って良かった。
linux mint 日本語サイト 復活
しばらく、「linux mint 日本語サイト」にアクセスできない状態でしたが、今日は繋がるようになりました。
OSのアップデートの一部ができず、気づいたことでしたが、復活して良かったです。
ただし、サイトダウン前と変わらず、「署名にSHA1を使用している」というエラーが出ています。
クラッカーに不正アクセスされたのか不安が残ります。
OSのアップデートの一部ができず、気づいたことでしたが、復活して良かったです。
ただし、サイトダウン前と変わらず、「署名にSHA1を使用している」というエラーが出ています。
クラッカーに不正アクセスされたのか不安が残ります。
Aurelia 学ぶ １
Aurelia（アウレリア）の勉強を始めました。
http://aurelia.io/
Angularと、どちらにするかで悩みましたが、まずは、モダンな方（Aurelia）を勉強して、だめなら、保守的な選択（Angular）をすれば良いと考えてのことです。
また、JavaScriptを知っているといっても、これからは、新しい記述方法に移行していく必要があります。
TypeScriptと、ES6の選択でも悩みました。
型で制約を受けるというだけでも、TypeScriptの方が魅力的ですが、ES6を知らずに、TypeScriptを学んでも意味が無いと思い、ES6を選択しました。
勉強のスタートは、本家のHPが一番です。
本や、日本語の紹介サイトでは、雰囲気は学べますが、既に、古い情報になっていることが多く、本家が間違いありません。
まずは、＜Get Started＞を学びます。
適当（ここでは、ある意味、手抜き）に読んでいるため、間違いがあるかもしれません。間違いがあれば、コメントいただけると助かります。
最初の一歩は、ダウンロード。
基本的なプロジェクトをダウンロードし、プロジェクトフォルダに展開します。
ルートに、index.html、jsconfig.json。
scriptsフォルダに、スクリプトファイル。
srcフォルダに、プログラムファイル。
が配置されています。
最初は、srcフォルダは、空です。
firefoxで、index.htmlを表示させましたが、白紙でした。
環境の設定
index.htmlファイル内のスクリプトを修正することで、TypeScriptと、ES6のどちらにするかを決めるようです。
ES6を使うので、
<script src="scripts/config-typescript.js"></script>
を
<script src="scripts/config-esnext.js"></script>
にします。
index.html
プログラムを記述
srcフォルダに、次の４つのファイルを作ります。
todo.js
保存データのモデルです。
app.js
アプリケーションのモデルです。
app.html
アプリケーションのビューです。
main.js
最初に呼ばれるところ。
これで、firefoxのブラウザに、「Todos」と表示されます。
詳細に見ていくと、
index.htmlの<body aurelia-app="src/main">タグの部分に、プログラムの内容が表示されます。
タグに、aurelia-app属性を付けると、そこに表示されるようです。
これなら、Webの機能を分割して、配置したり、取り除いたりすることが、簡単にできそうです。
"src/main"のため、main.jsが呼び出される。
app.jsは、どこで呼ばれるのでしょう。別の名前に変更できるのでしょうか。
この点は、不明です。
とりあえず、今は、暗黙の内に、app.jsが呼ばれると考えておきます。
app.jsと、app.htmlは、自動的に、密接に結びつけられるようです。
htmlに、${heading}と記述すれば、ここに、Appクラスのheadingプロパティが表示されます。
firefoxで、index.htmlファイルを表示させましたが、Webサーバーを使って表示させる方法もあります。
その場合、NodeJSがインストールされていれば、次のコマンドで、Webサーバーがインストールされます。
$ npm install http-server -g
実行は、プロジェクトのフォルダで、
$ http-server -o -c-1
これで、ブラウザが自動的に起動し、プログラムが表示されます。
終了するには、ターミナルで、Ctrlを押しながら、cを押します。（Ctrl+c）
http://aurelia.io/
Angularと、どちらにするかで悩みましたが、まずは、モダンな方（Aurelia）を勉強して、だめなら、保守的な選択（Angular）をすれば良いと考えてのことです。
また、JavaScriptを知っているといっても、これからは、新しい記述方法に移行していく必要があります。
TypeScriptと、ES6の選択でも悩みました。
型で制約を受けるというだけでも、TypeScriptの方が魅力的ですが、ES6を知らずに、TypeScriptを学んでも意味が無いと思い、ES6を選択しました。
勉強のスタートは、本家のHPが一番です。
本や、日本語の紹介サイトでは、雰囲気は学べますが、既に、古い情報になっていることが多く、本家が間違いありません。
まずは、＜Get Started＞を学びます。
適当（ここでは、ある意味、手抜き）に読んでいるため、間違いがあるかもしれません。間違いがあれば、コメントいただけると助かります。
最初の一歩は、ダウンロード。
基本的なプロジェクトをダウンロードし、プロジェクトフォルダに展開します。
ルートに、index.html、jsconfig.json。
scriptsフォルダに、スクリプトファイル。
srcフォルダに、プログラムファイル。
が配置されています。
最初は、srcフォルダは、空です。
firefoxで、index.htmlを表示させましたが、白紙でした。
環境の設定
index.htmlファイル内のスクリプトを修正することで、TypeScriptと、ES6のどちらにするかを決めるようです。
ES6を使うので、
<script src="scripts/config-typescript.js"></script>
を
<script src="scripts/config-esnext.js"></script>
にします。
index.html
<!DOCTYPE html>
<html>
<head>
<title>Aurelia</title>
</head>
<body aurelia-app="src/main">
<script src="scripts/system.js"></script>
<script src="scripts/config-esnext.js"></script>
<script src="scripts/aurelia-core.min.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
プログラムを記述
srcフォルダに、次の４つのファイルを作ります。
todo.js
保存データのモデルです。
export class Todo {
constructor(description) {
this.description = description;
this.done = false;
}
}
app.js
アプリケーションのモデルです。
import {Todo} from './todo';
export class App {
constructor() {
this.heading = "Todos";
this.todos = [];
this.todoDescription = '';
}
addTodo() {
if (this.todoDescription) {
this.todos.push(new Todo(this.todoDescription));
this.todoDescription = '';
}
}
removeTodo(todo) {
let index = this.todos.indexOf(todo);
if (index !== -1) {
this.todos.splice(index, 1);
}
}
}
app.html
アプリケーションのビューです。
<template>
<h1>${heading}</h1>
</template>
main.js
最初に呼ばれるところ。
export function configure(aurelia) {
aurelia.use.basicConfiguration();
aurelia.start().then(() => aurelia.setRoot());
}
これで、firefoxのブラウザに、「Todos」と表示されます。
詳細に見ていくと、
index.htmlの<body aurelia-app="src/main">タグの部分に、プログラムの内容が表示されます。
タグに、aurelia-app属性を付けると、そこに表示されるようです。
これなら、Webの機能を分割して、配置したり、取り除いたりすることが、簡単にできそうです。
"src/main"のため、main.jsが呼び出される。
app.jsは、どこで呼ばれるのでしょう。別の名前に変更できるのでしょうか。
この点は、不明です。
とりあえず、今は、暗黙の内に、app.jsが呼ばれると考えておきます。
app.jsと、app.htmlは、自動的に、密接に結びつけられるようです。
htmlに、${heading}と記述すれば、ここに、Appクラスのheadingプロパティが表示されます。
firefoxで、index.htmlファイルを表示させましたが、Webサーバーを使って表示させる方法もあります。
その場合、NodeJSがインストールされていれば、次のコマンドで、Webサーバーがインストールされます。
$ npm install http-server -g
実行は、プロジェクトのフォルダで、
$ http-server -o -c-1
これで、ブラウザが自動的に起動し、プログラムが表示されます。
終了するには、ターミナルで、Ctrlを押しながら、cを押します。（Ctrl+c）
2017年2月2日木曜日
Docker
下記の本を読んで、Dockerを学んでいました。
送料無料/Docker／AdrianMouat／玉川竜司
現在、仮想化技術（VM）により、仮想OSをインストールして使っています。
具体的には、ThinkPadのWindows10に、VMware Workstationをインストールし、そこで、仮想OSとして、ubuntuを構築し、その中で開発しています。
また、サーバーは、VPSを使っています。
”これが、Dockerのコンテナ技術に置き換わるかもしれない。”
読み始めの頃は、そう思い、期待していました。
VMを使っている理由は、
・可搬性
・セキュリティ
です。
ThinkPadが壊れても、仮想OSのバックアップを持っていれば、それを、レッツノートにコピーして、すぐに動かすことができます。
VPSの方は、そこまで簡単ではありませんが、お金があるなら、同じようなことも可能です。
似たような利便性が、Dockerにはあり、仮想OSほど、大規模でない点が気に入りました。
ホームページを公開する場合
・単なる自分の紹介（htmlファイルのみ）
これならば、レンタルサーバーに、ファイルをコピーするだけです。
もう少し、複雑なサイト。
・会員制のサイト（htmlと、php）
これなら、少し高価なphpが動くレンタルサーバーにファイルをコピーするのが簡単です。
しかし、phpのプログラムを使うため、レンタルサーバーによっては動かないという事態が発生することがあります。
原因は、phpや、ライブラリのバージョンの違いなどによるものです。
この問題を解決するため、OSを丸ごと借りるVPSへ移行してきました。
他の手段としては、クラウドサービスで、機能毎に借りて構築するという手段もありますが、費用と手間を考えて、VPSにしています。
VPSを使っていて感じるのは、「OSの管理まではやりたくないのだけど」という思いです。
PHPやライブラリのバージョン管理だけで済めば良いのにと思いますが、そうなると、クラウドサービスを使うことになり、これは、これで、別の管理が必要になります。
Dockerなら、レンタルサーバーと、VPSの中間に位置づけられるように思い、期待して、本を読んでいました。
この点は、やや思い違いのようでした。
私の想像では、Webサーバー（Node.js）と、作成したプログラムがパッケージされたものを、サーバーに公開するというものでした。
そうしたものではないようです。
Dockerで、結果的に同じにするなら、公開サーバー内で、Webサーバー（Node.js）と、作成したプログラムを、再構築するようです。
結果的に同じになるなら悪くはないのですが、再構築させるための手続き記述しなければならないことを考えると、その手間が余計です。
もっとも、今でも、サーバーの構築時は、その手順を書き留めながら行い、再構築時は、その手順を読みながら進めますから、それが、マニュアル化され、コマンド１つで実行できるとなれば、便利ではあります。
しかし、これは、何度も構築するような場合にメリットがあり、ほぼ、１回の構築しか行わないのであれば、手間が増えるだけになってしまいます。
結局、今回は、Dockerを使うことはやめました。
しかし、Dockerには期待しています。
例えば、Node.js、Angular、MongoDBを組み合わせた環境を、楽に用意したいという要望には使えます。
問題は、用意された環境が、どのくらい実用的かは、調べてみなければ分からない点で、事実上の標準ができるまでは、本格的には使いにくいです。
時間が問題を解決してくれるまで待ちます。
次回は、Aureliaについての予定。
送料無料/Docker／AdrianMouat／玉川竜司
現在、仮想化技術（VM）により、仮想OSをインストールして使っています。
具体的には、ThinkPadのWindows10に、VMware Workstationをインストールし、そこで、仮想OSとして、ubuntuを構築し、その中で開発しています。
また、サーバーは、VPSを使っています。
”これが、Dockerのコンテナ技術に置き換わるかもしれない。”
読み始めの頃は、そう思い、期待していました。
VMを使っている理由は、
・可搬性
・セキュリティ
です。
ThinkPadが壊れても、仮想OSのバックアップを持っていれば、それを、レッツノートにコピーして、すぐに動かすことができます。
VPSの方は、そこまで簡単ではありませんが、お金があるなら、同じようなことも可能です。
似たような利便性が、Dockerにはあり、仮想OSほど、大規模でない点が気に入りました。
ホームページを公開する場合
・単なる自分の紹介（htmlファイルのみ）
これならば、レンタルサーバーに、ファイルをコピーするだけです。
もう少し、複雑なサイト。
・会員制のサイト（htmlと、php）
これなら、少し高価なphpが動くレンタルサーバーにファイルをコピーするのが簡単です。
しかし、phpのプログラムを使うため、レンタルサーバーによっては動かないという事態が発生することがあります。
原因は、phpや、ライブラリのバージョンの違いなどによるものです。
この問題を解決するため、OSを丸ごと借りるVPSへ移行してきました。
他の手段としては、クラウドサービスで、機能毎に借りて構築するという手段もありますが、費用と手間を考えて、VPSにしています。
VPSを使っていて感じるのは、「OSの管理まではやりたくないのだけど」という思いです。
PHPやライブラリのバージョン管理だけで済めば良いのにと思いますが、そうなると、クラウドサービスを使うことになり、これは、これで、別の管理が必要になります。
Dockerなら、レンタルサーバーと、VPSの中間に位置づけられるように思い、期待して、本を読んでいました。
この点は、やや思い違いのようでした。
私の想像では、Webサーバー（Node.js）と、作成したプログラムがパッケージされたものを、サーバーに公開するというものでした。
そうしたものではないようです。
Dockerで、結果的に同じにするなら、公開サーバー内で、Webサーバー（Node.js）と、作成したプログラムを、再構築するようです。
結果的に同じになるなら悪くはないのですが、再構築させるための手続き記述しなければならないことを考えると、その手間が余計です。
もっとも、今でも、サーバーの構築時は、その手順を書き留めながら行い、再構築時は、その手順を読みながら進めますから、それが、マニュアル化され、コマンド１つで実行できるとなれば、便利ではあります。
しかし、これは、何度も構築するような場合にメリットがあり、ほぼ、１回の構築しか行わないのであれば、手間が増えるだけになってしまいます。
結局、今回は、Dockerを使うことはやめました。
しかし、Dockerには期待しています。
例えば、Node.js、Angular、MongoDBを組み合わせた環境を、楽に用意したいという要望には使えます。
問題は、用意された環境が、どのくらい実用的かは、調べてみなければ分からない点で、事実上の標準ができるまでは、本格的には使いにくいです。
時間が問題を解決してくれるまで待ちます。
次回は、Aureliaについての予定。
2017年2月1日水曜日
Node.js インストール
OSは、Ubuntu 16.04 64ビット。
これに、Node.jsをインストールしました。
インストール方法は、いくつかあるようです。
aptで入れるのが、簡単そうでしたが、コマンド名が変わってしまうらしいことと、今回は、勉強の意味合いが強いことから、nvmを使って、インストールしました。
gitのインストール
$ sudo apt install build-essential libssl-dev
$ sudo apt install git
nvmのインストール
$ git clone https://github.com/creationix/nvm.git ~/.nvm
$ source ~/.nvm/nvm.sh
バージョンを確認
$ nvm --version
このままでは、次回のOSの起動時には、nvmは利用できません。
次回も利用できるよう設定することを検討しましたが、結局、nvmは、１度、使えば、後で使うことがないため、そのままにしました。
参考までに、起動時に利用できるように、下記のコマンドを使ってみましたが、効果がありませんでした。
$ echo "source ~/.nvm/nvm.sh" >> ~/.profile
Node.jsのインストール
インストール可能なバージョンを調べる。
$ nvm ls-remote
node.jsのインストール
$ nvm install 6.9.4
確認
$ node -v
まとめると、たった、これだけのことですが、方法がいくつもあるため、いろいろ試行錯誤しました。
次回は、少し寄り道して、Dockerについて書く予定。
これに、Node.jsをインストールしました。
インストール方法は、いくつかあるようです。
aptで入れるのが、簡単そうでしたが、コマンド名が変わってしまうらしいことと、今回は、勉強の意味合いが強いことから、nvmを使って、インストールしました。
gitのインストール
$ sudo apt install build-essential libssl-dev
$ sudo apt install git
nvmのインストール
$ git clone https://github.com/creationix/nvm.git ~/.nvm
$ source ~/.nvm/nvm.sh
バージョンを確認
$ nvm --version
このままでは、次回のOSの起動時には、nvmは利用できません。
次回も利用できるよう設定することを検討しましたが、結局、nvmは、１度、使えば、後で使うことがないため、そのままにしました。
参考までに、起動時に利用できるように、下記のコマンドを使ってみましたが、効果がありませんでした。
$ echo "source ~/.nvm/nvm.sh" >> ~/.profile
Node.jsのインストール
インストール可能なバージョンを調べる。
$ nvm ls-remote
node.jsのインストール
$ nvm install 6.9.4
確認
$ node -v
まとめると、たった、これだけのことですが、方法がいくつもあるため、いろいろ試行錯誤しました。
次回は、少し寄り道して、Dockerについて書く予定。
登録:
投稿 (Atom)