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

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

初めて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認証は強力なので、
変更に臨機応変に対応するしか無いですね。。。