参考ページ kotolinのチュートリアルに少しアレンジをくわえた作成してみた。 developer.android.com 上記のチュートリアルで変更した実際に変更したファイル Kotlin関連 MainActivityファイル。 チュートアルには内、ボタンクリック時にダイアログを表示し…

共通レイアウト用のコンポーネント components/Laout.jsファイルを作成して下記のコーディングを行う import Head from 'next/head' import Link from 'next/link' export default function Layout({children, title= "HP by nuxtjs"}) { return ( <div className="flex justify-center items-center flex-col min-h-screen text-gray-600 text-sm font-mono"> </div>

参考ページ アプリ全体で関数や値を利用できるようにしたい場合があります。 これらの変数をVueインスタンス（クライアント側）、コンテキスト（サーバー側）、さらにはVuexストアに挿入できます。 これらの関数の前に$を付けるのが慣例です。 Nuxt.jsは、こ…

データクラス オブジェクト指向で、処理を持たないデータだけを保持するクラス​を利用したいことがある場合、データクラス​を定義する。データクラスはclassの前に「​data​」というキーワードをつけて定義する データクラスを定義する際には以下の条件を満た…

nuxtjsとtailwindcssのインストール nuxtjsをインストール npx create-next-app . --use-npm tailwindcssだけインストールするとエラーが発生するため npm i tailwindcss (下記のエラーが発生する) npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to reso…

継承 継承とオーバーライドを可能にするには、​open修飾子​を使う必要がある メソッドをオーバーライドするには​override​を使う オーバーライドを強制するためには​抽象クラス​と​抽象メソッド​を用いる 抽象メソッドとは派生クラスでのオーバーライドを強…

はじめに 下記のプラグインを利用してnuxtjsにインストールして利用する github.com nuxtjs用のプラグインがあったがスターの数が少ないため、lazysizesをインストールする github.com インストール 下記のコマンドでインストールを行う yarn add lazysizes …

問合せフォームのサンプル <section class="text-gray-600 body-font relative"> <div class="container px-5 py-24 mx-auto"> <div class="flex flex-col text-center w-full mb-12"> <h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-gray-900">お問い合わせ</h1> </div></div></section>

クラスの基本 Kotlinでクラスを定義するには以下のように書く class User { var lastName = "" var fistName = "" var age = 0 fun introduction() { println("Name ${fistName} ${lastName}です。${age}さい") } } fun main() { val user = User() user.las…

関数 関数を定義するにはfunを使用する。構文は下記のように記載する //関数の定義 fun 関数名 (仮引数: 引数の型,...): 戻り値の型 {処理} //関数の呼び出し 関数名(実引数,...) 例 フルネームを返す関数 fun getFullName (fistName: String, LastName: Str…

はじめに 最近、APIのバージョニングについて考えることがあったので自分なりに調べたことを下記にまとめる。 APIにバージョンを含めるメリット・デメリット メリット クライアント側が特定のバージョンを指定してアクセスすることができるので、クライアン…

カードの例 PC・タブレットの場合 スマートフォンの場合 コード 上記のレイアウトを実現するためのHTMLとCSS <div class="md:flex justify-center mb-16"> <div class="py-4"> <div class="w-11/12 md:max-w-md mx-auto my-4 shadow-x1 border rounded-lg overflow-hidden"> <img src="image1.jpg" class="h-48 w-full object-cover"> <div class="p-4"> </div></div></div></div>

はじめに 前回から少しづつkotlinを覚えているので、そのメモの続き px-wing.hatenablog.com 配列とコレクション Kotlinで複数の要素をまとめて扱うには、Javaと同様に配列とコレクションを用いる 配列と代表的なコレクション（List・Set・Map）は以下のよう…

参考ページ tailwindcss.com サンプルコード1 <div class="grid grid-cols-4"> <div class="border-2">1</div> <div class="border-2 col-span-2 bg-green-200">2</div> </div>

kotlin playground playgroundで試し実行ができるのが便利 https://play.kotlinlang.org/ 変数の宣言 var 変数名: 変数の型 = 初期値 型 概要 Double 64bit浮動小数点数型 Float 32bit浮動小数点数型 Long 64bit整数型 Int 32bit整数型 Short 16bit整数型 By…

container tailwindcss.com 上下固定でメイン部分がスクロールするサンプル <header class="sticky top-0 bg-blue-300"> header </header> <main class="container bg-indigo-200 h-screen mx-auto px-4 overflow-scroll"> メイン部分 </main> <footer class="fixed bottom-0 w-full bg-green-300 text-center text-white">footer</footer> invisible 要…

参考ページ tailwindcss.com 記事一覧を作ってみる <section class="mt-16"> <h2 class="text-center mt-8 mb-8">記事一覧</h2> <div class="flex justify-center space-x-16 ml-4 mr-4"> <div class="w-1/4 border"> <img src="image1.jpg" class="w-96"> <h3 class="p-2 text-center">タイトル</h3> <p class="p-4">ここに文章が入ります。ここに文章が入ります。ここに文章が…</p></div></div></section>

position (参考ページ) tailwindcss.com ※こちらのページが自分は一番分かりやすかった。ありがとうございます。 saruwakakun.com 親がrelative 子がabsolute <div class="mt-96 relative w-96 h-60 bg-blue-200"> <div class="absolute w-40 h-40 top-8 left-8 bg-red-300"></div> <div class="absolute w-40 h-40 top-16 left-16 bg-green-300"></div> </div> 画像の上にテ…

tailwindcss(追い風) UIキットではなく、ユーティリティクラスになっているので、カスタマイズしやすい レスポンス対応、flexbox,grid採用 Laravel8からtailwindcssが採用される CDNで利用する場合の注意点 下記のことがCDNで利用する場合できない。 Tailwin…

day.js インストール yarn add dayjs github.com day.jsの設定 下記の処理はdayjsを日本時間に設定するための処理 import dayjs from 'dayjs' // dayjsの タイムゾーンの設定 dayjs.extend(require('dayjs/plugin/timezone')) dayjs.extend(require('dayjs/p…

参考ページ https://pypi.org/project/pytrends/ https://github.com/GeneralMills/pytrends https://dev.classmethod.jp/articles/pytrends_introduction/ インストール $ pip install pytrends コード from pytrends.request import TrendReq ## 日本時間…

参考ページ icrawlerを利用して画像をクローリングする icrawler.readthedocs.io インストール JupyterLabのコンソール画面からicrawlerをインストールする。 pip install icrawlerコマンドを実行する 実行 下記のサンプルコードを実行する from icrawler.bu…

参考記事 AsyncStorageは非推奨らしいので使う際はお気をつけて. reactnative.dev コード 利用するためにパッケージをimportする import { AsyncStorage } from "react-native" 下記はローカルにデータを保存するための関数 const setStoreData = async (key…

参考ページ 下記のパッケージを利用すると簡単にQRコードを生成することができる github.com インストール yarn add react-native-svg react-native-qrcode-svg コード import QRCode from 'react-native-qrcode-svg'; // QRコードに表示するアイコンを指定…

参考資料 下記のvue-multiselectをnuxtjsに適用する vue-multiselect.js.org 下記のnuxt-vue-multiselectパッケージもあるが、スターが少ないので、やめておく。 github.com インストール yarn add vue-multiselect nuxtjsの設定 plugins/vue-multiselect.js…

参考ページ ネットワーク docs.expo.io Vibrate reactnative.dev インストール # expo install @react-native-community/netinfo サンプルコード import NetInfo from '@react-native-community/netinfo'; // ネットワーク通信を確認して通信ができなかった…

参考ページ https://docs.mongodb.com/realm/react-native/quick-start MongoDBCloudの登録と設定 MongoDBAtlasでアカウント作成 下記のページからアカウントを作成する account.mongodb.com アカウント情報入力 利用規約に同意する グローバルメニューにあ…

store内でapollo clientを利用 参考ページ github.com github.com サンプルコード this.app.apolloProvider.defaultClientを利用してqueryを呼び出す import categoriesQuery from '@/queries/categories' export default { namespace: true, state: () => (…

docker image 今回利用するイメージはこちら hub.docker.com docker-compse.ymlの設定 JUPYTER_ENABLE_LABはJupyternoteではなくJupyterLabを利用できるようにするための環境変数 version: '3' services: Jupyter: image: jupyter/datascience-notebook port…