はてなブックマーク

こんにちは。インフラぼっちです。 開発メンバーと色々お話していると、 あらゆるコマンドや便利なものをまったく知らない状況なので、 現在メンバーに技術のシェアなどをしています。 ■tmux(ティーマックス)とはなんなのか サーバに入ると突然ssh切れたりセッションし直すのは めんどくさいと思う人多いと思います。(特にインフラやってる人) iTerms2でペインを分割(⌘ + d)でできますが、 また踏み台からsshログインするのもめんどくさい。 これを解決するのがtmuxです。 もともとscreenで同じようなことができるのですが、 比べるとtmuxのほうがサーバのメモリー等負荷がなく、サーバに優しいのです。 以下が概要となります。 端末多重化ソフトウェアで、1つのターミナルで操作しているシェルから実行したtmux上で複数の仮想端末を操作できるため、 ターミナルを複数開くことなく複数のサーバ

こんにちは、ゴーリスト開発の飯尾です 最近AWSからこんなお知らせが来てなんじゃいと思いましたが どうやらとあるインスタンスがもうすぐ死んでしまうらしい このあたり見るにつけ docs.aws.amazon.com qiita.com ルートデバイスタイプがEBSなので、いったんインスタンス停止して開始したらOK〜 はい よく考えたらルートデバイスタイプって何？なんで再起動したらOKなの？ EC2インスタンス日々使っているくせに どういう仕組みで動いてるのかはぜんぜん知らなかったので調べてみました そもそもEC2ってなんだ EC2ってなんだ 仮想のサーバーをゾンアマさんから借りれるしくみだよ インスタンスってなんだ 借りた仮想のマシンだよ ホストコンピュータの一部分を一つのマシンとして扱うよ ここではホストコンピュータ君の一部に肉体の型と魂を与えて一つのマシンとみなすよ リージョンってなん

おはようございます。バンナイです。 Angularでenvironmentsの中身をいじって環境毎に変数の中身を設定したいです。 動機 今度新しく作るステージング環境で呼び出すAPIを既にある本番環境で呼び出すAPIとは別にしたい。 デプロイしたい環境に応じてAPIのURLを手作業で書き換えることもできる。 しかし、environmentsの中身をいじればビルドをする際のコマンドを変えるだけでそれが実現できると先輩から教えてもらったのでそれを試してみます。 作業 environments配下にファイルを作成、編集 src/environments 配下に environment.staging.tsを作成。中身は export const environment = { production: false, apiUrl:"staging環境でのurl" }; environment.de

こんにちは🍣 ゴーリスト開発の飯尾です Angular4.3以下から5にアップデートするとき Httpクライアントモジュールは @angular/http が非推奨になったので @angular/common/http を使うように変更しました どんなかんじに書き換えたのかまとめてみました Before import { Injectable } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import { Http, Headers, Response, RequestOptions } from '@angular/http'; import { MyResponse } from '../entity/my-response'; @Injectable() export class Requ

こんにちは、ゴーリスト開発の飯尾です。 みなさんも大好きなAngular、ほんの一週間ほど前にバージョン5が出ましたね。 blog.angular.io というわけで 羽のように軽い気持ちで Angular4で作ったアプリを5に上げたら 一体どうなるのか！？ 試してみます 互換性の確認 angular/CHANGELOG.md at master · angular/angular · GitHub BREAKING CHANGES をチェケです 関係ありそうなのはこのあたりでしょうか… Angular now requires TypeScript 2.4.x. @angular/platform-server now additionally depends on @angular/platform-browser-dynamic as a peer dependency. ncu で

こんにちは。 最近タイピング時に小指が痛い渡部です。 今日はアプリ開発時によく使うUITextFieldのキーボード操作に便利なTipsについて書きます。 結構面倒な実装だし、ググると色々なパターンがあって悩んでしまう人もいると思うので 個人的に一番簡単だと思う実装方法を紹介しようと思います。 多分最も使うであろう機能 1.ボタン押下でキーボードを閉じる 2.ボタン押下で次のUITextFieldに移動する 3.画面タップでキーボードを閉じる 4.入力欄にかぶらないように画面をひょいっと動かす を順に書いて行きます。 1.ボタン押下でキーボードを閉じる まずはSingle Applicationでプロジェクトを作成し、UITextFieldを設置します。 まずここでビルドするとUITextFieldをタップするだけでキーボードが表示されます。 (背景をlightgrayにしてます) しかし

こんちは。渡部です。 今回はCocoaPodsについて書きます。 ライブラリを使う際にGitHubからダウンロードして プロジェクトにファイルを追加してる絶滅寸前の方達に参考にしていただければと思います。 CocoaPodsってなによ？ iOSやMac向けアプリで使用するライブラリを管理してくれるものです。 GitHubからzipをダウンロードして、プロジェクトに追加するのもありだけど 更新があった際に面倒っす。 CocoaPodsならコマンドで一発で更新できる。 つまり管理が楽。 どうやって使うのよ？ インストールします。 Rubyが入ってること前提ですがMacならデフォルトで入ってるはずです。 Windowsユーザは帰れ。 1.ruby gemを最新にする ターミナルを起動して以下を入力していきます。 sudo gem update —system 2.インストール sudo gem

こんちは。渡部です。 現在社内アプリを（勝手に）作っています。 そこでファイル出力させようとしたんですが Objective-CではよくやってたんですがSwiftになってからは初めてだったんで まとめてみました。 今回は任意のタイミングでテキストファイルやPDFファイルを作成する方法です。 アプリ内に保存した後、そのファイルの確認方法もついでに載せときます。 準備 文字列をテキストファイルに出力する方法 表示中の画面をPDFファイルに出力する方法 アプリ内に保存したファイルを確認する方法 まとめ 準備 まずは適当なプロジェクトのViewControllerに弊社サービスを牛耳る（三回目）ふろぐんのimageViewを貼り付けます。 ついでにUILabelも。 準備はこれだけです。 このあとはコーディングです。 文字列をテキストファイルに出力する方法 適当な文字列をテキストファイルに出力しま

初めまして！ ゴーリストに最近入社した、アメリカ生まれのヨルダン人です！Tinker（ティンカー）と呼びたい人は是非！ プロとしてのエンジニア歴が4年で、日本や海外の様々な会社で働いてきました。そして、望んでいたものが見つかり、ゴーリストに入社しました。 周りのエンジニアと会話し、学び、成長し、やりたいことをチャレンジ出来る環境と知識のパワーハウス。なかなか見つけられない場所です！ アバウトミー 年齢：27歳 学歴：ヨルダンでコンピューターサイエンスのBA（学士）を取得 趣味：アニメ、ゲーム、開発、サッカー、卓球、ライフトーク 仕事で今まで触れてきた技術 言語：Java, Perl, Ruby, PHP, C++, Javascript. フレームワーク：Spark, Android, Rails, Sledge, CakePHP, FuelPHP. CI: CircleCI. DB: M

こんちは。渡部です。 今回はアプリがバックグラウンドに行った時に表示されていた画面をマスクする方法です。 多分10分あればできちゃいます。 手順 ・適当に画面を用意する ・コードを書く ・おしまい 適当に画面を用意する まず適当なプロジェクトのViewControllerに 弊社サービスを牛耳る(二回目)ふろぐんのimageViewを貼り付けます。 普通にこのままバックグラウンドに行くとこうなります。 バックグラウンドに行ったことを検知するのはAppDelegateのお仕事です。 バックグラウンドに行った際にマスクするviewを表示し、 アクティブに復帰した際にマスクするviewを非表示にします。 コードを書く バックグラウンドに行く際に呼ばれるのが applicationWillResignActive 復帰する際に呼ばれるのが applicationDidBecomeActive これ

こんちは。渡部です。 今回はプッシュ通知についてです。 プッシュ通知はリモートだと証明書やらで非常に面倒になります。 なので比較的に簡単な実装方法を紹介します。 プッシュ通知とは？ プッシュ通知とは、システム側が外部のサーバーと連携して能動的に情報を取得してユーザーに通知する方式のことである。 www.weblio.jp 要は外部から通知が届く仕組みです。 LINEとかメッセージ届くときますよね？ あれです。 動作環境 ・macOS Sierra(10.12.6) ・Xcode8.3.2(古い！) ・Swift3.0(古い！) ・実機(iPhone SE iOS10.2 古い！) 注意点 ・シミュレータでは検証できないので実機でおねしゃす！ ・AppleDeveloperProgramには加入済み前提で進めます。 ・証明書CSRファイルは取得済み前提です。 ・今回はAdHocでやります。

こんにちは、ゴーリスト開発のイイオです。 bitnamiのオールインワンパッケージで 超楽にJenkinsおじさんを召喚できるのでは、という企ての話です。 実際のところ超楽だったかというと？？？なかんじですが… bitnami.com 手順 bitnami Jenkinsの「See in AWS Marketplace」をクリック インスタンスタイプを選択し 任意のVPC設定して囲み、自動割り当てパブリックIPを有効にする qiita.com タグ設定でわかりやすい名前をつけておく インスタンス作成ボタンを押してちょっと待つ 初期化が終わったら割り当ててくれたURLにアクセス ウェイ 特にポート設定とかしてないけどhttp://wariatehost/にアクセスすれば http://wariatehost/jenkins/にフォワードしてくれる。 あとインスタンス起動したら勝手にJenki

開発環境のMacで立てたローカルサーバに、iPadの実機端末からアクセスしたときのメモです。 実行環境 macOS Sierra 10.12.5 iOS 10.3.2 iPadとMacが同じwifiネットワークに接続している Lightningケーブルで接続している 実機から開発環境のローカルサーバーにアクセス このあたり参照して「hoge.local」でいけるかな〜と思ったらできず… yuji-ueda.hatenadiary.jp qiita.com 結局IP指定で行きました tacamy.hatenablog.com Angular CLI でng serveしてローカルサーバーたててるんですけど このときにオプションで自分のIP直で指定しないと外から見れなかったです。 ng serve --host <MY_IP> 実機のSafariからみてみる http://MY_IP:PORT

導入 こんにちは。 四月に新卒で入社して、開発部でエンジニアをしています。バンナイです。 2017/7/28にHRエキスポというものに参加してきました。 www.hr-expo.jp その目的は 人材業界または人事向けのサービスのチェック。どのようなサービスが存在しているのか知る。 人材業界または人事の抱える問題をシステムで解決することに関する知見を深める。 人材業界または人事の仕事のこれからの行く末を見極める。 です。 何か具体的な目的があるわけではなく、人材業界に関わっているエンジニアとして漠然と知見を深めるということが目的でした。 実際に見たサービス Google Recruiting with AdWords Recruiting with AdWordsとは スマホは求職者が最も活用しているツールだが１回あたりの起動時間は１分１１秒と短いため、スマホを多用する求職者に対して短時間

こんにちは。ゴーリスト開発のイイオです。 先輩エンジニアモリツグさんの投稿で覚えもめでたい、angular-google-mapsでカスタムオーバーレイの続編です。 developers.goalist.co.jp 今回はカスタムオーバーレイでDOMをマーカーっぽく描画する必要に迫られた場合の解決方法を記しておきます。 やったことまとめ カスタムオーバーレイを描画する カスタムオーバーレイを緯度経度指定で描画してマーカーっぽく見せる カスタムオーバーレイにクリックイベントをつける とりあえずできたものはこんな感じに動かせます。 マーカーを表示して ズームインしたらうまいこと位置調整が入って マーカークリックイベント拾ってアラート表示 マーカーを非表示にする みたいな流れです。 ここからが解説だ 何は無くともangular-google-mapsを入れます。 npm i --save @ag

こんにちわ、 ゴーリスト開発のモリツグです。 AdobeがFlashのサポートを2020年に終了することを発表しましたね！ 全国に50人はいるであろう私を含むFlex愛好家はついにこの時が来たかという気持ちだとおもいます。 Angularはそんな悲しみに暮れるFlex愛好家にはピッタリなのでお勧めです。 前回はAngular4でangular-google-mapsを使うという内容を書いたのですが、更にカスタムオーバーレイを行う必要に迫られた場合の解決方法を残しておこうと思います。 はじめに カスタムオーバーレイとはこんな感じにGoogleMap上に画像などの任意のDOM要素を配置できる機能です。 JavaScriptで使う方法は公式説明に詳しくあるのですが、angular-google-mapsで使うにはどうしたらいいのか。そもそも出来るのか、というのが今回の内容になります。 手順 とり

現プロジェクトでバックエンドを実装しているJPです。 前回の記事の続きで、storybookの基本的な部分をカスタマイズしていきたいと思います。 筆者の経験：CLIツールなどもあまり触ったことがない、フロントエンドの初心者 環境　　　：macOS Sierra 前回の記事： developers.goalist.co.jp 今回やることは以下の通りです。 前回の作業のおさらい storybookの起動 自動生成されたコンポーネント コンポーネントの追加処理をカテゴリーごとに分ける どういうこと？ なぜ？ 手順 フォルダ構成を以下のように変更する 「my-app/.storybook/config.js」を編集する まとめ 前回の作業のおさらい storybookの起動 前回作成したプロジェクトにおいて、storybookを起動します。 $ cd my-app $ yarn run stor

こんちは。渡部です。 コメダ珈琲のコーヒーと一緒に出てくる豆が好きです。 Twitterとか海外のアプリでちょいちょい見かけるスプラッシュ画面が動くやつ。 こういうのさりげなく実装できてるとかっこいいなーと思ったんで作ってみました。 こういうの↓ 引用：twitter / animation / splash screen | UI design | Pinterest | スプラッシュ画面、アニメ、スクリーン やり方 ・LaunchScreenに画像を設定 ・LaunchScreenと同じviewを起動時に表示 ・viewをアニメーションさせる LaunchScreenに画像を設定 普通にLaunchScreenにImageViewを追加します。 画像には弊社サービスを牛耳るふろぐんを使用しています。 わかりやすいように画面中央に設定します。 LaunchScreenと同じviewを起動

どうも、イイオです。 AngularでTODOアプリ的なものを作ってみようシリーズ、 チュートリアルでいうとこの辺りを見つつ、通信の部分やってきます。 https://angular.io/tutorial/toh-pt6 前回まで一体何をやっていたんだ？漢は過去に拘泥しない。 目標 今回のゴールは「HTTP通信してWebAPIを呼び出し、データのやり取りを行う」ことです。 でその際に チュートリアルではObservableに包まれて来るレスポンスを.toPromise()でPromiseに変換してるけど Observableをそのまま使うのがゴーリストではスタンダードっぽいのでそれに準じてます。 やること InMemoryWebApiModuleを使ってAPIサーバ風にふるまってもらう準備 Observableを使ってHTTP通信する 1. InMemoryWebApiModuleを使っ

はじめてAngularを触ってみた初心者のメモ書きです。 前回のブログではAngular CLIを使って環境構築を行いました。 developers.goalist.co.jp 今回はAngularのテンプレート構文を使ったデータバインドを試していきます。 目次 目次 準備 片方向データバインド 双方向データバインド リスト表示（ngFor） HTML要素の表示/非表示（ngIf） HTML要素の表示切り替え（ngSwitch） HTML要素のプロパティ指定 イベント処理 ソースコードまとめ 感想 準備 前回の復習もかねてコンポーネントを追加してみます。 template-testという名前で作ってみました。 $ng g component template-test installing component create src\app\template-test\template-te

はい、やってしまいました。犯人は僕（鈴木）です。 弊社ではAWSをめちゃくちゃ使わせて貰っています、300台以上のEC2インスタンスが存在します。うち、30台くらいが常時起動です。 先々月、AWSのコスト削減をしようということで重い腰をあげて、まずは数台分のリザーブドインスタンスを購入しました。 しかし、あろうことか購入するインスタンスサイズを間違えてしまったので、意図したとおりに費用削減されていないことが発覚しました。 その際の対応方法をまとめたので、参考になればと思います。*1 [追記]Qiitaにも同じ内容を投稿しました。 qiita.com ちなみに、本記事に登場するリザーブドインスタンスの仕様は以下の通りです。 東京リージョン 料金は全前払い 1年契約 Standardクラス アベイラビリティーゾーンの指定なし まずは簡単にAmazon EC2と、リザーブドインスタンスあたりの用

こんにちは、ゴーリストのエンジニアのJPです。 最近 SaaS サービスの開発プロジェクトでインフラ構成の調査を行っているため、その中で話題に上がった AWS のサービスを利用したファイル配信方法を紹介したいと思います。 目次 ターゲット 調査の背景 解決策 CloudFront でできること 認証の仕組み 署名付き Cookie との違い 活用例 他の実現方法 感想 ターゲット 以下のような疑問をお持ちの方 S3 へのアクセスを制限したい （ S3 の URL 知ってれば誰でもアクセスできちゃうよね？） Lambda のレスポンスサイズの上限に引っかかる 署名付き URL と Cookie どっちがいいの？ ※具体的な設定方法は次回以降の記事で記載しますので、ご注意ください。 調査の背景 新規サービスにはファイルをアップロード・ダウンロードする機能がある アプリケーションのユーザーにより