WEBエンジニアの技術メモと日々

昔のバージョンのphp環境でphpバージョンを上げるという対応中。 apache + PHP8のインスタンスを構築してドキュメントルートまで到達を確認。 対応する人にドキュメントルートまで到達するからプロジェクトのファイルを置いてバージョンアップのエラーを確認してもらうため依頼しましたが HTTP 503 Service Unavailable のエラーが出ているとのこと。 HTMLファイルはアクセスできているからPHPの実行ができていないと思い調べると Apache HTTP サーバーで使用するために PHP に提供されている mod_php モジュールが非推奨になりました。 php-fpmをインストールして起動し、リクエストを流してphp-fmpでphpを実行するようにして解決。 しばらくPHPを触っていなかったのでモジュールが非推奨になったことに気づかずでした。

2020年度から小学校でプログラミングの学習が必修となっているらしい。 自身もIT業界で働くエンジニアであり、私自身も今年子供が生まれたこともあり どうやって教えたらいいんだろう？ と疑問に思ったりもする。 そもそもプログラミングってなんだろう？ 自身がエンジニアをやっていると、言語や環境などが先に立って この言語やったことある？ どんなアーキテクトなの？ そんな会話が先だってしまう。 ふと プログラミングってなんだろう？？ そんなことを思ってしまった。 まぁネットで調べるのだが 機械への命令を組み立てる あー、これだけでいいんだよなプログラミングって 子供に教えようと思い立ち初心に帰る私であった。

最近はserverlessを使っている（正確にはレビューしてデプロイくらいですけど）んですが、デプロイ方法が各自のローカルの状態という現状やばめな状態 Readmeを見ると大体各自の環境に依存しているものがあってうまくいかない 例えば serverless deploy --stage dev これAWSのprofileのデフォルト実行なのでデフォルトをわざと設定していない私には実行できません。 そんなの解れよとも思いますがReadmeに記載しているものをコピペで（変更する箇所は明記する）実行したい私 serverless deploy --aws-profile [profile] --stage dev って書いといてよと思う私でした。 てか個人環境からデプロイやめたい…

前回 Fire HDをandroidの実機確認に使用するかと開発者モードをONにしてUSBデバッグなど設定したわけですが、最後に記載していた カメラが起動するのに読み取りがスキャン状態から反応せず が問題でした。。 前回もこのダイアログは出ていたのですが、Fire HDの問題というかAndroidアプリの実機確認をする限界なのか そもそもFire HDにはGoogle Play Storeなど通常のAndroid端末に入っているアプリが入っていないためGoogle Play 開発者サービスも入っていないのでしょう。 おそらくflutterのプラグインがGoogle Play 開発者サービスを使ってAPIを利用しようとするけど使えないんでしょうね。 APKでGoogle Play Storeをインストールするやり方もあるみたいですが素直にフリマでandroidデバイスを買うことにしました。。 安価でアプリ開発できるとよかったんですが余計なお金を使ってしまうことに。。

flutterでアプリを作成していて、バーコードの読み取りを実装したいのですがエミュレータだとPCのカメラ利用してどうしてもバーコードに合わせづらいなどありました。 手持ちはFire HDしかないのでこれがデバッグ端末として利用できるのか試してみます。 所有デバイスはFire HD 8 です 検索すると以下がありました。 https://developer.amazon.com/ja/docs/fire-tablets/connecting-adb-to-device.html とりあえず 手順1： 開発者オプションを有効にする ・開発者オプションを有効にする ・USBデバッグをオンにする はすでに実施済み 手順2： Kindle Fireドライバーをインストールする（Windowsのみ） はmacなのでスルー 手順3： Android Studioをインストールする すでにアプリ開発はAndroid Studioで作り始めているのでスルー 手順4： USBケーブルを使用してFireデバイスをコンピューターに接続する はじめデータ転送のケーブルだったのか反応せず GoProに付属していたケーブルでやったら反応しました [メディアデバイスとして接続されています] ・・・ このくだりは表示されず [USBデバッグを許可しますか？] が表示されていたので許可をするとAndroid Studioのデバイス一覧に KFRAWI(mobile) が表示されました しかしデバイスを選択してRUNを実行するとアプリのインストールがいつまでたってもできませんでした。。 そこでさっきの[メディアデバイスとして接続されています]のくだりの後半が必要で （よく読みなさいって話ですが。。） 設定⇨端末オプション⇨開発者オプション⇨デフォルトのUSB設定 ここでファイル転送を選択します そうすると無事にRUNが完了してアプリがインストールできました！ ただバーコードの読み取りはカメラが起動するのに読み取りがスキャン状態から反応せず確認しなければならないことがありそうです。 今日はここまで！

前回はfirebase_analyticsをインストールして、作成したflutterのプロジェクトからanalytics.logEventでfirebaseコンソールに実際にイベントが取れてアプリにfirebaseが組み込まれているか確認ができました。 今回は認証を組み込みたいと思います。 まずはfirebaseのコンソールで Authentication Sign-in methodでメール・パスワードを有効にします。 UIは簡単に実装したいのでfirebase_ui_authをインストールしてしまいます。 flutter pub add firebase_ui_auth 基本は以下のExampleを参考にしていますが、作りたいものに合わせて少し変更しています。 https://pub.dev/packages/firebase_ui_auth lib/main.dartを以下に変更しました。 ※importは省略しています。 class MyApp extends StatelessWidget {　Widget build内を以下に return MaterialApp ( initialRoute: FirebaseAuth. instance . currentUser == null ? '/sign-in' : '/profile' , routes: { '/sign-in' : (BuildContext context) => SignIn () , '/profile' : (BuildContext context) => Profile () , } , ) ; lib/sign-in.dart　lib/profile.dart　を作成しました。 class SignIn extends StatelessWidget { const SignIn({ super .key}) ; @override Widget build (BuildContext context) { return MaterialApp ( home: Scaffold ( appBar: AppBar (tit...

前回はFlutterのプロジェクトとFirebaseのプロジェクトとの紐付けまでやってみました。 今回はAuthenticationを利用する準備ができたらいいかなと思っております。 まずは手順にあるanalyticsでfirebaseのdashboardにイベントが上がってきてfirebaseが組み込めているのかの確認からしていきたいと思います。 Firebaseを確認すると、作成したプロジェクトのプロジェクトの設定でマイアプリのセクションでiOSやAndroidのアプリを選択した時に【SDK の設定と構成】と表示されていると思います。 android : google-services.json iOS : GoogleService-Info.plist このファイルは前回の手順でFlutterのプロジェクトに作成されているようでした。 ここで気づいたんですが、firebaseのプロジェクトを選択すると表示可能なアプリがあってその右横に+ボタンがあると思うんですが、これを押した時にflutterが出てくるので Flutter アプリに Firebase を追加するを実行してあとは flutter pub add firebase_authなどで使いたいプラグインをインストールすればいいみたいです。android/iOS共に【SDK の設定と構成】の内容を実施しないといけないのかと思っていたのですが違いました。 ということで flutter pub add firebase_analytics flutter pub get を実行してlib/main.dartに以下を追記 import 'package:firebase_analytics/firebase_analytics.dart'; await Firebase.initializeApp(   options: DefaultFirebaseOptions.currentPlatform, ); FirebaseAnalytics analytics = FirebaseAnalytics.instance; analytics.logEvent(name: "test", parameters: <String, dynamic>{"str...

今回アプリを作って公開と運用をしてみようかとFlutterで作成することに 前提： アプリ開発未経験 バックエンドエンジニア 環境はMacです Firebaseは登録済み Flutterの開発環境はVisual Studio Codeを使っていましたがAndroid Studioの方が好きなのでAndroid Studioで開発していきたいと思います。 Flutter自体のインストールは https://docs.flutter.dev/get-started/install/macos こちらを参考にして行いました。 特別ここではまったことはないので細かい作業は割愛します。 今回作成するアプリは、アカウント管理が必要です。 バックエンドエンジニアをしているとサーバを立ててAPI/DBで認証を作りたくなりますがここは考えを改めて… FirebaseのAuthenticationを使ってみようかと思います。 大体flutter firebase authenticationで検索すると認証の実装からになりますが、そもそもFlutterのプロジェクトとFirebaseのプロジェクトがどう紐づけていいのかが出てこず、初心者には？になりました。（flutter firebaseだけで調べると出てくるんですけどね） 一応公式のリンクを貼っておきます。 https://firebase.google.com/docs/flutter/setup?hl=ja&platform=ios 今回はすでに作成したflutterのプロジェクトがあり、そのプロジェクトで使おうとして作成したFirebaseのプロジェクトもありました。 なのでドキュメントのFirebase CLIを使えるようにしたら flutterfire configure --project={project ID} を実行しました。 そうすると{flutter project}/lib/firebase_options.dartが作成されます。 次にコアプラグインをインストールして、Firebaseの構成が最新であることを確認 flutter pub add firebase_core flutterfire configure {flutter project}/lib/main.dart にプラグインと構成を...

curlを使ってElasticsearchのクエリを実行したら以下のエラー {   "error" : "Content-Type header [application/x-www-form-urlencoded] is not supported",   "status" : 406 } application/x-www-form-urlencoded　はサポートされていないとのことなので ヘッダを指定して実行することに。 curl -XGET https://xxxxxxxxxx/xxxxx/_search/?pretty -H "Content-Type: application/json" -d '{"size": 1}' これで取得できるようになりました。

表題の通りで同一PCで2つのGitHubアカウントのSSHをする場合に調べた結果を記載します。 まず前提としては、Githubアカウントは個人で１つ 例えば、すでに個人で色々なリポジトリを持っていて、案件にて組織のメールアドレスでアカウントを作成した場合に、本来はすでに持っている個人のアカウントを組織に紐付けることが正しいみたいです。 こちらが大変わかりやす記載されていました。 全社的に会社用GitHubアカウントを廃止した件 今回、個人のアカウントを組織の方に紐付けてもよかったのですが、組織のリポジトリのメール通知などを受け取るとメールの管理が個人または組織のアカウントになってしまうのもいやで、組織用の個人アカウントを作ってしまいました。 名前もわかりやすいものに変えてくれとかあってちょっと抵抗があるんですよね。。 ここら辺が解決する手段がわからなかったので、方法がわかったら元々のアカウントにしたいと思います。 なのでGitHub推奨ではないことをしています。 本題です。 解決した方法は~/.ssh/config Host github.com     HostName github.com     User git     Port 22     IdentityFile ~/.ssh/id_ed25519     TCPKeepAlive yes     TCPKeepAlive yes Host github.com.sub     HostName github.com     User git     Port 22     IdentityFile ~/.ssh/github_sub_ed25519     TCPKeepAlive yes     TCPKeepAlive yes github.comで~/.ssh/id_ed25519を使用する設定と、もう一つはgithub.com.subとして~/.ssh/github_sub_ed25519を使用する設定をしてリポジトリの.git/configのrem...

転職して１週間ですが、一応おすすめの環境などを設定してみたところです。 しかしながらSequel ProでDBへローカルからの接続ができません。 環境的には、インスタンスへSSMを利用して接続している感じで、そのインスタンスからはMySQLへの接続はできています。 なのでSequel Proではそのインスタンスを介してMySQLの接続をする感じなのですがうまくいきませんでした。 結論は awsコマンドが利用できないから でした。 Host forward-instance     HostName i-************     User [your.profile]     Port **     IdentityFile ~/.ssh/id_rsa     ProxyCommand sh -c "aws ssm start-session --target %h --profile [your.profile] --document-name AWS-StartSSHSession --parameters 'portNumber=%p'" なのでSequel ProではSSHの設定でMySQLの情報を記載し、フォワードするインスタンスの情報（~/.ssh/configに記載しているのでホスト名だけ）を記載しています。 すると以下の表示がされます 詳細を表示を見ると、以下の記載があるのでawsのコマンドが使えないことがわかります。 なのでProxyCommandを以下のように変更しました。 ProxyCommand sh -c "PATH=$PATH:/opt/homebrew/bin && aws ssm start-session --target %h --profile [your.profile] --document-name AWS-StartSSHSession --parameters 'portNumber=%p'" PATH=$PATH:/opt/homebrew/bin については、私はhomebrewでaws cliをインストールしているからで、awsコマンドが利用できるようにそれぞ...

前職ではintelliJを利用していましたが転職してVSCodeを利用しているよう。 基本自動保存に慣れていたのですが、週明けにメモ的に保存していたファイルを開くと。。。 真っ白 まずは自動保存ですかね。 VSCodeのPreferences->settingsで検索して、検索窓にautoと入れると auto save の項目が出てくると思います。 こちらのサイトを参考 にしました。 私はafterDelayで別途指定したミリ秒(default 1,000ミリ秒)で保存されるように設定 1秒もいらないかと思ったので2,000ミリ秒に変更しました。 設定項目名は Auto Save Delay 真っ白になったファイルに何か文字を記載 そうするとタブの未保存のポッチが指定秒数で消えるようになりました。 あー私の入社してから１週間のメモが、、、

Vue.jsをはじめて勉強中です。 前回 はVue定義のオプションでfiltersについて触った感じです。 今回はcomputedに触れていきサンプルコードと説明をもとにまた記事にしていきたいと思います。 ちなみに参考にする購入した書籍は こちら 。 computedというオプションはデータを処理して表示するなどをするときに使う。 例えば、 var items = [   {     name: '商品１',     price: 300,     quantity: 1   },   {     name: '商品２',     price: 400,     quantity: 2   } ] var vm = new Vue({   el: '#app',   data: {     items: items   },   filters: {     numberWithDelimiter: function (value) {       if (!value) {         return '0'       }       return value.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1,')     }   },   computed: { // 算出プロパティ     totalPrice: function () {       return this.items.reduce(function (sum, item) {         return sum + (item.price * item.quantity)       }, 0)   ...

Vue.jsをはじめて勉強中です。 前回 はVue定義のオプションでel/dataについて触った感じです。 今回はサンプルコードと説明をもとにまた進めていきます。 購入した書籍は こちら 。 filterというオプション これはdataオブジェクトに対して処理したい場合に記述します。 例えばdataに対して、金額表示を３桁のカンマで区切りたい時などです。 jsfiddle.netで実行しました。 （パイプで繋げて利用するところがsmartyを使っていたときの自前関数見たいな使い方だなと感じました。古くてすみません。。） <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <div id="app">   <p>表示金額: {{ price | numberWithDelimiter }}円</p> </div> var vm = new Vue({   el: '#app',   data: {     price: 1000000   },   filters: {     numberWithDelimiter: function (value) {       if (!value) {         return '0'       }       return value.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1,')     }   } }) window.vm = vm dataのpriceに対して処理をする場合にパイプ(|)で繋げてフィルター名を書いてあげると、関数のパイプの左側を引数として処理するということみたいです。 正規表現の部分は数字３回の繰り返しで、マッチした数字３回分とカンマで繋げていって文字列を返すというもの。 ちなみにfiltersは連結して複数適用できる。 value |...

Vue.jsをはじめて勉強中です。 前回 はVueが定義されるところを理解しました。 今回はサンプルコードと説明をもとにまた進めていきます。 購入した書籍は こちら 。 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <div id="app"> <p>{{message}}</p> </div> <script>   new Vue({      el: '#app',      data: {           message: 'こんにちは！'     }   }) </script> Vueを定義する際にオプションが指定できて、上のコードだとel/dataがオプション指定されています。 elプロパティは、DOM要素のオブジェクトかCSSセレクタの文字列が使える #app の要素をマウントしてその要素と子要素を置き換える DOM要素のオブジェクトの場合はこんな感じで確認できました。 el: document.getElementById('app') マウントはメソッドによるマウントもできる new Vue({...}).$mount('cssセレクタ/DOM要素オブジェクト') インスタンス生成後の任意のタイミングでマウント実行できる dataプロパティはUIの状態になりリアクティブシステムにのります。 例えば同じコードでjsfiddle.netで、jsfiddle.netのconsoleから vm.message='hello!' と入力して実行すると画面はhello!に変わります。 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <div id="app"> <p>{{message}}</p> </div...

Vue.jsをはじめて2日目　前回はこちら（ Vue.jsをはじめてみます① ） いよいよ手を動かしていく感じです。 Vue.jsを使うには <script src="https://unpkg.com/vue@2.5.17"></script> 書籍ではバージョンを指定していますが、Vue.jsのドキュメントでは <!-- 開発バージョン、便利なコンソールの警告が含まれています --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> となっています。どちらもCDNでライブラリ配信みたいですね。 書籍にはバージョン指定しているけど、独自に取得したファイルを用いても差し支えないという記載があるのでVueのドキュメントに記載の通りにしてみます。 こちらをscriptタグで読み込むことにより、グローバル変数のVueが定義されるようです。 <script>     console.assert(typeof Vue !== 'undefined'); </script> console.assert は検証でVueが定義されているかを確認し、定義されていたら何もしないというもののようです。 jsfiddle.netで実行したところ 真っ白で何も起きていない⇨Vueが定義されているようです。

私この度転職をするのですが、転職先がどうやらほぼ私が触ったことのないVue.jsを使っているようで、（他触れたことがないAWSのサービスとか）入社前にちょっと経験しておこうかなと思いさわり始めました。 取り急ぎ書籍を購入 購入した書籍は以下になります。   Vue.js入門 基礎から実践アプリケーション開発まで (amazonへリンク) とりあえず１章を読みましたが、多少WEBに関する知識がある方がよい本だと思いました。 １章はWEBの歴史からVue.jsに触れるまで(お決まりhello world!) 最近は環境作らなくてもお気軽にブラウザで試せるのもいいですね。 そもそもテキスト表示だけならHTMLファイルでブラウザ表示でいいですし。 https://jsfiddle.net/ 簡単にコードを実行できるこちらで進められそうです。 早速 <div id="app"></div> にVueで#appをマウントして hello world! を表示するところまで出来ました。 明日も進めていこうと思います。

前回 は、公式コンテナからの構築を諦めてmac OSでsailコマンドを使えるようにしてLaravelで用意されていたdocker コンテナの利用することにして、sailのエイリアスまで作成したところです。 今回は認証を再度チャレンジ ドキュメントの認証 のところをすすめてみるだけです。 マイグレーションを実行します。 sail php artisan migrate スターターキットをインストールします。 sail composer require laravel/breeze --dev php artisan breeze:install sail npm install && sail npm run dev これでログインページなど認証関連のページが表示されるようになりました。 アカウントの登録を行うとDBのusersテーブルへの登録と共にログイン後の画面が表示されることを確認しました。 cssなどのファイルは http://0.0.0.0:5173/resources/css/app.css になっており、公式のdockerイメージphp8/mysql8で自分で構築した時は、localhost:5173になっていたので、フロントのホストの設定か何かをする必要があるのかなと思いました。

前回 までは、dockerのphp8の公式イメージとmysql8の公式イメージでLaravelの認証を実装しようとしていましたが、CSS・JSが参照できていないらしくレイアウト崩れが起き、ちょっとわからなかったので、ローカルにLaravelのSailを利用してdockerを始めてみることにしまた。。 macにはcomposerをインストールしていなかったのでそこから始めました。 composerについては 公式 からインストール手順でインストールしました。 次にLaravelの ドキュメント の通り curl -s "https://laravel.build/example-app" | bash cd example-app ./vendor/bin/sail up これでアクセスの確認までできました。 sailをエイリアスにするために alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail' 開発するときはバックグラウンドで実行したいので sail up -d コンテナの停止は sail stop ここから認証を再開します。

前回 は、データベースのコンテナを作成しましたがLaravel9でmigration時にエラーが出て止まったところでした。 今回はこれを解消したいと思います。 原因は私の場合は、公式のphp8のイメージでLaravelをインストールして利用していたためだと思います。おかげで色々解りました。。 phpのpdo_mysqlが有効になっていないためだったのですが、有効にするのもphp.iniでextensionを追加すればいいのかと思っていたらそうではなく（それでもいいと思うんですがファイルの命名規則とか考えると）、コマンド実行でconf.dディレクトリにiniを追加して有効にしてくれました。 docker-php-ext-install pdo_mysql こちらのコマンドでiniが追加されてpdo_mysqlが有効になるので、 php artisan migrate こちらで作成したデータベースに無事にテーブルが作成されていました。 docker-php-ext-installはphpの拡張モジュールをインストールするコマンドみたいですね。 さてちょっと続きをやっていますが、画面は表示されるんですがどうもCSS/JSが読み込まれず パスワード忘れはこんな画面になっているんですよね。。 css/jsの参照がうまくいっていないのか…。 ちょっとどはまり中です。。 一旦、sailで構築に切り替えて早く触れて学習できることをメイン考えようかな。。