こんにちは、オフィス狛 技術部のpinoです。 この度、初めてiOSアプリの開発に携わることができました。 まだまだ勉強中の身ですが、今回は「UIBarbuttonItemのtitleを変更する方法」について紹介したいと思います！ 方法 早速ですが、UIBarbuttonItemのtitle変更方法です。 private func setBarButtonItem() { // UIBarbuttonItemのactionを設定 let button = UIBarButtonItem(title: "タイトル", style: .plain, target: self, action: #selector(self.buttonTapped(_:))) } @objc func buttonTapped(_ sender: UIBarButtonItem) { // 変更後のタイトルを設

・フロント（Angular）にて、リンクを押下した後PDFを別タブで開く 1. リンクを押下後、APIを呼ぶ 2. API（Express）で、S3にあるPDFデータ（Blob）をレスポンスする 3. フロントにてAPIからのレスポンスを取得した後、別タブを開きPDFを表示する

オフィス狛 技術部のJoeです。 担当したプロジェクトで、S3上の画像ファイルをPDFファイルに変換する要件がありましたので、 変換方法を備忘も兼ねてご紹介しようと思います。 今回使用したライブライは２つです。 ※()は使用したバージョンです ・pdf-lib（1.11.1）：PDFファイルを編集するためのnpmパッケージ ・sharp（0.26.3）：画像ファイルを編集するためのnpmパッケージ １.S3上の画像ファイル読み込む S3から画像ファイルを読み込んで、bufferデータを取得します。 ここで問題になったのは、読み込んだ画像ファイルが意図せずに回転してしまったことです。 読み込んだ画像ファイルの回転情報を保持するために、sharpのライブラリを使用しました。 const aws = require('aws-sdk'); const sharp = require('sharp

オフィス狛 技術部のmmm（むー）です。 先日、業務でPDFのマージ作業が必要でしたので、その備忘録を残します。 マージ作業には、pdf-libというライブラリを使用しました。 pdf-libとは、PDFを作成・マージするためのnpmパッケージです。 今回はNode.jsで作業を行いましたが、ブラウザ側のJavaScriptでも使用することができます。また、PDFのマージだけではなく、実際にコードベースでPDFの作成もできるようです。 参考：https://www.npmjs.com/package/pdf-lib (公式) Nodeとnpmがインストールされていること。 1. pdf-libのインストール 使用したいプロジェクト配下に移動し、下記を実行します。 $ cd ~/<プロジェクトパス> $ npm install --save pdf-lib package.json に下記が

オフィス狛 技術部のHammarです。 先日「WindowsでDockerを利用してMySQLサーバーを立てる場合の注意点」でも投稿しましたが、WindowsはDockerをVirtualBox経由で起動させているため、Macで起動する場合とは違い、うまく動かない部分があります。 今回は、WindowsでDockerをつかってDynamoDBサーバーをたちあげる時の注意点を記載しようと思います。 ※今回DynamoDBはAWSのDynamoDB Localというツールを利用します。 前回投稿した時と同じようにDockerの起動にはdocker-compose.ymlを利用していきます。 docker-compose.ymlには以下のようにDynamoDBの接続設定を記載します。 ※今回DBの記述がメインとなるので、API、DB側の記述は割愛します。 version: '3' service

オフィス狛 技術部のHammarです。 最近はnode.jsを触る機会がまた多くなってきたのですが、あるプロジェクトでAPIはnode.js、DBはMysqlを使うことになったので、Dockerでそれらのローカル環境を作り開発することにしました。 そこでWindowsとDockerの絡みでハマりポイントがあったので、ご紹介したいと思います。 ※今回はDockerがWindows10環境にインストールされている前提で以下進めていきます。 まずDockerの起動にはdocker-compose.ymlを利用していきます。 そのdocker-compose.ymlには今回開発につかうAPIとDBの設定を下記のように記載します。 ※今回DBの記述がメインとなるので、API側の記述は割愛します。 version: '3' services: api: build:・・・ ・・・ db: image:

AWS Lambdaの関数コードでzipファイルをアップロードする。（DeprecationWarningの対応） オフィス狛 技術部のJoeです。 弊社のあるプロジェクトで、AWSのLambda関数でPOSTリクエストする機能があるのですが、 ある日、ログを確認すると以下のようなメッセージが出力されていました。 DeprecationWarning: You are using the post() function from 'botocore.vendored.requests'. This dependency was removed from Botocore and will be removed from Lambda after 2021/01/30. https://aws.amazon.com/blogs/developer/removing-the-vendored-

nodemonとはNode.jsベースのアプリケーションのコードの変更を監視し、変更があった際に自動でサーバーの再起動をしてくれるツールです。 参考：https://nodemon.io/ Nodeとnpmがインストールされていること 1. nodemonのインストール 使用したいプロジェクト配下に移動し、下記を実行します。 devDependencies オプションは開発環境でのみ使用するため、今回つけています。 $ cd ~/<プロジェクトパス> $ npm install nodemon --save-dev --save-dev オプションを使用してインストールすると、 package.json に下記のように追記されます。 devDependencies 配下のパッケージは本番環境で npm install --production コマンドを実行すると除外されます。 // pa

オフィス狛のyuckieee（ゆっきー）です。 最近Angularの環境構築をする機会があったのですが、その際以下の事象に悩まされました。 「ターミナルを起動するたびに"source ~/.bash_profile"を実行しないとパスが通らない!!!」 最初は毎回コマンド叩いてたのですが、煩わしくなって調べたら簡単な話でした...。 そこで本事象の原因や対処方法について軽くまとめておきます。 事象の原因 MacOS Cataliaからデフォルトログインシェルが「bash」から「zsh」に変更された事で、設定対象と読み込み対象のシェルが食い違っていることで本事象が発生していました。 もう少し細かく説明すると、環境構築方法を説明した多くの記事はbash（.bash_profile等）にパス設定する手順が書かれています。 ですが、MacOS Catalinaからはデフォルトのログインシェルが変更

オフィス狛 技術部のJoeです。 最近担当したプロジェクトで、開発用に用意した複数のAmazon WorkSpaces（Windows）から、外部の開発用VPNへ接続する必要があったのですが、 VPNに接続可能なIPアドレスが１つという制限がありましたので、EC2でプロキシサーバーを構築することにしました。 AWSであれば、NAT（インスタンス、ゲートウェイ）でも実現可能ですが、 今回の開発環境では、一部ネットワークの接続制限がありましたので、プロキシサーバーを選択しました。 最低限の設定にはなりますが、手順をご紹介します。 ※VPC、サブネット等は、事前に作成されている前提です 1．EC2インスタンス作成（Linux） プロキシサーバー用のEC2インスタンス（Linux）を作成します。 細かい手順は省略させていただきますが、注意点としては以下のようになります。 ・インスタンスタイプは最小

facebook オフィス狛 技術部のmmm（むー）です。 nodenvを使用してローカル環境のプロジェクトごとにnode.jsのバージョンを切り替える方法を説明します。 もちろん全てのプロジェクトで最新のバージョンを使用するべきですが、難しい時もありますよね...¯\_(ツ)_/¯ MacOS Mojava バージョン 10.14.6 1. anyenvのインストール anyenvをインストールします。 （anyenvとは、ローカル環境で言語ごとに複数のバージョンを使用するためのツールです。node.jsだけでなく、pythonやPHPにも使用できます🍭） ➜ 😶git clone https://github.com/riywo/anyenv ~/.anyenv パスを通す ➜ 😶echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/

facebook オフィス狛 技術部のHammarです。 AWSのCloudWatchはいろいろな統計やデータ解析にも非常に役立つので、AWS環境で開発されている方は頻繁に見る機会があると思いますが、基本的にはグラフを見ながら、この時間にCPU使用率が～とか、ネットワーク数が～と見たりすると思います。 ただ、グラフではなく、この期間のこのCPU使用率の「平均値」とか、ネットワーク入力数の「合計」とか見たい場合があり、それらの情報もCloudWatchで確認することができたので、備忘録として記載したいと思います。 ある期間のEC2のCPU使用率の平均値を知りたい場合 ①CloudWatchメニューの「メトリクス」を選択

facebook オフィス狛 技術部のJoeです。 前回、moment.jsを記事にしたのですが、一部機能しか紹介できなかったので、便利だなと思った機能を追加でご紹介します。 日付時刻の比較、差分、タイムゾーンの変換は、前回の記事を参照ください。 node.jsでの日付時刻処理（moment.jsを使ってみる） ※下記の例は、moment.jsのバージョン「2.22.2」で取得した結果になります。 バージョンにより、メソッド名やオブジェクト名などが異なる場合がありますので、ご注意ください。 公式ドキュメント 【フォーマット（format）】 // フォーマットを指定 console.log(moment('2019-08-28 01:05:07').format('YYYY年MM月DD日(ddd) HH時mm分ss秒')); // 2019年08月28日(Wed) 01時05分07秒 //

facebook オフィス狛 技術部のJoeです。 node.js（JavaScript）では日付時刻の扱いが難しく、特に文字列の時刻などを比較や計算するときはいつも調べているので、備忘録を兼ねてブログに書いておこうと思います。 また、日付時刻操作ではmoment.jsという便利なライブラリがあるので、同じ処理をmoment.jsでも書いてみます。 ①　時刻（文字列）の比較と差分 【ライブラリを使用しない場合】 // Dateオブジェクトを生成 const dateTime1 = new Date('2019-08-01 09:00'); const dateTime2 = new Date('2019-08-01 14:00'); // 大小確認 if (dateTime1 < dateTime2) { 処理; } // 一致確認の場合は「getTime()」でミリ秒形式に変換する if

facebook オフィス狛 技術部のKoma（Twitterアカウントの中の人＆CEO）です。 今回はAngularの軽い小ネタを紹介します。 テンプレート（html）内のclass属性を動的に変えたい、という事はよくあると思います。 特に、入力項目にエラーがあった場合のエラーメッセージ、などがそうですね。 （１）ngIfを使った方法 まずは、ngIfを使った方法から。 <div *ngIf="loginIdInvalid; else loginIdValidBlock" class="form-label alert alert-danger"> 使用出来ないログインIDです。 </div> <ng-template #loginIdValidBlock> <div class="form-label correct correct-info"> 使用可能なログインIDです。 </di

AngularのdetectChanges()で「ViewDestroyedError: Attempt to use a destroyed」が発生した時の対応方法。 facebook オフィス狛 技術部のKoma（Twitterアカウントの中の人＆CEO）です。 私の担当がいつの間にかAngular専任になっていますが・・・・今回もやっぱりAngularネタです。 Angularで、NgRxなどでAPIから値を取得した場合、そのままView（template・html）側にデータを流し込んであげれば、取得したデータは問題なく表示されます。 ところが、component（TypeScript）側で取得したデータをstore.selectで取得すると、View（template・html）側に表示データが反映されない場合があります。 うーん、言葉だけで説明するのが難しい。 この辺はいつかN

facebook オフィス狛 技術部のHammarです。 皆さんNode.jsとRDBを使って開発をされるときに、クエリビルダは何をお使いでしょうか？ 以前にもブログで何度か書きましたが、弊社の一部プロジェクトではknex.jsというクエリビルダを使っています。 結構クセのある書き方ではじめは手こずりましたが、やはり人間慣れは重要で、今では意外と使いやすいなと思う部分も結構あります。 幅広いDBの種類に対応しているので、DBの種類によってインストールするモジュールを変える必要はなく、これ１つで同じ書き方ができるのでお勧めです。 ただあまり日本語の解説記事がないので、SQLの特殊な書き方をするときにどう書けばいいかわからなくて、ちょっとだけハマった事象について、自分への備忘録も兼ねて書こうと思います。 ■基本的なSQL 例えば出身地、名前、年齢が登録されているテーブルがあったとして、下記のよ

facebook オフィス狛 技術部のKoma（Twitterアカウントの中の人＆CEO）です。 令和最初のブログはAngularです。 今回は、普段は意識しないけど、「そう言えばどうやるんだ？」的な小ネタです。 Angularでは、親コンポーネントから子コンポートに値を渡す時は「@Input()」を使用します。 イメージ的には変数経由で値を渡す、と言う感じですかね。 逆に子コンポーネントから親コンポートに値を渡す時は「@Output()」を使用します。 こちらは、メソッドに経由で値を渡す、と言う感じです。 この「@Output()」ですが、簡単な使い方として、 親コンポーネント側（hoge-parent.component.ts）で、以下のように記載します。 分かりやすくする為にView（html）はファイルを分けています。（hoge-parent.component.html） [ho

facebook オフィス狛 技術部のKoma（Twitterアカウントの中の人＆CEO）です。 平成最後の投稿です。 弊社では「Node.js + Express」でAPIを作成する事が多々あるのですが、 その際、アクセスログは別レイヤーで出力して、リクエストログは各業務処理内で出力しています。 今回、それを共通化してまとめたいと思います。 各バージョンは以下の通りです。 node 10.13.0 log4js 3.0.6 ※それぞれ、ちょっと前のバージョンになるので、参考にされる方はご注意下さい。 log4js のインストール まずは log4js のインストールです npm install log4js Configファイルの作成 ログの出力レベルなどの設定関連は、別ファイルにしたいので、 「[プロジェクトルート]/src/config」に「log4js.config.json」ファ

Angular angular.json の scripts は記載する順番が大事、と言う話（bootstrap、popper） facebook オフィス狛 技術部のKoma（Twitterアカウントの中の人＆CEO）です。 Angular の angular.json には、外部のJavaScriptの読み込む為に、「scripts」と言う項目が存在しますが、そこに記載する際は、順番が大事だよ、と言う話です。 まあ、Angularに限った事じゃ無いのですが、毎回ハマるので、備忘録で記載します。 とある新規プロジェクトで、デザイナーが作ったhtmlをせっせとAngularプロジェクトに移植していたのですが、ポップアップ系の表示がエラーになってしまいました。 zone.js:192 Uncaught TypeError: Bootstrap dropdown require Popper.