フリーランス 技術調査ブログ

フリーランス/エンジニア Ruby Python Nodejs Vuejs React Dockerなどの調査技術調査の備忘録

androidのkeystoreの作成手順

参考ページ developer.android.com 作成手順 ①. keytoolを利用するためにJavaをインストールする。 www.oracle.com ②.androidの 「Build」→「Generate Signed Bundle / APK..」を選択する ③. 「Android App Bundle」 or 「Apk」のどちらかを選択するのですが…

reactでカレンダー機能を実装する

fullcalendar reactでfullcalendarを利用してみたが、カレンダー上でイベントを追加できるようにするには480ドルを支払わないといけないので見送る。 fullcalendar.io パッケージインストール npm install --save @fullcalendar/react @fullcalendar/dayg…

android スプラッシュからの携帯電話情報の取得

はじめに androidでスプラッシュ画面から遷移して携帯電話情報を取得して画面表示するサンプルを作ってみた manifestファイル 携帯電話情報を取得するために下記のXMLを記述する <uses-permission android:name="android.permission.READ_PHONE_STATE" /> <uses-permission android:name="android.permission.READ_PHONE_NUMBERS" /> app\build.gradleファイル コルーチンを利用するためにkotlinxをインポート</uses-permission></uses-permission>…

Windows/Docker上でswiftを動かす

環境構築 1 . Windows10PCにDockerデスクトップをインストールします swift.orgからSwiftdockerイメージを取得します swift.org swiftのイメージをPullしてくる docker pull swift 下記のようにswift dockerを起動してswiftコマンドを実行するとエラーが発生…

OpenProjectをインストールして個人開発のスケジュールを管理する

OpenProjectのインストール 下記の手順でローカルでOpenProjectを動作できる環境を構築することができる git clone https://github.com/opf/openproject-deploy --depth=1 --branch=stable/11 openproject cd openproject/compose docker-compose pull http:…

WordPressのバージョンアップ依頼や引継ぎ依頼がきた場合の確認項目を検討してみた。

はじめに WordPressのバージョンアップや、運用している人がいなくなったので引き継いでほしいという話はよくあるが、自分がもしその案件を受けるなら下記の事前ヒアリングをしてボリューム感をヒアリングしてから概々算見積を出す。詳細見積を出す人の勇気…

pythonでサイト内の画像をダウンロードと画像圧縮

はじめに サイト内に取得する画像のリストをCSVで事前に用意しておく。 filename http://www.example.com/images/hoge600444hgea0a9dad15a.png http://www.example.com/images/hoge600a22222hoge30.png http://www.example.com/images/hoge6dsa33300a0ae7317…

django/pandasでCSVファイルを結合する

インストール django-pandasというパッケージもあるが普通にpandasをインストールして使う。 pip install pandas CSVファイルのサンプル 下記の2つのCSVファイルをfilenameをキーに結合する itemid itemname filename 4 商品1 hoge600444hgea0a9dad15a.png …

Windows環境でWSL2/UbuntuとDockerをインストールする

前回の続き - WindowsにWSLをインストールまでしたので、WindowsにLinuxをインストールしてみる px-wing.hatenablog.com 手順 Linuxディストリビューションをインストールします 上記記事のWSLをインストールした後、Window storeを開き、お気に入りのLinux…

Windows10 Homeに WSL 2 をインストールする

参考ページ docs.microsoft.com 手順 1 - Linux 用 Windows サブシステムを有効にする PSを管理者モードで立ち上げて dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestartを実行する PS C:\Windows\system32>…

DDD/TypeScriptの勉強

ユースケース図 DDD サンプルコード class Blog { static _id: number = 1; id: number | null; categoryId: number | null; title: string | null; text: string | null; postDate: Date | null; constructor(categoryId?: number, title?: string, text?: …

Dynamodbのテーブル作成とJavaScriptでデータ登録

はじめに aws cliを利用してDynamodbのテーブルを作成する 作成したテーブルに対してデータ登録する Dynamodb テーブル作成 ユーザーテーブルの作成用コマンド aws dynamodb create-table --table-name users --attribute-definitions AttributeName=uid,Att…

dockerでdynamodb環境を構築する

はじめに 下記のページを参考にdockerでdynamodbの環境を構築する docs.aws.amazon.com docker-compose.ymlの設定 下記のdocker-compose.yamlファイルを用意して,docker-compose buildを実行する version: "3.8" services: dynamodb-local: command: "-jar D…

prisma.jsで覚えたメモ

はじめに prisma.jsを触って覚えたことをまとめてみました。 www.prisma.io Viewテーブルをprisma.jsから利用する方法 下記のようなviewテーブルを作成した場合 create view productlist as select id, name from product; npx prisma introspectコマンドを…

約11ヶ月続けたブログ更新をやめるて、不定期更新にする

約11ヶ月毎日ブログを更新していた。 2020年4月30日から2021年3月30 日までブログを毎日更新していました。下記のついtwilogのログとなります。 ブログの更新をしていてよかった事 毎日、インプット・アウトプットする習慣化する事ができた。 フロント周りの…

vue-selectをnuxtjsに適用する

はじめに 下記のライブラリをインストールする github.com インストール npm install vue-select 設定 plugins/vue-select.jsファイルを作成する import Vue from "vue"; import vSelect from "vue-select"; Vue.component("v-select", vSelect); nuxt.confi…

strapiの管理画面の編集する方法

参考にしたページ strapi.io github.com github.com strapiの管理画面のレイアウトを変更するための準備 node_modules/strapi-admin/admin/src/内の中身をadmin/src内に移動する node_modules/strapi-plugin-content-manager/admin/src/内の中身をextensions…

expressでjsonwebtokenを利用する

インストール $ 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を使ってexpressを動かしてみる

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にvue-smooth-dndを適用する

はじめに 下記のドラック&ドロップのライブラリを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で作成してみる②

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

簡易版タスク管理機能をRedux Tool Kitで作成してみる①

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

express adminを動かしてみる

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

android/kotlinで位置情報を取得する

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

jsonからドキュメントを自動生成する

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

vercelでデプロイする方法

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

nuxtjs/typscriptでコンポーネントを作成する

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…

AndroidのTableLayout/LinearLayoutをインクルードする

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

android/kotlin TODOアプリ 実装

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

android/kotlin TODOアプリ レイアウト

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