Font AwesomeをVue.jsにインストールして使う
Vue.jsにFont Awesomeをインストールして使います。
インストール
下記のパッケージをインストールします。
$ npm i --save @fortawesome/fontawesome-svg-core $ npm i --save @fortawesome/free-solid-svg-icons $ npm i --save @fortawesome/vue-fontawesome
追加分のiconも利用したい場合は、こちらのパッケージもインストールしてください。
$ npm i --save @fortawesome/free-brands-svg-icons $ npm i --save @fortawesome/free-regular-svg-icons
importの設定
src/main.js に下記のように編集します。 下記のケースではアイコンのspinnerだけを利用しています。
import Vue from 'vue' import App from './App' /* 追加ここから */ import { library } from '@fortawesome/fontawesome-svg-core' import { faSpinner } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' library.add(faSpinner) Vue.component('font-awesome-icon', FontAwesomeIcon) /* 追加ここまで */ Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', components: { App }, template: '<App/>' })
ほかのアイコンが必要な場合は、下記のように必要なアイコンをimportして、libraryに追加してください。
import { faSpinner, faArrowDown} from '@fortawesome/free-solid-svg-icons' library.add(faSpinner, faArrowDown)
えいやぁで全部追加する場合は、下記のように書くこともできます。
import { fas } from '@fortawesome/free-solid-svg-icons' library.add(fas)
.vueで利用する
実際 .vueファイルでアイコンを利用する場合は、下記のようになります。
<template> <fa-icon icon="spinner" class="fa-3x fa-pulse" /> </template>
参考サイト
関連記事
- 作者: mio
- 出版社/メーカー: シーアンドアール研究所
- 発売日: 2018/05/29
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
Vue Nativeをインストールしてみたら想像以上に簡単だった!
これまで、React Nativeが気になりながらも、学習コストを考えてVueを選択していたのですがVue Native が登場したんですね! 嬉しい状況です。
早速、インストールから、最初の起動までを試してみました。
パッケージのインストール
vue-native-cli と create-react-native-app のパッケージをインストールします。
npm install -g vue-native-cli npm install -g create-react-native-app
watchmanのインストール
watchmanがインストールされていないと npm start を実行した時にエラーが発生します
今回 blewでインストールします。
brew install watchman
プロジェクトの作成
プロジェクトを作成していきます。
今回プロジェクト名は 「test-vue-native」 として作成していますが、 適宜自由に変更してください。
vue-native init test-vue-native
起動
cd test-vue-native npm start
watchmanがインストールされていないと、下記のようなエラーが発生します。
See https://git.io/v5vcn for more information, either install watchman or run the following snippet: sudo sysctl -w kern.maxfiles=5242880 sudo sysctl -w kern.maxfilesperproc=524288 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! test-vue-native@0.1.0 start: `react-native-scripts start` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the test-vue-native@0.1.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
起動が成功したら 下記のようにどのように起動するかが表示されるの表示したいものをクリック
› Press a to open Android device or emulator, or i to open iOS emulator. › Press s to send the app URL to your phone number or email address › Press q to display QR code. › Press r to restart packager, or R to restart packager and clear cache. › Press d to toggle development mode. (current mode: development)
今回 i で iosのエミュレータで起動しました。
そのほかの動作は
- a で Androidのエミュレータ起動
- i で iOS エミュレータ起動
- s で 電話番号かメールにアプリのURLを送信
- q でQRコードを表示
- r (小文字)で 再起動
- R (大文字)でキャッシュを削除してから再起動
- d で developモードとproductionモードの切り替え
感想
ここまでは、想像以上に簡単でした。
ここから、VueとNativeのコンポーネントを組み合わせればできるのかなというイメージでいますが アプリ初心者ので、モロモロ問題は出てきそうなので色々と試してみたいと思います。
参考サイト
関連記事
React Native入門 - Expoではじめる - iOS・Androidアプリ開発入門 (1)
- 作者: 中野仁
- 発売日: 2018/06/01
- メディア: Kindle版
- この商品を含むブログを見る
vue cli で Github の graphql (API)を vue-apolloを使って叩く
vueのインストール
vue init webpack my-project
何個か質問されるので、回答しながら進んでください。
インストール終わったら、
パッケージをインストールして、起動!
cd my-project npm install npm run dev
vue-apolloのインストール
vueからgraphqlを叩きやすくしてくれるモノです。
下記パッケージをインストールします。
npm install --save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag
main.jsに設定を追加
こんな感じです。
import Vue from 'vue' import App from './App' import router from './router' import {ApolloClient} from 'apollo-client' import VueApollo from 'vue-apollo' import { HttpLink } from 'apollo-link-http' import {ApolloLink, concat} from 'apollo-link' import { InMemoryCache } from 'apollo-cache-inmemory' Vue.config.productionTip = false Vue.use(VueApollo) const AccessToken = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' const authMiddleware = new ApolloLink((operation, forward) => { operation.setContext({ headers: { Authorization: `bearer ${AccessToken}`, Accept: 'application/vnd.github.v4.idl' } }) return forward(operation) }) const httpLink = new HttpLink({ uri: 'https://api.github.com/graphql' }) const apolloClient = new ApolloClient({ link: concat(authMiddleware, httpLink), cache: new InMemoryCache() }) const apolloProvider = new VueApollo({ defaultClient: apolloClient, defaultOptions: { $loadingKey: 'loading' } }) new Vue({ el: '#app', provide: apolloProvider.provide(), router, components: { App }, template: '<App/>' })
headers の Authorizationに githubのAccessTokenを渡してあげています。
githubのAccessTokenは下記リンクよりの取得して自分のtokenに修正してください。
https://github.com/settings/tokens
compornetの書き方
適当に graphql.vueなどでお試しください。
<template> <p> {{viewer.login}} </p> </template> <script> import gql from 'graphql-tag' const ViewerQuery = gql` query { viewer { login } } ` export default { name: 'index', data () { return { viewer: '' } }, apollo: { viewer: { query: ViewerQuery, // update (data) { // return data.viewer // } } } } </script> <style scoped> </style>
{{viewer.login}} に自分のgithubのアカウント名が表示されれば成功です。
下記はポイントや注意です
import gql from 'graphql-tag'
graphql-tagをインポートします。
graphqlのクエリーを書きやすくしてくれるもの
const ViewerQuery
const ViewerQuery に graphql-tagを使って、クエリーを書いています。
ハマったのが、
gql`
の
`
ングルクォーテーション【 ' 】 じゃなくて バッククォーテーション【 ' 】です。
ご注意を!!
受け取り用の変数とapolloからの呼び出しを定義
dataにviewerを定義しています。
data () { return { viewer: '' } }, apollo: { viewer: { // <= セットする変数名 query: ViewerQuery, // <= 呼び出すクエリー } } }
今回、graphqlのクエリの戻りが、下記のようになります。
{ "data": { "viewer": { "login": "xxxxxxx" } } }
※ 変数名とレスポンスでdata配下の名前をviewerで統一しておくと、暗黙的にセットしてくれます。
ここもハマりポイントで、
下記のように レスポンスの名前と変数名が異なると値がセットされません。
data () { return { hello: '' } } apollo: { hello: { query: ViewerQuery } } }
↑ ダメな書き方です
しかし
変数名とレスポンスの名前が違う時 や レスポンスの部分的に値をセットしたい時などは、 update (data) を使って特定の値をセットすることもできます。
data () { return { hello: '' } } apollo: { hello: { query: ViewerQuery, update (data) { return data.viewer } } } }
data () { return { viewer: '', login: '' } } apollo: { login: { query: ViewerQuery, update (data) { return data.viewer.login } } } }
参考サイト
ありがとうございます
GitHub - Akryum/vue-apollo: 🚀 Apollo/GraphQL integration for VueJS
GitHub - apollographql/graphql-tag: A JavaScript template literal tag that parses GraphQL queries
Introduction to GraphQL | GitHub Developer Guide
GraphQL API Explorer | GitHub Developer Guide
新卒エンジニアがVue+GraphQL+ServerlessでTodoアプリ作ってみた
express-graphql + vue-apollo で GraphQLを試してみた | PLAID engineer blog
関連記事
- 作者: mio
- 出版社/メーカー: シーアンドアール研究所
- 発売日: 2018/05/29
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
Nuxt.jsをインストールする
Nuxtをインストールしていきます。
今回は、nuxt_testというプロジェクト名で作るようになっていますが、 適宜変更してください。
また、vue-cliを使っていますが、
インストールしていなければ、下記でインストールすることができます。
npm install -g vue-cli
インストール方法
スターターテンプレートでインストールしています。
途中、Project nameやProject description、Authorなど聞かれますが、用途に合わせて設定してください。
vue init nuxt-community/starter-template nuxt_test
インストールが完了したら、パッケージをインストールします。
cd nuxt_test npm install
以上です。
プロジェクトの起動は以下です。
npm run dev
http://localhost:3000 で確認することができます。
こんな画面がでれば成功です。
関連記事
- 作者: mio
- 出版社/メーカー: シーアンドアール研究所
- 発売日: 2018/05/29
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
参照記事
Javascriptで置換する
Javascriptで置換(replace)する時の注意点
2018-05-29
を
2018/05/29
に置換したい時に replace 使えば OKだと思って
'2018-05-29'.replace(/-/, '/')
としたら
2018/05-29
となりました。 先頭しかかわらないんですね。
replaceAll したい
全部置換したい時は g が必要です。
'2018-05-29'.replace(/-/g, '/')
そうすると
2018/05/29
となります。
参考サイト
関連記事
初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発
- 作者: Ethan Brown,武舎広幸,武舎るみ
- 出版社/メーカー: オライリージャパン
- 発売日: 2017/01/20
- メディア: 単行本(ソフトカバー)
- この商品を含むブログを見る
JSON形式のWEB APIをすぐにホスティングできるサイトを作りました
APIって便利ですよね。
ここ最近。色々なサービスでAPIが提供されていて JSONを扱う機会が増えて来ていると感じる今日この頃です。
そんな時代に開発をしていると、ちょっとスタブがわりのJSONが欲しいんだけどー
っていう、フロント系エンジニアは多いんじゃないでしょうか?
そんな方(自分)の為にJSON形式のWEB APIをすぐにホスティングできる JSON OKIBA (https://json.okiba.me/)というサイトを作りました!
JSON OKIBAはこちら
↓こちら↓
最短30秒でJSON形式のWEB APIを公開 | JSON OKIBA
↑こちら↑
使い方
使い方は、とっても簡単!
- 返却して欲しい、jsonを書く
- 保存ボタンをクリック
- アクセス用URLが生成
以上。
最短 30秒で自分用のJSON形式のWEB APIを公開できるとうたっています。
頑張ればもっと短くできるはず!!
サンプルのjson や JSONの書き方も書いてあらので是非ご参考に。
Rubyで複数の区切り文字で文字列を配列に変換したい!
例えば
str = 'aaaa+bbbb cccc'
の文字列を
['aaaa', `bbbb', 'cccc']
にしたいんだよね!という時の話です。
解決案
個人的にたどり着いたのは
一回置換しよう!
str.gsub('+', ' ').split(/[[:blank:]]+/)
です。
「+」を「 」スペース に置換してから
「 」スペースでsplitです。
以上です。
関連記事
プロを目指す人のためのRuby入門 言語仕様からテスト駆動開発・デバッグ技法まで (Software Design plusシリーズ)
- 作者: 伊藤淳一
- 出版社/メーカー: 技術評論社
- 発売日: 2017/11/25
- メディア: 大型本
- この商品を含むブログを見る