2020-12-01から1ヶ月間の記事一覧
はじめに Laravel adminのadmin_usersテーブルにカラム追加と画面を変更する 手順 vendorフォルダにあるlaravel-adminのコントローラーを自身のappフォルダ内に移動させる。ファイル名は変更する。 $ cp ./vendor/encore/laravel-admin/src/Controllers/User…
はじめに 前回、TypescriptでReactコンポーネントを作成したので試しにグラフのコンポーネントを作成する 利用するライブラリ 下記のreact-chartjs-2を使ってみる github.com インストール 下記のコマンドを実行する yarn add react-chartjs-2 chart.js 折れ…
はじめに 前回発生したエラーを解消できたので、今回はTypeScriptでfunctional componentを作成してみる。 px-wing.hatenablog.com コード App.tsx 下記コードでTypeScriptを利用している箇所はReact.FCの部分のみです。 React.FC はReact.FunctionComponent…
はじめに 久しぶりにReactを触ろうとした時に、yarn startの時にエラーが発生したので、そのエラーの対処方法をまとめる reactのプロジェクトの作成 下記の手順でプロジェクトを作成して # npx create-react-app <my_app> --template typescript # cd <my_app> # yarn start </my_app></my_app>…
はじめに strapiのドキュメントに記載されている方法で管理画面のレイアウトを変更してみる。（うまくいきませんでした。） strapi.io デフォルトの画面 何も変更していない場合の画面は下記の状態になっている strapiの管理画面関連のファイルはApp_Root/no…
はじめに 前回、nuxtjs+vuetifyjs/vee-validateを調査しましたが、vuetifyjsを利用しない場合の実装方法が異なったので調査した内容を下記にまとめました。 px-wing.hatenablog.com コード plugins/vee-validate.jsファイルを作成して利用するルールやエラー…
はじめに strapiの独自実装しなくてもcurdのAPIは標準で準備されているので、controllerの実装も必要がなく開発できるが、機能としてあるので触ってみる。 手順 コントローラーを利用するための「customers」というコンテンツタイプを作成する 作成すると「a…
はじめに 前回、Flexboxを覚えたのでflexboxを利用したレスポンシブができないか試してみる。 px-wing.hatenablog.com コード ブラウザのサイズが800px以下の場合、flexboxを縦にして、800px以上の場合、横にするコードを作成してみました。 <html> <head> <style> .flex-conta</head></html>…
はじめに CSSのFlex boxを利用する機会があったので、覚えたものをメモしたことをまとめてみた。 サポートブラウザ 属性 Chrome IE Firefox Safari opera flex 29.021.0 -webkit- 11.010.0 -ms- 28.018.0 -moz- 9.06.1 -webkit- 17 Flex box 属性 プロパティ…
はじめに nuxtjsでファーストビューで途中までテキストを表示して、ユーザーがリンクまたはボタンをクリックしたら、全テキストを表示するサンプルを作成してみた。 コード Case1（テキスト） - components/Readmore.vueファイルを作成して下記のコードを記…
はじめに 最近、nuxtjsを触っているので、vuexを使ってみる px-wing.hatenablog.com px-wing.hatenablog.com storeの設定 store/auth.jsというファイルを作成して下記のように記述する export default { namespace: true, state: () => ({ loginAccount: '',…
はじめに nuxtjsでページ内リンクする方法を調べてみたところ２つ方法を見つけましたが、１回目の遷移は正しく動作しますが、２回目以降が動作しないことがわかりました。この２回目以降の対応方法が見つからず。 １つ目の方法 vue-routerの機能で実装する方…
はじめに 下記のサイトから利用するgoogle fontを選択する fonts.google.com 利用する情報は下記の赤枠の情報をnuxtjs内で設定します。 nuxtjsに設定する nuxt.config.jsファイルに下記の記述を追加する // Global page headers (https://go.nuxtjs.dev/conf…
はじめに 前回、vuetifyjsのインストールしたので、vuetifyjsで色々と設定を変更してみる。 px-wing.hatenablog.com 下記のページを参考に自分のローカル環境で試してみる vuetifyjs.com 設定 assets/variables.scssというファイルを作成して下記のコードを…
はじめに 下記のvuetifyjs css Frameworkをnextjsに適用する vuetifyjs.com インストールと設定 $ yarn add @nuxtjs/vuetify $ yarn add vee-validate nuxt.config.jpファイルに下記の記述を追加する buildModules: [ (省略) '@nuxtjs/vuetify' ], vuetifyjs…
はじめに 下記のブログを参考にckeditorに変更する strapi.io CKeditorをインストールする 下記のコマンドを実行する cd my-app yarn add @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic CKeditorには数種類のエディタの種類があるので、利用…
はじめに Laravelのメンテナンスモードがあることを知り検証してみる。 メンテンモードにする php artisan downコマンドを実行するだけでメンテナンスモードになる $ php artisan down Application is now in maintenance mode. メンテナンスモードの場合、5…
はじめに 前回、dockerでnuxtjs環境をdockerで作成したので、nuxtjsでstrapiを実行する px-wing.hatenablog.com strapi側では前回に住所情報を返すAPIを作成しているので、そちらのAPIを呼び出してみる。 px-wing.hatenablog.com モジュールのインストールと…
はじめに 昨日、作成した住所データに関連するテーブルを作成してリレーションの設定を行う px-wing.hatenablog.com リレーションの設定 content_typeでフィールドを追加する際に「Relation」という項目があるので、そちらを選択する リレーションの種類を選…
はじめに 前回、CSVインポートのプラグインをインストールして環境が破壊されたので手動でデータを登録してみた 郵便番号データ 下記のサイトから住所データをダウンロードしてデータベースに登録する www.post.japanpost.jp ダウンロードしたKEN_ALL.csvフ…
はじめに 大量のマスターデータをCSVを、strapiの管理画面からインポートする方法を探してみた。 CSVファイルインポート用プラグイン 下記のプラグインがあったので、試してみた github.com インストール手順 公式サイトによるとインストール手順は下記のよ…
はじめに native scriptというものを見つけたので、試しに触ってみる。しかもPlaygroundがあるのでブラウザで試すことができる。 play.nativescript.org Playgroundで実装したアプリは下記の２つをインストールして実機で検証することができました。 NativeS…
はじめに strapiの環境を構築したので、nuxtjs環境を構築してstrapiのAPIを実行する環境を構築する px-wing.hatenablog.com docker関連の設定 下記の設定はdocker-compose up -dで全てが起動される環境ではありません。nginxは自動起動します。 docker-compo…
DBのQueryログ出力 config/database.jsファイルに"debug": trueを指定することでQueryログを出力することができる。 module.exports = ({ env }) => ({ defaultConnection: 'default', connections: { default: { connector: 'bookshelf', settings: { clien…
はじめに 前回、strapiの環境をdockerで作成したので色々と触ってみる 前回、 quickstartコマンドを指定してプロジェクトを作成してしまいましたが、こちらの指定をするとDBの接続指定が行えないため、--quickstartオプションを指定せずにプロジェクトを作成…
はじめに 公式サイトに下記のdocker-compose.yamlのサンプルがあるのですが,strapiをamazon-linuxのイメージ上で動かしたいので、少し設定を変更してみた。 strapi.io strapiが動作する条件 nodejsの推奨バージョンは現時点で下記となっている。 ソフトウェ…
はじめに DockerでSeleniumの環境を作成したので、LravelDuskをインストールしてテストを実行してみる。 px-wing.hatenablog.com LaravelDusk パッケージ インストール Laravelのバージョンによってインストールできるバージョンが異なるため、公式サイトを…
はじめに Seleniumのgithubにdocker-seleniumと言うものがあったので、こちらの環境を設定して起動してみる。 github.com Selenium Gridとは Selenium Gridは、複数のマシンでテストを並行して簡単に実行できるようにする。スマートなプロキシサーバー。これ…
はじめに 前回、TwitterのAPIキーが発行されるのに数日かかることがわかり、首を長くしてまっていたら約1週間後に取得できた。 px-wing.hatenablog.com 実装に向けての課題 APIの制約を確認する developer.twitter.com ※1ページあたりに返されるツイートの数…
![はてなブックマーク - ようやくTwitterのAPIキーが発行されたので実装してみた[PHP]](https://b.hatena.ne.jp/entry/image/https://px-wing.hatenablog.com/entry/2020/12/03/081713)
始めに Vueで利用できるMarkDownEditorを調べる MarkDownEditor Star 約8K simplemde.com Star 約12K github.com Star 約4K github.com ExcelをMarkdownに変換するライブラリ starの数が少ないのしか見つかりませんでした。 github.com github.com 検証用の…
