pixyzehn blog

iPhone App, Mac App, Programming, Web service, Tool, Evernote, etc

OHAttributedLabelを使ってLINEのようにメッセージの中のURLを自動的にリンカブルにする

f:id:inagex:20140322082500p:plain


OHAttributedLabelというUILabelをカスタマイズできるライブラリを使って実装していく方法です。


LINEのようなメッセージアプリでは、メッセージが含まれていると自動的にリンカブル(リンクできる状態)になります。


これは単純に考えてここのお店はどう?みたいなときに食べログのリンクを貼ったりして共有できるので便利です。


こんな感じにリンクを認識して青色になりリンカブルになっています。


f:id:inagex:20140322082951p:plain


この実装をOHAttributedLabelを使って考えていきたいと思います。といってもOHAttributedLabelはデフォルトで自動的にリンクを読み取ってくれるみたいです。。


まずCocoapodsでOHAttributedLabelをインストールします。

pod 'OHAttributedLabel', '~> 3.5.3'


OHAttributedLabelを使いたいヘッダファイルに以下を追加します。

#import "OHAttributedLabel.h"


ここではxibファイルなどを使ってUILabelを作り、結びつけます。

@property (weak, nonatomic) IBOutlet OHAttributedLabel *messageLinkLabel;


f:id:inagex:20140322083822p:plain


xibファイルを使った場合はCustom ClassにOHAttributedLabelを指定するのを忘れないようにします。


ここではメッセージのテキストをtext(NSString)とします。

NSMutableAttributedString *attrStr = [NSMutableAttributedString attributedStringWithString:text];

[attrStr setFont:[UIFont systemFontOfSize:15.0]];
[attrStr setTextColor:[UIColor colorWithRed:0.40 green:0.40 blue:0.40 alpha:1.0]];
self.messageLinkLabel.attributedText = attrStr;


ここではtext全体をサイズとカラーを変更しています。


UIColorについてはこちらを使うと簡単に設定できます。


f:id:inagex:20140322084228p:plain


http://tobioka.net/wp-content/uploads/2012/05/hexrgb2uicolor.html


以上のようにするとこんな感じでURLを自動でリンカブルにしてくれます。


こんな感じ↓


f:id:inagex:20140322084347p:plain


ただこれだと怪しいURLもリンカブルにしてしまい、そういうのを挟むクッションページ的なものも必要になることも考えてひとつにURLに飛ばしておきたいものです。


そこでNSRegularExpressionの正規表現を使ってURLかどうかを判別し、ひとつのURLに飛ぶように実装します。


先ほどの実装の前に以下の実装をします。

NSError *error = nil;
NSString *URLPattern = @"(http://|https://){1}[\\w\\.\\-/:]+";
NSRegularExpression *regex = [NSRegularExpression regularExpressionWithPattern:URLPattern options:0 error:&error];
NSTextCheckingResult *match = [regex firstMatchInString:text options:0 range:NSMakeRange(0,[text length])];

if (match) {
  NSRange linkRange = [text rangeOfString:[text substringWithRange:[match rangeAtIndex:0]]];
  NSURL *linkUrl = [NSURL URLWithString:@"http://rikei-webmemo.hateblo.jp"];
  [attrStr setLink:linkUrl range:linkRange];
}


ここではURLのパターンがあればそれを抽出し、その範囲に新たにURLとしてhttp://rikei-webmemo.hateblo.jpを付随しています。


普段何気なく使っているURL自動判別は、よくよく考えると頻繁に使うし、改めて便利な機能だと思いました。


参考文献


http://qiita.com/shu223/items/9b913aff08e15d54e8b0


http://hamken100.blogspot.jp/2013/10/nsregularexpression.html


http://morizyun.github.io/blog/uilabel-web-link-customize-objectivec/