Apache Cordova 入門に参考になった記事まとめ

Ionic framework を使い始めて Apache Cordova の理解も必要と思い、Cordova の記事を読み漁ったのでオススメできる記事をご紹介させていただきます。

Apache Cordova

1つ目は CodeZine の記事です。数年前に流行った Titanium Mobile と Cordova を利用した PhoneGap や Ionic framework との違いが分かりやすく解説されています。まずはこの記事から読み始めるのがおすすめです。

2つ目は HTML5Experts.jp の記事です。Cordova の最新状況と基本が紹介されています。

あとは、開発していて困ったことが出てきたら Stack Overflow や Qiita の記事を頼ることになりそうです。

最後は、言うまでもないですが Cordova の公式ドキュメントですね。日本語のドキュメントも充実してるので、まず公式ドキュメントを読んで、それでも分からなかったら Stack Overflow や Qiita を調べるといいのではないでしょうか。

Ionic Framework のバージョン (version) 確認方法

Ionic Framework の version は本体と CLI で異なるということを教えてもらったので、バージョンを確認する方法をご紹介します。

Ionic Framework

Ionic のバージョンを確認したくなった経緯

Ionic 3.0 has Arrived! の記事を読んで Ionic 3.0 を使ってみようかなと思ったのがきっかけでした。

Ionic CLI のバージョン確認方法

npm install 前の確認方法

npm info で dist-tags や versions が確認できます。

dist-tags: latest: ‘2.2.2’ なのでバージョン指定しないで npm install すると ionic cli はバージョン 2.2.2 がインストールされます。

npm info ionic
 
{ name: 'ionic',
  description: 'A tool for creating and developing Ionic Framework mobile apps.',
  'dist-tags': 
   { latest: '2.2.2',
     unzip: '1.3.1-1.alpha.0',
     serve: '1.3.12',
     server: '1.3.1-3.beta.4',
     link: '1.3.14-beta.1',
     readline: '1.3.15-beta.4',
     resources: '1.3.1-7.beta.4',
     nohooks: '1.3.18-beta.3',
     docs: '1.3.19-beta.2',
     extlib: '1.4.0-beta.7',
     'hook-hotfix': '1.3.21-beta.1',
     beta: '3.0.0-beta7',
     testing: '1.7.15-beta.3',
     livereload: '2.0.0-alpha.11',
     generate: '2.0.0-alpha.15',
     bundle: '2.0.0-alpha.17',
     quickstart: '2.0.0-alpha.20',
     'beta-test': '2.0.0-beta.20',
     test: '2.1.18',
     nightly: '2.1.18-201701110338',
     canary: '3.0.0-beta.5-alpha.c9d454fd' },
  versions: 
   [ '0.9.6',
     '0.9.8',
// 途中省略
     '1.2.9',
     '1.2.10',
     ... 292 more items ],

余談ですがバージョンを指定してインストールしたい場合は、

npm install -g ionic@beta

npm install -g ionic@3.0.0-beta7

のように @バージョン番号 を指定して npm install できます。

npm install 後の確認方法

npm install した後にインストールされている ionic cli をバージョンを確認するには ionic コマンドのバージョンをターミナルで確認できます。

$ ionic --version
2.2.2

Ionic 本体のバージョン確認方法

npm install -g ionic してから ionic start で作成される package.json に記載されている ionic-angular の version が本体のバージョンということを教えてもらいました。

(例) ionic start myApp –v2 した場合

package.json

{
  "name": "ionic-hello-world",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    /* 省略 */
    "ionic-angular": "3.0.1",
    /* 省略 */

この例だと “ionic-angular”: “3.0.1” なので Ionic Framework のバージョンは 3.0.1 を使っているということが分かります。

まとめ

Ionic 本体と CLI のバージョンを勘違いしてしまうと、自分が使っているバージョンが何なのか分からなくなって混乱しそうですよね。

公式ドキュメントを確認するときに自分の使っている Ionic Framework のバージョンを正しく把握しておくことは必須だと思うので、参考になれば幸いです。

フロントエンド得意じゃないエンジニアはどの CSS フレームワークを採用すべきか? → やっぱり Bootstrap がオススメ

最近、知り合いのスタートアップのエンジニアさんに「CSS フレームワークとか何を使えばいいですかね?」と相談されました。

僕は CSS フレームワークはいくつか使ったことあって、色々あるけどこれがオススメって強く言えなかったので社内のフロントエンドエンジニアにヒアリングした内容をご紹介します。

サーバーサイドエンジニアの意見

Bootstrap 4 派

Bootstrap

Bootstrap v4 alpha がとても良いのですが、いつ正式版が出るのか…という状況です。

CSS フレームワーク使わない派

自サイトは基本全部生 CSS 書いてます。

けど、個人的に一番ラクなのは Bootstrap でしたね。融通を効かすのであれば生。

フロントエンドエンジニア、兼、デザイナーの意見

Bootstrap

Bootstrap

Bootstrap が一番レゴブロックのように使えるので使いやすいと思います。

Semantic UI

Semantic UI

Semantic UI は粒が小さい。

Foundation

Foundation

Foundation はその名の通り基礎しかないので物足りない。

Materialize

Materialize

Materialize だとマテリアルデザインしかできない。

まとめ

今から導入するなら Bootstrap v4 alpha を採用して、α版とれる過程でコードを追随していくのがよさそうと思ってます。

Google スプレッドシートで null 文字 or 1 ~ 100 しか設定できない Data Validation

Google スプレッドシートで 1 ~ 100 の間の値、もしくは null 文字しか設定できないようにする Data Validation のカスタム関数を定義したのでご紹介します。

Google Spreadsheet

OR, AND, ISNUMBER, GTE, LTE などの関数を組合せてバリデーションを定義しました。

=OR( A2="null", AND(ISNUMBER(A2), GTE(A2, 10), LTE(A2, 100)) )

データバリデーションは自由度が高くてイロイロできて便利ですね。

参考情報

[Ubuntu] packages can be updated や updates are security updates というメッセージが表示されたときの対応手順

Ubuntu で packages can be updated. や updates are security updates. などのメッセージがターミナルに表示されたら対応すべきことをご紹介します。

ubuntu

メッセージの例

Welcome to Ubuntu 16.04.1 LTS (GNU/Linux 4.4.0-72-generic x86_64)
 
 * Documentation:  https://help.ubuntu.com
 * Management:     https://landscape.canonical.com
 * Support:        https://ubuntu.com/advantage
 
  Get cloud support with Ubuntu Advantage Cloud Guest:
    http://www.ubuntu.com/business/services/cloud
 
42 packages can be updated.
0 updates are security updates.

対応方法 apt-get update/upgrade

対応方法は apt-get updateapt-get upgrade を実行するだけで完了です。

sudo apt-get update
sudo apt-get upgrade

Ubuntu のパッケージのアップデートはこまめにしておきましょう。