インストール yarn add react-native-uuid expo install expo-random expo install expo-crypto 参考URL github.com docs.expo.io docs.expo.io サンプルコード import React, { useState, useEffect } from "react"; import { ScrollView,Button, View, Tex…

参考記事 discuss.redash.io 設定 docker-compose.ymlのservice.serverにREDASH_ADDITIONAL_QUERY_RUNNERS: redash.query_runner.pythonを追加して、dockerを再起動するだけで利用できるようになります。 services: server: <

参考ページ qiita.com Dockerfile FROM amazonlinux:latest RUN yum update -y ## nodejs RUN curl -sL https://rpm.nodesource.com/setup_14.x | bash - RUN yum install nodejs -y RUN yum -y install wget RUN wget https://dl.yarnpkg.com/rpm/yarn.repo…

参考ページ 下記のページの手順の場合、途中でエラーが出るので、少し手順を変えてインストールしてます。 tailwindcss.com インストール 下記のインストールだとエラーが発生する yarn add @nuxtjs/tailwindcss tailwindcss 下記のように指定してインストー…

nuxtjs/toastの場合 参考URL github.com インストール yarn add @nuxtjs/toast 設定 modules: [ '@nuxtjs/toast' ], toast: { // 右上にtoastを表示 position: 'top-center', // 特に指定しなくても5秒で消えるように設定 duration: 5000 } 実装 methods: { …

参考ページ github.com インストール yarn add cross-env 環境ごとの設定ファイルを作成する configフォルダを作成して、その中に各環境の設定ファイルを作成する -config/env.development.jsファイルを作成して下記のように記載する module.exports = { api…

参考ページ element.eleme.io コード <template> <el-container> <el-header>Header</el-header> <el-main> <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"> <el-form-item label="Activity name" prop="name"> <el-input v-model="ruleForm.name" /> </el-form-item> </el-form></el-main></el-container></template>

参考ページ https://ja.nuxtjs.org/docs/2.x/configuration-glossary/configuration-loading/ 設定 nuxt.config.jsファイルを下記のように設定する loading indicatorプロパティはぺージ読み込み中にローディングインジケータを表示する設定。最初の読み込み…

インストール # yarn create nuxt-app <プロジェクト名> # cd <プロジェクト名> # yarn add element-ui # yarn add sass-loader # yarn add sass 設定 plugins/elementUi.jsファイルを作成し、下記のように記述する import Vue from 'vue' import ElementUI …

参考URL www.npmjs.com インストール $ yarn add @nuxtjs/gtm 設定 nuxt.config.jsファイルに下記の記述をする enabledをtrueを指定しないとリクエストが送信されない。 export default { modules: [ '@nuxtjs/gtm', ], gtm: { id: 'GTM-XXXXXXX', enabled: …

はじめに 下記のページを参考にstrapiでgoogle authを実行してみる strapi.io google auth api key 発行の手順 Google DeveloperConsoleにアクセスします https://console.developers.google.com/ 2.トップメニューの[プロジェクトの選択]ドロップダウンをク…

GraphQL Playgroundを利用する 参考記事 www.gatsbyjs.com package.jsonファイルの変更 package.jsonファイルのdevelopコマンドを"develop": "gatsby develop"から下記のように書き換える "scripts": { "build": "gatsby build", "develop": "GATSBY_GRAPHQL…

インストール # yarn add gatsby-transformer-remark # yarn add gatsby-remark-images # yarn add gatsby-remark-relative-images 参考URL gatsby-transformer-remark Remarkを使用してMarkdownファイルを解析します。 https://www.gatsbyjs.com/plugins/ga…

はじめに - gatsbyの環境を構築したので、gatsbyのレイアウトにmaterial-uiを適用してみる px-wing.hatenablog.com 参考ページ material-ui.com material-ui.com インストール yarn add @material-ui/core yarn add @material-ui/icons コード pages/index.j…

Dockerfile ※ 下記のファイルだけではdokerは起動しません。nginxの設定ファイルをコピーする処理をしているため FROM amazonlinux:latest RUN yum update -y ## nginx RUN yum install -y amazon-linux-extras RUN amazon-linux-extras install nginx1 RUN …

はじめに だいぶ前に１つのサーバーをGMOからAWSに移動したが、もう1台GMOにあるサーバーをAWSに移してみる。 だいぶ手順を忘れており、いきなりEC2を作成して何度もインスタンス作り直したので、忘れないように簡単に手順をまとめておく 手順 1.VPC作成 px-…

はじめに 下記のページを参考に実装してみる strapi.io 更新系クエリーの作成 queries/article-create.gqlファイルを作成し下記のように記述する mutation createArticle($title: String, $details: String) { createArticle(input: { data: { title: $title…

はじめに 下記のページを参考に実装してみる strapi.io インストール yarn add @nuxtjs/apollo graphql 設定 nuxt.confg.jsファイルを下記のように記述する modules: [ '@nuxtjs/apollo' ], apollo: { clientConfigs: { default: { httpEndpoint: process.en…

参考URL 下記のページを参考にstrapiでgraphqlを利用できるようにしてみる strapi.io インストール strapiのプロジェクトフォルダ内で下記のコマンドを実行して、graphqlのパッケージをインストールする yarn strapi install graphql 動作確認 'http://local…

はじめに 前回、ローカルストレージに保存する処理を調べたので、次の画面に保存したデータを表示する方法を調べる コード components/HelloWorld.vueファイルを下記のように記述する <template> <Page class="page"> <ActionBar title="Local Data Storage" class="action-bar" /> <ScrollView> <StackLayout class="home-panel form input-field"> </stacklayout></scrollview></actionbar></page></template>

はじめに ブラウザをリロードするとvuexのstoreのデータが削除されてしまうため、vuex-persistedstateを利用してみる。 インストール yarn add vuex-persistedstate github.com 保存先にセッションストレージを利用する場合 window.sessionStorageを指定する…

参考ページ docs.nativescript.org docs.nativescript.org コード <template> <Page class="page"> <ActionBar title="Local Data Storage" class="action-bar" /> <ScrollView> <StackLayout class="home-panel form input-field"> <Label text="数値" class="heading" /> </label></stacklayout></scrollview></actionbar></page></template>

はじめに normalizeを利用してヘッダー＆フッターが常に上下に固定化されているページを作成する necolas.github.io CSS stylesheetは下記のように記述する html, body { margin: 0; /* 余白の削除 */ padding: 0; /* 余白の削除 */ width: 100%; height: 10…

参考ページ docs.nativescript.org サンプルコード タップイベントなどを取得して画面に表示するシンプルなアプリ <template> <Page class="page"> <ActionBar title="操作イベント" class="action-bar"></ActionBar> <GridLayout rows="auto, auto, *"> </gridlayout></page></template>

参考URL docs.nativescript.org コード <template> <Page> <ActionBar title="Home" /> <ScrollView> <StackLayout class="home-panel"> <Label textWrap="true" class="h2 description-label"> {{uuid}} </Label> <Label textWrap="true" class="h2 description-label"> {{os}} </Label> </stacklayout></scrollview></actionbar></page></template>

インストール tns plugin add nativescript-camera market.nativescript.org コード <template> <Page> <ActionBar> <Label text="カメラ起動サンプル"/> </ActionBar> <Button @tap="onButtonTap" text="カメラ起動7" class="-outline"></Button> </Page> </template> <script> import * as camera from "nativescript-camera"; import { Image } …

はじめに vee-validateで覚えたことを下記にまとめる <validation-provider>タグを利用するとレイアウトが崩れる現象に遭遇したので、その時のメモ。 レイアウトが崩れるコード <validation-provider>を埋め込むとdivタグが自動で生成されるため、レイアウトが崩れていた。 <validation-provider rules="required|nameKanji:@姓,@名" name="姓" > <div class="hogehoge"> <p class="inputform_input-title"> 姓 </p> </div></validation-provider></validation-provider></validation-provider>

はじめに 前回、nativescriptの環境を構築したので、実機での動作確認する方法を確認する 実行確認方法 作成したプロジェクト内でtns preview --bundleのコマンドを実行する $ cd my-app $ tns preview --bundle QRコードを読み込む nativescriptのplaygroun…

インストール nodejsが入っている状態で下記のコマンドを実行する $ npm install -g nativescript インストール時に下記の２つの質問を聞かれる。２つともNを指定する Do you want to help us improve NativeScript by automatically sending anonymous usag…

はじめに Redux Toolkitを調べてみる。 インストール 下記のようにインストールすると、Redux Toolkitをインストールすることができる。 npx create-react-app my-app --template redux-typescript Redux DevToolsインストール Reduxを開発する際はRedux Dev…