東京黄昏 ~ LIFE HACK BLOG ~

城南クラスタ/IT/戸建て/ベンチャー/書評など

ionic Creatorで作成した画面データのZIPをExportしてWebサーバにデプロイする

ionic Creatorでプロジェクト作成

  • https://creator.ionic.io/ にアクセスし、アカウント作成
  • +New Projectから新規のプロジェクト(myapp)を作成
  • Ionic v1とIonic v3.xに対応してるが、v3を選択

開発資源をZIPファイルにExport

  • 適当に画面制作をした後、右上の雲のマークからZIPファイルにエクスポート
  • myapp.zipをダウンロード

Ionicのプロジェクトをセットアップ

ionic start myapp

? What starter would you like to use

-> sidemenu

? Would you like to integrate your new app with Cordova to target native iOS and Android?

-> No

? Install the free Ionic Pro SDK and connect your app? (Y/n)

-> Yes

ZIPを解凍した資源をionicプロジェクトフォルダsrc配下にコピー

unzip myapp.zip

srcフォルダ配下に以下の資源が展開される * src/index.html * src/app/ * src/pages/

cp -pr src/* IONIC_PROJECT/src

プレビュー

ionic serve

ビルド

ionic build
  • www配下にSPA資源が配置される
  • www配下の資源をApacheのDocumentRoot配下にコピーすることでWebアプリとして利用できる

参考URL

https://docs.usecreator.com/docs/zip-export-an-ionic-project

Lightning Design SystemをAngularで使う(ng-lightningのセットアップ)

SPAのフレームワークであるAngularでLightning Design Systemを使うためのメモ。

ng-lightningというモジュールが展開されており、それを使うことで簡単に利用できるようになります。

プロジェクト作成

作業フォルダ

npm install -g @angular/cli
ng new PROJECT名

作業フォルダ/プロジェクト名

ng serve

ここまでで、Angularのプロジェクトが立ち上がります。

ng-lightningフレームワークをインストール

作業フォルダ/プロジェクトフォルダ

npm i @salesforce-ux/design-system --save
npm i ng-lightning --save
Lightning Design Systemを利用するための設定

読み込むcssファイルを.angular-json.cssファイルに追記。

作業フォルダ/プロジェクトフォルダ

vi .angular-cli.json
 21       "styles": [
 22         "styles.css",
 23         "node_modules/@salesforce-ux/design-system/assets/styles/salesforce-lightning-design-system.min.css"
 24       ],
モジュールの読み込み

import { NglModule} from 'ng-lightning/ng-lightning';

作業フォルダ/プロジェクトフォルダ/src/app/app.module.ts

  1 import { BrowserModule } from '@angular/platform-browser';
  2 import { NgModule } from '@angular/core';
  3 import { NglModule} from 'ng-lightning/ng-lightning';
  4
  5 import { AppComponent } from './app.component';
  6
  7
  8 @NgModule({
  9   declarations: [
 10     AppComponent
 11   ],
 12   imports: [
 13     BrowserModule,
 14     NglModule,
 15     NglModule.forRoot()
 16   ],
 17   providers: [],
 18   bootstrap: [AppComponent]
 19 })
 20 export class AppModule { }

【備忘】いまさらMovable Typeの環境構築

CPANでDBD::mysqlがインストール出来ないときのメモ 素のREDHATだとモジュール不足でCPANインストールができない。 不足していると思われるライブラリをあらカメじめインストールしておく。 sudo yum install make gcc gcc-c++ mysql-devel

CPANでGDがインストール出来ないときのメモ sudo yum install perl-GD で一発解決

sudo cpan install XXX でインストール出来ないときは

sudo yum install perl-XXX でだいたい問題解決できる。

Macbook Pro 2016からWindows 10へリモートデスクトップ接続

MacからWindow10のマシンにリモート接続することがありますがMicrosoftからMac用のリモートデスクトップが提供されているので、特に不自由なく接続することができます。

Microsoft Remote Desktop 8.0

Microsoft Remote Desktop 8.0 を Mac App Store で

が、しかし、キーボード配列がUSにしか対応しておらず、いろいろと設定を変えても日本語キーボードのMac→日本語版Windows10に接続したところで入力がUSキーボード配列になってしまいまいます。

Beta版のリモートデスクトップを利用するか、Parallelsが提供するリモートデスクトップで解決する模様

Microsoft Remote Desktop for Mac(Beta)

https://rink.hockeyapp.net/apps/5e0c144289a51fca2d3bfa39ce7f2b06/

Parallels Client

https://itunes.apple.com/jp/app/parallels-client/id600925318?mt=12

私は、Parallels Clientで問題が解決しました。 インストール直後だとUS配列のままでしたが、リモート接続先のWindows10とクライアントマシン(mac)の再起動で問題なく日本語配列でつなげるようになりました。

THE NORTH FACE クライムライトジャケット

連日暑い日が続きますが、とは言えもうそろそろ、9月。 秋の行楽シーズンに向けて用意したいのが、透湿防水性能に優れたゴアテックスのアウターシェル。

最近のものはスタイリッシュなデザインで、タウンユース仕様になっており、普段使いも問題なし。 1枚は用意しておきたいアイテム。

その中でも定番のノースフェイスのアウターシェル。防水性能に優れたゴアテックス製の一枚を是非。

THE NORTH FACE クライムライトジャケット

(ザ・ノース・フェイス)THE NORTH FACE クライムライトジャケット(ザ・ノース・フェイス)THE NORTH FACE クライムライトジャケット

THE NORTH FACE 2017-03-17
売り上げランキング : 22931

Amazonで詳しく見る

有線イヤホンはもういらない。Bluetoothイヤホンでスッキリ。

iPhone7が出たときにイヤホンジャックがついてないと聞いて、「ちょっとなんだかなー」と思ったことを記憶していますが、実際のところもうイヤホンジャックはいりません。AnkerのBluethoothイヤホンがあれば。

1.5時間の充電で7時間使えます。線がないって素晴らしい。スマホ本体とイヤホンがつながっていないので取り回しがすごく楽です。 価格も3000円を切っているので手頃。

今年一番のヒット作。コードの絡まりから開放されましょう。

Anker SoundBuds Slim Bluetoothイヤホン

Anker SoundBuds Slim Bluetoothイヤホン(カナル型)【マグネット機能 / 防水規格IPX4 /内蔵マイク搭載】 iPhone、Android各種対応Anker SoundBuds Slim Bluetoothイヤホン(カナル型)【マグネット機能 / 防水規格IPX4 /内蔵マイク搭載】 iPhone、Android各種対応

Anker
売り上げランキング : 60

Amazonで詳しく見る

WiFiの電波が少し弱い時は無線LAN中継器で解決

自宅の無線LANですが、寝室で寝転がりながらスマホでポチポチしているとちょっと電波の届きが悪く、バリ3というよりはバリ2〜1という時もあり、自宅なのにWiFiを切ってSIMでデータ通信をするときも。 流石に自宅でいちいち切り替えるのも面倒なので、WiFi中継器を導入し、WiFiの接続エリアを広げてみました。

導入したのはTP-Link RE200、上位機種もありましたが自宅で使うだけなので入門機ということで。 セットアップはかんたんで、コンセントに挿して、ブラウザで指定のURLに接続。

WiFiの電波をスキャンして親機を選択すれば、以上で終了。 親機と同じSSIDにし設定をコピーすれば、シームレスに切り替えできます。

TP-Link WIFI 無線LAN 中継器 11ac/n/a/g/b RE200

TP-Link WIFI 無線LAN 中継器 11ac/n/a/g/b 433+300Mbps 11ac対応 3年保証 RE200TP-Link WIFI 無線LAN 中継器 11ac/n/a/g/b 433+300Mbps 11ac対応 3年保証 RE200

TP-LINK 2016-05-24
売り上げランキング : 10

Amazonで詳しく見る