グロースハックする~ダフえもん~

S3を使用したホスティングサーバーの構築

ごきげんようdafです。 フロントのお勉強にテストサーバーが必要ということで準備したお話 あまり時間をかけずに認証はかけたい ということでやりました。

やりたいこと

  • フロントエンドの学習のためにテストサーバーが必要
  • 認証をかけたい

やること

  • S3の静的ホスティングサービスをつかって静的ページを表示
  • EC2インスタンスを噛ませてbasic認証をかける

環境

EC2(Amazon Linux) – http(80) – ssh(20) にアクセス可能にする S3バケット – S3のバケットを準備(バケット名はfront.dafman.club) – Webホスティングを有効にする Route53 – ドメイン”front.dafman.club”を発行 – type:CNAME – value:インスタンスのPublic DNS

S3のバケット設定

EC2の設定

nginx&Basic認証

.htpasswd作成

nginxのconfファイルを作成

nginxの起動&自動起動設定

フロントの勉強はじめました!

こんばんは!かーるです。

初めてHTML,CSSに触れたのは、1年と少し前でした。
書籍を1冊読みながらコーディングを進めていくスタイルのもので、
「簡単やな〜」なんて思っていましたが大間違いでしたね!

今勉強しているのはFLOCSSです。

FLOCSSの構成は次の3つのレイヤー。

1. Foundation

2. Layout

3. Object




1. Foundation
reset.cssなど。ベースの中のベースって感じ!
SMACSSのBaseカテゴリと同じ考え方。

2. Layout
ヘッダー、フッターを例に挙げると1番わかりやすい!
あとはサイドバーなど。
プロジェクトに共通するエリア、スタイルを定義する。

3. Object
ObjectはComponenet,Project,Utirityの3つのレイヤーに分けられる。

・Component
プロジェクト中で繰り返し利用されるパーツ。
よく例に挙げられているのが、button。

・Project
あんまり使わないやつ。
componentとProjectの使い分けがわからなかったのですが、
「あんまり」の頻度をチーム内で3回までとか決めたら良いらしいです!
これトップページでしか使わないよね、、、みたいなものはここ。

・Utility
ComponentとProjectで対処できないものと、スタイルの微調整をここに書く。


実例が公式に詳しく書かれています。
https://github.com/hiloki/flocss


今日はここまで〜

【Swift】RKNotificationHubを使ってみた

こんにちは、そるです。
先日、11月8日(火)に自分と同期のデザイナーで作成したiOSアプリ
「GPS鬼ごっこ」を無事にリリースすることができました!!
2人とも初めてで、いろいろな困難や戸惑いがありましたが、なかなかの仕上りに
なっていると思いますので、みなさんぜひダウンロードしてみてください! そこで本日は、アプリの中でも使用しているRKNotificationHubの使い方を書いていこうと思います!
公式ものはObjective-CだったのでSwift版です!  


公式を見たい方はこちら↓(アニメーションなどが視覚的に理解できるので、1度見てみましょう!)  
https://github.com/cwRichardKim/RKNotificationHub  

インストール

何はともあれ、まずはインストール!
自分は、Cocoapodsで管理しているので、管理しているプロジェクトのpodfileに以下を入力する  

コード全体

そしてインストールしたら、プロジェクトを開いて、使用したいViewControllerで書き込んでいくのですが、
一回コードを全文記載して、その後詳細を説明していこうと思います!  

使い方

まずは、RKNotificationHubをインポートします。
その後、RKNotificationHubのインスタンスとバッジをつけたいボタンの宣言をしています。 宣言をしたら、自分の使いたい様にバッジをカスタムしていきます!
ここが一番楽しいときです(笑) ここでは、viewDidLoadでバッジを表示させるhubの初期設定をしています。
setViewで表示させたいViewとバッジの初期値の設定
setCircleColorで背景色と文字色の設定をしています。
試したことが、ないのですが、フォントも変えられるようです! また、hogeボタンを押したときにもメソッドを宣言しています!
hub.decrementでバッジの数を減らし、popするアニメーションを指定しいます。
更にhubのCountが0になったらボタンを使えなくしてみました!  

さらにさらに、

ざっくりと簡単な使い方を書いたのですが、他にも詳細な設定をすることが出来ます!  

調整メソッド

Countの変更

バッジのアニメーション

  こんな感じで、自分が使いたいようにカスタムすることが出来ます!
Xcodeのデフォルトでは、TabBarItemにしかバッジを表示することができなかったので、
すごく良かったです! ライブラリは、導入しても使い方を理解するまでが大変で、構造を理解しないと後々大変になることが大半なのですが、 このライブラリはシンプルで使いやすく、かっこいいバッジを設置することが出来たので良かったです!
よかったら、使ってみてはいかがですか?  

おしまい

PlayFramework(Java)でFacebook認証

こんにちは!!
前回に引き続きPlayFrameworkに関して。
今回はPlayFrameworkのライブラリを使って、FacebookをOAuth認証させたいと思います。

開発環境

  • PlayFramework2.4
  • Java8
  • 認証ライブラリ:pac4j v1.9
  • FacebookAPI v2.8
今回利用するpac4jというライブラリは認証を簡単にできるライブラリで
ここに書いてある通りに書けば、
問題なく動作はします!!

が、今回は1点問題があり、動作がしなくなったので、
その解決策を書いていきます。

問題点

FacebookAPIのバージョンが新しすぎて、ユーザーのプロフィール情報を取得する為のプロパティが変わってしまった。
facebook for developersにこのように書かれています。 現在、pac4jではbioを取得してきているので、そこをaboutに変更しないとダメということだそうです。
このbioの取得が任意ならよかったのですが、認証時に必ず取得して来てしまうプロパティなのです。

認証ライブラリを書き換える

今回書き換えるクラスは2つ!!
  • FacebookAttributesDefinition.java
  • FacebookClient.java
です。
2つのクラスの変更する箇所はこちら!!

FacebookAttributesDefinition.java

41行目くらいにBIOプロパティを宣言しているので、そこをaboutに書き換えてしまいましょう!!

FacebookClient.java

55行目くらいにフィールドを宣言している中にbioという文字があるので、そこをaboutに変更!! これらに加えて、FacebookProfile.javaというクラスをライブラリから独立させて
自分のプロジェクトに加えると
今までbioを取得していたものがaboutを取得するようになります!!

今回の反省

FacebookAPIを利用するときは開発をする時にバージョンと仕様を確認して、利用するライブラリを決めないといけないです。
外部APIに依存しすぎるのはよくないですが、Facebook認証は強力なので、
変更に臨機応変に対応するしか無いですね。。。

pythonライブラリbeautifulsoupでurllib.error.HTTPError: HTTP Error 403: Forbiddenのエラーの対処法

こんにちはidentityのナパです。   今回はpythonのライブラリのbeautifulsoupをちょっと使ってみました。 これはクローリングとスクレイピングが簡単にできちゃうライブラリのようですね。 ニュースサイトやブログなどから色んな情報を引っ張ってきてどうこうしたいなーと考えています。 色々細かい説明はQiitaとかに超わかりやすく書いてくれてる達人がいるので、ありがたく拝見しましょう。 それらを見て出来たコードがこれだっ!  

  これでスクレイピング出来ました! 色んなサイトでスクレイピングしてみましょうか   おっつ、 なんかエラー出てきたよ? 実行できるサイトと出来ないサイトがあるみたいですね。。。 出来ないサイトというのは、僕みたいな輩をブロックする何かしらの処理を施しているんだと… 猪口才なっ!     これはどうやらユーザーエージェントを設定すれば解決するらしい。。。 これをreqに代わりにぶち込むと。 出来た!   なんかたのしいですね、スクレイピング。ではまた。

PlayFramework(Java)で開発環境と本番環境の違いで苦労した

こんにちは。
前回、dafさんがplayframworkでメールを送信してみた!
というタイトルで
PlayFrameworkの記事を書いていたので、
その流れに乗ってPlayFrameworkについて書きたいと思います。
タイトル通り開発環境と本番環境の違いから苦労した点を書きます。

今回の苦労した点は

conf/内のファイルが読め込めない!!

というもの。

やりたいこととしては、
conf/内に何かしらのファイルを置いておいて、
application.confに記述したパスを参照して、Javaで読み込むというもの。
(PlayでJava?という気持ちは内にしまっておいてください。。。)

開発環境で動作させるrunやstartですと問題ないのですが、
本番環境で運用する為のstageやdistをして実行すると読め込めないという状況が起きました。

まずは、

開発環境で動作したコード

このコードで実行すると、
ファイルが見つかりません。

ConfigFactory.load()を利用すると、
デフォルトでapplication.confを読みにいくのですが、
runやstartと違って
stageやdistしたパッケージ内には
conf/が存在していないのでパスが違ってエラーになります!!

ではどうしたものか・・・
色々調べてみると、
便利なものが存在しました!!
play.Application.getFile(String relativePath)

このメソッドはアプリケーションのルートパスからの相対ファイルを取得するというもの。
アプリケーションのルートパスの参照ならconf/も存在するので、
ファイルも取得出来る!!

それでは、

本番環境でも動作したコード

これでファイルを取得出来ました!!
因に、application.confに記述するパスは
conf/path
となります。

これ以外にも開発環境と本番環境では異なってくる箇所があるので、
徐々に書いていきたいと思います。
グロースハックする~ダフえもん~

playframworkでメールを送信してみた!

ごきげんようdafです。(最近bufになりました。そろそろ襲名披露していこうと思います。) 最近の”グロースハックする?”ブログは新卒の投稿も増えて、カテゴリもバラバラでカオスですね。 今日は原点回帰ということで業務で使ってるJava-Playのお題を扱ってみようと思います。 題して

“playframworkでメールを送信してみた!”

ついでに次回更新として”AWSのSESをSMTPサーバとして使ってみた”も予定しておきます!乞うご期待!

環境

Playframework 2.4 Java8

準備

こちらのライブラリを使う playframework/play-mailer – github

build.sbt

ライブラリを参考にlibraryDependencies 内に以下を追加 追加したらupdate

conf/application.conf

まずはgmailで実際に確認してみる。 confファイル内に以下を追記

実装

以下の内容で あとは実行してやるだけ! 簡単簡単!次回は”SESをSMTPサーバとして使ってみた!”を書く予定です! あとScalaのライブラリAkkaを深く勉強する機会があったのでいずれそれも書いてみようとおもう。

初めてチーム開発して思ったこと②

こんばんは〜

かーるです!

今日は『初めてチーム開発して思ったこと②』ということで、

エンジニアが複数いるからこそ発生した、

「ここ大変だったけど少し考えれば気づくよね、、、、」

と思ったことを書きます!



まず1つめ。じゃじゃん!


『バージョン』


いつも通りAndroid Studioでプロジェクトを開こうとすると、「あれ。。。。」

片方のエンジニアがAndroid Studioのバージョンをアップデートしてたんですね。

他にも色々細かいことがあって、結局元の作業に戻るまで1日費やした記憶があります。。。

これは初心者でもすぐに直せるポイントなので、

私自身、今後のプロジェクトで気をつけていきたいと思います!



2つめ!じゃじゃじゃん!


『コード共有』


そりゃ大事ですよね!

gitをよく勉強しないまま開発に入ってしまい、コード共有が全然出来ていませんでした。。。

基本的な操作方法は少し勉強すれば使えるようになりました。

はじめに勉強時間を取っておけばよかったなあ。。反省。。。

先輩のwarakeさんに教えてもらったgitの学習サイト、

可視化されていてとてもわかりやすかったです〜!

http://k.swd.cc/learnGitBranching-ja/

初心者にぴったり☆

それでは、今日はこのへんで!

【Swift】アプリを終了された時の、Firebseでの対処

こんにちは、そるです!
今、私はFirebaseを使ってスマホアプリを開発しているのですが、 自分がつまったことを書いていこうと思います。   複数人と通信をしながらゲームをするアプリを作成してるのですが、 ゲームを作ったホストの接続が切れたりした時に
Firebase内のデータを削除したかったのですが、全く削除されない。。。   appDelegateのapplicationWillTerminate上でデータの削除をさせる記述をしても、 削除される前にアプリが終了してしまい、なすすべがありませんでした。 やむを得なくタスクを切られた時のデータをデバイス上に保存して、 次回起動された時にデータの削除をするといった苦肉の策を行おうとしていました。   いやいや、そんなことはないと思いネットで調べたのですが、出てこず、、、、
これはマジでないのかも!?と思い始めていましたが、天下のGoogleさんが買収したFirebaseに タスクが切られた時の対処がなされていないなんてありえない!!と思い頑張ってリファレンスを読みました!   そしたら、ありました!!

connectedRefはFirebaseとの接続状況を判断しているらしく、型はBool
オブザーバーイベントタイプで接続が確認されたら、.onDisconnectRemoveValue()を設置するっぽい。
で、接続が切れたと同時に、設置していた処理を実行してくれるらしい!   結果、タスクを切られた時にFirebsaeのデータを削除してくれたのはいいんですけど、
このコードを読まれた瞬間にonDisconnectRemoveValue()を設置してしまうので、
その後の、何かの条件分岐をさせたい時どうすればいいか、また悩んでいます。。。(笑) けど、とりあえずできてよかったです!
以上です!

AngularJS 1.xで簡単なSPAを 〜導入編〜

先月にAngularJS2.0の正式リリースがあり、 やってみようかなと思いましたが、 まだ情報も少ないということでまずは1.x系から触ってみて 2.0との比較をしていこうかなと思います。

開発環境

・MacOSX 10.9 ・AngularJS 1.5.8 ・Atom 1.10.2 さっそく導入してみます!! だいたい、開発環境構築の時に 詰まって何時間も時間を取られてしまうのですが、 AngularJSは簡単に導入ができました。 まずはCDN経由で導入しておきます。
  1. 要素配下(一般的)に と記述する。
  2. ディレクティブを設定する
たったこれだけ。 あとは 要素内でAngular式を用いてviewを構成していくだけ。 今回はAtomを利用して書こうと思うので、 Atomの方もパッケージを導入して開発しやすくします。 angularjsを利用すると自動補完してくれます。

やってみての所感

簡単に導入出来て、MVCモデルであることでモジュール単位の開発ができるので、 乱雑になることはないのではないかなと思う。 まださわりなのでライブラリやタスクランナーを使いながら慣れていこうと思う。