インストール $ npm install --save jsonwebtoken $ npm install --save @types/jsonwebtoken コード import * as jwt from 'jsonwebtoken' interface jwtPayload { email: string; name: string; } const jwtPayload: jwtPayload = { email: 'yamada.tarou@…

docker-comsepose ファイルを作成する version: '3' services: express: image: node:14.15.1-alpine container_name: express ports: - '3000:3000' volumes: - ./express:/opt/express/ tty: true docker-build docker-compose build 初期化 npm initコマ…

はじめに 下記のドラック＆ドロップのライブラリをnuxtjsに適用してみる github.com インストール npm install vue-dnd-zone コード pages/test.vueファイルを作成する <template> <div> <div class="simple-page"> <Container @drop="onDrop"> <Draggable v-for="item in items" :key="item.id"> <div class="draggable-item"> {{ item.data }} </div> </Draggable> </container></div></div></template>

はじめに 前回、Redux Tool Kitでstoreを作成したので、作成したstoreを利用したコンポーネントを作成してみる コード app/features/task/TaskItem.jsというコンポーネントを作成する。このコンポーネントは１つのタスクを表示及び削除する/完了ステータスを…

はじめに 前回、ReduxToolkitの件を簡単に調べてので今度は実際に実装してみる px-wing.hatenablog.com コード app/features/task/taskSlice.jsファイルを作成する import { createSlice } from '@reduxjs/toolkit'; export const taskSlice = createSlice({…

はじめに express版のlaravel admin またはrails adminのようなソースを見つけたので動かしてみる github.com docker-compose.yaml nodeのイメージをpullするだけのdocker-composeファイルを作成する version: '3' services: app: image: node:14.16.0-alpin…

はじめに 下記のページを参考に位置情報のサンプルを作成してみる developer.android.com AndrodManifest.xml ACCESS_COARSE_LOCATION 位置情報の精度に、街区を指定します。 ACCESS_FINE_LOCATION ACCESS_COARSE_LOCATION をリクエストしたときよりも正確な…

はじめに jsonファイルを仕様書を動的に作成できないか色々と調べてみた。 CASE1: maticを使ってみる maticを使ってjsonからドキュメントを自動生成する npm install -g matic npm install -g pug www.npmjs.com ドキュメントを生成するために必要なテンプレ…

CLIから本番環境へデプロイする インストール 下記のパッケージをインストールする npm i -g vercel www.npmjs.com cliでログイン 下記のコマンドを実行するとメールアドレスを聞かれるので、入力すると入力したメールアドレスに対してメールが送信されます…

Options APIの場合 components/test.vueファイルを作成して下記のように記述する <template> <div> Name: {{ fullName }} Message: {{ message }} </div> </template> <script lang="ts"> import Vue, { PropOptions } from 'vue' interface User { firstName: string lastName: string } export default Vue.ex…

作成した画面 activity_main.xml このレイアウトがメインのxmlとなり、そのほかの３つのレイアウトファイルをincludeして読み込んでいる

はじめに 前回,AndroidのTODOアプリのレイアウトを作成したので、今回は実装部分を書いてみる px-wing.hatenablog.com コード MainActivityファイルの内容は下記のようにする package biz.hoge.todolist import android.graphics.Paint.STRIKE_THRU_TEXT_FLA…

作成する画面 今回は下記の画面をアプリを作成する。kotolin側の処理は次回に書きますが、今回はレイアウトのみ レイアウトファイル activity_main.xml

参考ページ 下記のサイトを参考に設定する typescript.nuxtjs.org typescriptの設定 インストール # npm i @nuxt/typescript-build @nuxt/types @nuxt/typescript-runtime nuxt.config.jsファイルのbuildModulesを下記のように修正する buildModules: [ ['@n…

手順 vercelの設定をする前に自分のgithubアカウントでvercel用のリポジトリを作成する。privateでもpublicでも大丈夫そう。 vercelでアカウントを作成する。※githubアカウント連携 vercel.com vercelでアカウント作成後、ログインする。clone templateをnux…

参考ページ gingerit.readthedocs.io インストール python -m pip install gingerit 実装 templateファイルはテキストエリアとボタンのみを用意する {{message}} <form action="/" method="post"> {% csrf_token %} <textarea name="txt"></textarea> <input type="submit" value="送信"> </form> views.pyファイルの中身は from django.shortcuts import render from d…

フォルダ構成 下記の構成でプロジェクト全体で利用するテンプレートとアプリケーションで利用するテンプレートを使い分ける ├── application │ ├── templates (アプリケーションのテンプレート) │ │ └── index.html │ └── views.py ├── templates (プロジェ…

Pesticide for Chrome (without hover bar) 要素に枠線が付くのでコーディングしている時にレイアウト崩れの原因や、わざわざ要素にborderを指定しなくても良いので便利 chrome.google.com 実行結果 DevTools z-index 開発者ツールのElementsタブ内にz-index…

利用用途 settings.pyにデータベースやセキュリティトークンの情報が記載されているのはあまり良くないため、envファイルで管理できるようにする settings.pyファイルの設定(デフォルト) djangoのデフォルトの設定ファイルは下記のようにsettings.pyファイル…

django-tailwind 下記のパッケージをインストールして試してみる。 github.com インストール python3.9 -m pip install django-tailwind 設定 ー 下記のコマンドを実行する # python3.9 manage.py tailwind init theme Tailwind application 'theme' has bee…

python 環境のイメージ作成用Dockerfile pythonのライブラリはお好きなものをインストールしてください。djangoでreset apiを実装したいため、djangorestframeworkなどをインストールしてます。 FROM amazonlinux:latest WORKDIR /opt RUN yum update -y RUN…

はじめに 前回、pythonでyoutubeから動画をダウンロードしたので、ダウンロードしたデータをmp4形式に変換してみました。 ffmpegのdokcerイメージ 下記のイメージを利用してdockerでffmepg環境を構築する hub.docker.com docker-compose.ymlの設定 バージョ…

利用するパッケージ 下記のパッケージを利用してpythonを利用してyoutubeの動画をダンロードする pypi.org インストール pip install youtube-dl 利用方法(コマンドラインの場合) コマンドラインで実行する。 コマンドの引数にyoutubeのダウンロードしたいUR…

res / layout /activity_main.xml ボタンを設置して、ボタンクリック時にsendHtmlEmailメソッドが実行されるように設定する

作成する画面 ボタンをクリックすると携帯端末の電話番号とSIMなどの情報を取得する 取得した情報を画面に表示する ※実機ではないと動作しません。エミュレーターだと落ちます。 作成手順 res/ layout /activity_main.xmlファイル 画面レイアウトの設定

サンプル 下記のjsonplaceholderを利用してブログページを作成してみる http://jsonplaceholder.typicode.com/posts nuxtjsで覚えておく getStaticProps サーバーサイドで実行され、pages内でのみ使用可能である npm run devで起動した場合、リクエスト毎に…

ジェネリクス ジェネリックプログラミング 具体的なデータ型に直接依存しない、抽象的かつ汎用的なコード記述を可能にするコンピュータプログラミング手法である。 例のように​定義時は具体的なデータ型に依存しないようにしておいて、 利用時にデータ型を設…

参考ページ 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は、こ…