CordovaアプリをFramework7を使って開発してみる
概要
どういう流れで見つけたのかわからないんですけど、気になるフレームワークを見つけたのです。
Framework7
みてみるとCordova対応しているみたいです。私は過去にCordovaでアプリを開発したことがあるんですけど、Cordovaのアプリって、なんかもっさりしていて...それで最近はReact Nativeに浮気なんかしちゃっているんですけど、「やっぱり自由なCSS書きたいなぁ」って思うんですよね。React Nativeってそのへんちょっと弱い感じがするんですよね...UIが決まりきっているっていうか（私の勉強不足かもしれないですけども）...それはそれでスマートでかっこいいんですけど、私はカスタマイズが自由に、できるならかわいいUIにしたいっていう思いがあるので。
じゃあちょっと試してみよう！そんな感じです。
導入
公式に「こうすればいいよ！」ってのが大抵はあります。なきゃ困る。
というわけで公式の手順に従います。その前に、プロジェクトを作成するディレクトリを作成します。（実はこの手順、最初はしなかったので、作成後に変なところにプロジェクトが作成されるという事故が起きました。）
mkdir framework7-playground cd framework7-playground
ディレクトリの準備ができたら公式の手順を始めていきましょう。まずは、
npm i framework7-cli cordova -g
こちらのコマンドを実行します。特に問題なくいきました。
アプリの作成
次に、
framework7 create --ui
こちらのコマンドを実行...
( ^ω^)「これって--uiという名前のプロジェクトを作るコマンドじゃないのかな？」
そんな疑問がわきますが、とりあえず実行してみます。
すると...
ブラウザが自動で開き、アプリの作成画面が表示されます。すごい！！
表示されている項目を確認＆入力するだけでいいのですね。
項目は2019年3月25日時点で以下のものが表示されています。とりあえず表にまとめてみました。直訳ですけど。
2019年3月26日追記 アプリ作成画面のレイアウトがちょっと変わった上に項目が1個（11個目）増えてました。
| # | 項目名 | 意味 |
|---|---|---|
| 1 | Destination | プロジェクトの作成場所 |
| 2 | App Type | アプリの形式 |
| 3 | App (project) name | アプリの名称 |
| 4 | App package (Bundle ID) | アプリのパッケージ（バンドルID） |
| 5 | Target Cordova platform | Cordovaアプリのターゲット（アプリ形式をCordovaにしたときに出現） |
| 6 | What type of framework do you prefer? | フレームワークのタイプ |
| 7 | Choose starter template | テンプレートの選択 |
| 8 | Should we setup project with bundler? | バンドラーの設定 |
| 9 | Do you want to setup CSS Pre-Processor? | CSSプリプロセッサーの設定（バンドラーをWebpackにしたときに出現） |
| 10 | Do you want to specify custom theme color? | テーマカラーの設定 |
| 11 | Include Icon Fonts? | アイコンフォントの設定 |
項目の入力ができたら一番下の「CREATE APP」と書かれた青いボタンをクリック！！するとなんかログが出てきます。歯車アイコンもくるくると...。これは作成中ということなので、気長に待ちましょう。
先ほどクリックしたボタンが「DONE」という緑色のボタンになっていれば作成完了です。
Destinationで指定された場所にあるのかも確認しましょう。（ここで最初の方で書いたディレクトリ事故に気づきました☆）
アプリを起動する
それでは早速アプリを起動してみます。
アプリの作成時のログにもNext stepsという形で表示されている、
npm start
を実行しましょう。もちろんプロジェクトのディレクトリで行なってください。
すると以下のような画面がブラウザで起動します。
デフォルトで色々揃えてくれちゃってます。すごいすごーい！
Cordovaアプリとして実行
npm startでブラウザでアプリが動きましたが、「私はスマホアプリが作りたいんだ！！具体的にはCordova！！」って場合はエミュレーター等で動かせないと意味ないですよね。以前開発した時は「build時にエラー吐いて実行できないZE☆」なんてことよくありましたからね。
というわけで、先ほどのNext stepsにある以下のコマンドを実行してみます。このコマンドを実行しないでエミュレーターで動かすとソースコードが反映されないようで、ずっとスプラッシュスクリーン的なやつがでてます。読み込み中が長いのかなーとか思ってたけど違った、ソースコードがないだけだった。
npm run build-cordova-prod
すると途中でなんか聞かれました。
May Cordova anonymously report usage statistics to improve the tool over time?
ようするに、開発レポートの送信的なアレですかね。別にYesでもいいんですけど、こういうやつなんとなく好きじゃないのでNoにしました。Cordovaちゃんごめんね。
しばらく待って、** BUILD SUCCEEDED **という文字が最後に見えるので、とりあえず成功したかな？ってところでエミュレーターで動かします。cordova/platforms/iosディレクトリの下に、XCode用のファイルがあるので、それをXCodeで開いてrunします。
すごいです、私が以前Cordovaで気になっていたもっさり具合がないです。いい感じです！
おわりに
とりあえず今回はここまで！次回は、サンプルで作ったアプリのフレームワークはFramework7のcoreを選択したので、それをどうやって書いていけばいいのかを調査できたらと思います。
CSSでセレクタに$や^を使用する
for$="Icon"との出会い
先日、自分ではない人が書いたこんなCSSがあったのです。（実際のCSSとは一部異なります。）
.sample[for$="Icon"] {
color: #ff5555;
}
この、[for$="Icon"]の
$
「何者だこいつは...」ってなったんです。調べても案外出てこないしで、謎だったのですが、同僚に調べてもらったら見つかりました。
for$="Icon"の正体
こいつは、forの末尾がIconとなっている要素に適用されます。
ちなみに逆の指定（つまり、特定の文字列から始まる指定）も可能で、その場合は[for^="Icon"のように書きます。
まぁ、forなんかは複数指定することもないでしょうから特別気をつけることもないのですが、これがclass指定だとちょっと注意です。
例えば、[class$="Icon"]と指定した場合、Iconで終わるclassに適用されます。
結論から言うと、class="sample loveIcon"には適用されて、class="loveIcon sample"には適用されません。
「classの末尾はみんな同じにして末尾セレクタでパパッとかいたろ！！」って時は注意しましょう。
2019/02/24の春コミ一般参加のログ
概要
春コミとは！！いわゆる同人誌即売会である！！
...というわけで今回は完全に趣味方面のブログです。といっても戦利品紹介とかするわけではなく、所要時間の目安として自分の備忘録用です。行くたびに「何時に行こうかな」「何時頃終わるかな」ってことになるもんで。
大雑把なログ
たぶん9:00頃に新宿着いて、りんかい線直通の埼京線に乗って、9:30頃に国際展示場前に着きました。
ちなみに電車は進行方面側の方が空いていた印象。スーツケースの人多い。この日新宿から乗った人だいたい春コミ目当てだった。（国際展示場前で満員電車並だった電車がガラッガラになったんですよ...）
で、入場券買うために並んで...10時ちょい過ぎに入場券買えたかな、たしか。
そして10:30くらいに自分が並んでいた列が動き出して、入場...って感じだったかと。
開始位置は東7ホールでした。私の目当ては東6に集中していたので、まずは東6を目指し、目的のサークルさんのブース探してさまよって...
今回訪問したかったサークルは4つという少なめだったので、さほど時間はかからなかったかな、と。最初に壁サーを目指すのです...お宝目指してレッツゴーなのです。
そんな感じで11:30にはお目当て全部入手済み...だったような...（この辺からあんまり時間見ていない）。お目当てをゲットしたらあとはアクセサリーエリアをくるくる廻ります。本はツイッターのフォローしている方とかなので事前に調べがつくのですけど、アクセサリーはあんまりフォローしていないので事前情報がないのですよね。 なので、閲覧していて好みのデザインがあれば購入させていただいて...一期一会ですからね、まさに。
そんな感じで12:00頃撤収しました、たしか。
行きの電車は混み混みですけど、帰りはみんなばらけるのでこの時間ならば空いてました。新宿まで一本で行けるやつもあるんですかね、私は大崎止まりのやつに乗ってそこから山手乗り換えしたんですが。
まとめ
タイムスケジュール
| おおよその時刻 | 内容 |
|---|---|
| 9:30 | ビッグサイト到着 |
| 10:30 | 会場入り＆買い物開始 |
| 11:30 | 買い物終了＆自由散策開始 |
| 12:00 | 撤収 |
費用
| 項目 | 費用 |
|---|---|
| 入場券 | 1300 |
| 当初の目的だった作品 | 約3000 |
| 会場で出会って突発的に購入した作品 | 1000 |
だいたい5000円くらい出費するよ！って感じですかね。ハンドメイドものは物によっては1つで10000だったりするので結局は何が欲しいかによるから費用はあんまあてにならないですけど、ログとして残しておきます。
ReactでStorybookを使ってみる（2）
概要
今回は用意されたサンプルのコードではなく、自分で作ったコンポネントを表示してみます。
前回の記事の続きみたいな感じです。 該当ファイルに関しては説明を割愛しているので、わからなくなったら前の記事を参考にしてみてください。
Storybookってなんだろ〜？からなんとなく始めましたが、UIちくちくするのが好きなのでちまちまいじっています。
実装
まず、表示したいコンポネントを作ります。今回はButtonコンポネントを作ってみました。
import React, { Component } from 'react';
class Button extends Component {
render() {
return (
<button style={styles.button}>
{this.props.text}
</button>
);
}
}
const styles = {
button: {
borderRadius: "3px",
backgroundColor: "#3498db",
padding: "10px 16px",
fontSize: "14px",
color: "#fff",
border: 'none',
cursor: 'pointer'
}
}
export default Button
次に、このButtonコンポネントをStorybookに組み込みます。
import React from 'react';
import { storiesOf } from '@storybook/react';
import Button from '../src/components/Button'; // <--①importします
storiesOf('Button', module)
.add('simple button', () => (
<Button text="Hello button" /> // <--②addします
));
これで自分の作ったコンポネントがStorybookに表示されるようになりました！
自作コンポネントのカタログ作成が捗りますね〜。
ReactでStorybookを使ってみる（1）
概要
以下の記事でStorybookなんてものが登場して、「なんだろ〜？」と思って試してみました。
ものすごくざっくりいうと、UIを考えるのに便利なツールって感じのようです。 うん、とりあえず気になったので試してみます。
実行環境
- macOS Mojave: 10.14.2
- node: 10.8.0
- npm: 6.2.0
- React: ^16.8.0
- @storybook/react: ^4.1.11
準備
まず、Reactプロジェクトを簡単に作成できるCLIツールをグローバルにインストールします。すでにインストール済みの場合は不要です。
npm i -g create-react-app
次に、Reactプロジェクトを作成します。先ほどインストールしたcreate-react-appを使用します。
create-react-app storybook-sample
プロジェクトの作成には少しだけ時間がかかります。 プロジェクトの準備ができたら、Storybookを導入していきましょう。
Storybookの導入
上記の手順通りにやったらできました。手順通りなので、コードなんかは完全コピペです。本記事で解説はしません。
プロジェクト内でStorybookをインストールします。
cd storybook-sample npm i --save-dev @storybook/react
他にbabel等もインストールします。
npm i --save-dev @babel/core npm i --save-dev babel-loader
package.jsonのscriptsの箇所に以下のコードを追記します。
"storybook": "start-storybook -p 9001 -c .storybook"
プロジェクト直下の.storybookディレクトリにconfig.jsを作成します。.storybookディレクトリがない場合は作成しましょう。
import { configure } from '@storybook/react';
function loadStories() {
require('../stories/index.js');
// You can require as many stories as you need.
}
configure(loadStories, module);
プロジェクト直下の.storiesディレクトリにindex.jsを作成します。先ほどと同様に、.storiesディレクトリがない場合は作成しましょう。
import React from 'react';
import { storiesOf } from '@storybook/react';
import { Button } from '@storybook/react/demo';
storiesOf('Button', module)
.add('with text', () => (
<Button>Hello Button</Button>
))
.add('with some emoji', () => (
<Button><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
));
次に、Storybookを実行します。どきどき。
npm run storybook
実行したら自動でブラウザが開き、無事に表示されましたー！！
自動で開かない場合は、localhost:9001にアクセスしてみてくださいね。
次は使い方を学んでいきたいところですね。公式サイトを見た感じ、React NativeやAngularなんかにも導入できそうです。使い勝手に期待！！
ここまで読んでくださりありがとうございました。
