Tag Archives: JSBadgeView

[OSA2013] JSBadgeView – 設定しやすいバッジ

0
Filed under オープンソースライブラリ
Tagged as , , ,

OSS Sampler Advent Calendar 2013
「OSS Sampler AdventCalender 2013」 11日目は、「JSBadgeView」です。

JSBadgeView

JSBadgeViewは、iOS標準のようなバッジを表示するライブラリです。
JaviSoto/JSBadgeView – github
OSS Sampler - JSBadgeView
MITライセンスです。

使いやすさは人それぞれ

前回の「LKbadgeView – カスタマイズしやすいバッジ」もバッジのライブラリでしたが、こちらはちょっと方向性が違い、「あるViewにさくっとバッジを付けたい」というときに便利なライブラリです。
「このViewの右上に」とか、「左側で上下は真ん中に」という親Viewに対して位置指定ができるのが一番の特徴です。だから次のようなinitメソッドがあるのです。

1
- (id)initWithParentView:(UIView *)parentView alignment:(JSBadgeViewAlignment)alignment;

こういう風に、同じように見えても作者の設計方針が違うのが見えてくるのもオープンソースライブラリを見ていて楽しいことの一つですね。

改良、改良!

実はこのライブラリには以前Pull Requestを送ってマージされた事があります。
GitHubでPull Requestしてみた « TORQUES LABS
小さなバグ修正だったのですが、ちょっと嬉しかったです。
で、今回この記事を書くにあたって再度見てみたらiOS 7ライクなバッジ表現にできるよう、表示に関する設定プロパティがいろいろ増えていました!
いろんな人が少しずつ良くしていく、オープンソース開発のいいところが見えるライブラリです。

badge_AppStore – OSS Sampler – iOSオープンソースライブラリ集
(今回紹介したJSBadgeViewの動作も確認できます)


GitHubでPull Requestしてみた

0
Filed under git
Tagged as , ,

オープンソースで公開されているソースを修正し、本体に取り込んでもらうこと、これをソーシャルコーディングと言います。
GitHubでは、Pull Requestを送ることがそれにあたります。
ちょっと試しに使っていたライブラリにバグを見つけ、簡単に直せたので、トライしてみました。

今回の作業対象は次のリポジトリです。

1. Fork

まず、ベースとなるライブラリをForkします。
GitHubウェブサイトで行います。
元になるライブラリのページを開き、右上にある『Fork』ボタンを押します。
github-fork
しばらくすると、Forkが完了します。
github-fork-done

2. clone

次に、Forkしたリポジトリをcloneします。
ターミナルで下記のように、自分側のリポジトリをcloneします。

1
$ git clone git@github.com:HiromichiYamada/JSBadgeView.git

3. branch

作業用にブランチを切りますが、その前に、まずは下記のコマンドで一旦現状を確認してみます。

1
2
3
4
5
6
$ cd JSBadgeView/
$ git branch -a
* master
  remotes/origin/HEAD -> origin/master
  remotes/origin/gh-pages
  remotes/origin/master

作業用ブランチは”work”と名付けて、下記のコマンドでブランチを切ります。

1
2
3
4
5
6
7
8
$ git checkout -b work master
Switched to a new branch 'work'
$ git branch -a              
  master
* work
  remotes/origin/HEAD -> origin/master
  remotes/origin/gh-pages
  remotes/origin/master

すぐに作業しているブランチが切り替わった(workに*が付いている)のが分かります。

4. コード修正

切り替えたブランチ”work”で、コードを修正します。
つまり【Forkしたリポジトリの、作業用ブランチでコードを修正】するということですね。
動作確認もしておきましょう。

5. 修正確認

修正が完了したら、ターミナル上でもコードの変更点を確認しておきます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$ git diff
WARNING: terminal is not fully functional
diff --git a/JSBadgeView/JSBadgeView.m b/JSBadgeView/JSBadgeView.m
index a0c5348..76c60f7 100644
--- a/JSBadgeView/JSBadgeView.m
+++ b/JSBadgeView/JSBadgeView.m
@@ -145,8 +145,8 @@
             newFrame.origin.y = (superviewHeight - viewHeight) / 2.0f;
             break;
         case JSBadgeViewAlignmentBottomLeft:
-            newFrame.origin.x = -textWidth / 2.0f;
-            newFrame.origin.y = (superviewHeight - viewHeight) / 2.0f;
+            newFrame.origin.x = -viewWidth / 2.0f;
+            newFrame.origin.y = superviewHeight - (viewHeight / 2.0f);
             break;
         case JSBadgeViewAlignmentBottomRight:
             newFrame.origin.x = superviewWidth - (viewWidth / 2.0f);

6. commit

この変更点を下記のようなコマンドでコミットします。

1
2
3
4
$ git add JSBadgeView/JSBadgeView.m
$ git commit -m "Fix layout bug for JSBadgeViewAlignmentBottomLeft"
[work b099562] Fix layout bug for JSBadgeViewAlignmentBottomLeft
 1 file changed, 2 insertions(+), 2 deletions(-)

7. push

リモート(GitHub側)にPUSHします。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$ git push origin work
Counting objects: 7, done.
Delta compression using up to 2 threads.
Compressing objects: 100% (4/4), done.
Writing objects: 100% (4/4), 411 bytes, done.
Total 4 (delta 2), reused 0 (delta 0)
To git@github.com:HiromichiYamada/JSBadgeView.git
 * [new branch]      work -> work
yamadambp:JSBadgeView Hiromichi$ git branch -a
  master
* work
  remotes/origin/HEAD -> origin/master
  remotes/origin/gh-pages
  remotes/origin/master
  remotes/origin/work

これでPUSH完了です。
リモート側にも、remotes/origin/work が作成されていることが分かります。

8. Pull Request

GitHubの該当リポジトリページで確認してみると、確かに”work”ブランチが増えている事がわかります。
github-branch-work
この中身を見ると、実際にソースも修正されています。
今の状態は【Forkしたリポジトリの、作業用ブランチでコードを修正】が出来た、ということですね。
この状態をFork元に、Pull Requestします。
“work”ブランチであることを再確認し、ページ上部の『Pull Request』ボタンを押します。
github-pullrequest-button
送信先と、送信元を確認したら(グラフィックが多用されていて分かりやすいですね!)コメントを記入し、下部にある『Send pull request』ボタンを押します
github-pullrequest-send
これでPull Request完了です!

9. merged

あとは修正側でやることはありません。元リポジトリのコミッタの対応を待つだけです。
今回の場合、直ぐに本体側でmergeしていただけました。
github-merged

参考ページ


[AD]

↓今回とてもお世話になった雑誌。Pull Requestについて詳しく書かれています!

WEB+DB PRESS Vol.69

著者/訳者:大塚 弘記 渡辺 修司 堤 智代 森田 創 中島 聡 A-Listers はまちや2 川添 貴生 井上 誠一郎 近藤 宇智朗 ヒノケン 後藤 秀宣 佐藤 鉄平 mala 奥野 幹也 伊藤 智章

出版社:技術評論社( 2012-06-23 )

定価:

Amazon価格:¥ 12,649

大型本 ( 192 ページ )

ISBN-10 : 4774151041

ISBN-13 : 9784774151045


↓Chapter 12にGitHubの使い方があるようですよ!

アリスとボブのGit入門レッスン

著者/訳者:川野辺 正博

出版社:秀和システム( 2012-09-18 )

定価:

Amazon価格:¥ 16,152

単行本 ( 288 ページ )

ISBN-10 : 4798035009

ISBN-13 : 9784798035000