Cocoa勉強会201208

4,113 views

Published on

Cocoa勉強会2012年8月25日NSAttributedStringとCoreTextで簡単な組版

0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,113
On SlideShare
0
From Embeds
0
Number of Embeds
714
Actions
Shares
0
Downloads
23
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Cocoa勉強会201208

    1. 1. NSAttributedStringに ついて 2012.8.25 Cocoa勉強会 大森智史
    2. 2. • スライド、サンプルは基本的にすべて公開し ます。
    3. 3. あんた、誰?• と、いうわけで自己紹介。
    4. 4. • 大森智史といいます。• Objective-Cで遊んでます。• 印刷会社勤務。
    5. 5. • と、いうことで本題に
    6. 6. • 職業柄、電子書籍系のレビューなどは気に なっています。• 先日、ある電子書籍の案内を見ていたら、す こし違和感を覚えました。
    7. 7. 2012 AppStore2012 ミナミ・リエロ/株式会社日本文芸社/株式会社メディアタブレット/アドベンチャー 「女医が教える最高のセックス」より引用
    8. 8. サンプル画面2012 AppStore2012 ミナミ・リエロ/株式会社日本文芸社/株式会社メディアタブレット/アドベンチャー 「女医が教える最高のセックス」より引用
    9. 9. 気がつきましたか?
    10. 10. 2012 ミナミ・リエロ/株式会社日本文芸社/株式会社メディアタブレット/アドベンチャー 「女医が教える最高のセックス」より引用
    11. 11. 2012 ミナミ・リエロ/株式会社日本文芸社/株式会社メディアタブレット/アドベンチャー 「女医が教える最高のセックス」より引用
    12. 12. おかしいでしょ?
    13. 13. 2012 ミナミ・リエロ/株式会社日本文芸社/株式会社メディアタブレット/アドベンチャー 「女医が教える最高のセックス」より引用
    14. 14. • そこで、研究熱心な私は、購入して詳細を見 て見ることにしました。
    15. 15. 初めに言っときますけど組版の研究目的です。!
    16. 16. やっぱり変です。2012 ミナミ・リエロ/株式会社日本文芸社/株式会社メディアタブレット/アドベンチャー 「女医が教える最高のセックス」より引用
    17. 17. 組版 の研究ですからね! 本当ですよ!
    18. 18. きっと• どうも横書き用のグリフを並べているだけな んでしょう。• 縦書きは縦書き用のグリフを使わないと!全 体にバランス悪い。• 「。」「、」だけは処理しているようだが。
    19. 19. いいかげんな実装は やめていただきたい!• きちんと実装しましょう。• 縦書きは単に文字を縦にを並べれはいいとい うものではないです。
    20. 20. と、いうことで
    21. 21. きちんと実装するには• フォント情報を読んで• グリフを読んで• レイアウトして
    22. 22. • 参考資料• 日本語組版の要件• W3C• http://www.w3.org/TR/2012/NOTE- jlreq-20120403/ja/
    23. 23. そこまでする必要はありません
    24. 24. CoreTextで属性付きテキストを 描画 こんな感じでいいです。
    25. 25. どうするか?
    26. 26. 属性付きテキストとは• フォント、色、サイズ• 下線• 段落設定 左 え右 え• NSAttributedStringを使います。
    27. 27. • 属性付きテキストだけでは段落設定や縦組み などはダメだけどCoreTextと組み合わせるこ とで、多彩な表現が簡単に。
    28. 28. だが、しかし• 今、iOS 5.1では、コンテキストを使ってしか 書く方法がない!• OS XにはdrawStringとかdrawRectとかView に書く方法がある!• 将来に期待したい!
    29. 29. コンテキスト• とりあえず、コンテキストで書く方法• - (void)drawRect:(CGRect)rect { //コンテキスト! CGContextRef context = UIGraphicsGetCurrentContext();• ....書いていく• }
    30. 30. • コンテキストを取得• AttributedStringを作成• フレームを作成• 描画
    31. 31. • 以上です。
    32. 32. コンテキスト• レイヤーのコンテキストに書いていく方法• - (void)drawRect:(CGRect)rect { //レイヤーを作成 CGLayerRef layer; CGContextRef layerContext; layer = CGLayerCreateWithContext(context,CGSizeMake(800,800),NULL); //レイヤーのコンテキストを取得 layerContext = CGLayerGetContext(layer);• ....書いていく• }
    33. 33. 属性
    34. 34. フォントヒラギノ角ゴ ヒラギノ明朝
    35. 35. フォントCTFontRef aFont1 =    CTFontCreateWithName(CFSTR("HiraKakuProN-W6"), 20, NULL);NSDictionary *fontAttributes1 = [NSDictionary dictionaryWithObjectsAndKeys: (__bridge id)aFont1, @"NSFont" ... ,nil ];NSAttributedString *grayString = [[NSAttributedString alloc]initWithString:@"リガチャnn ffi fln"attributes:fontAttributes1];
    36. 36. カラーカラー  カラー
    37. 37. カラーNSDictionary *fontAttributes1 = [NSDictionary dictionaryWithObjectsAndKeys: (__bridge id)darkGrayColor, @"CTForegroundColor", ... ,nil ];
    38. 38. リガチャ(合字)
    39. 39. リガチャNSDictionary *fontAttributes1 = [NSDictionary dictionaryWithObjectsAndKeys: [NSNumber numberWithBool:YES],kCTLigatureAttributeName, ... ,nil ];
    40. 40. 下線
    41. 41. 下線NSDictionary *fontAttributes1 = [NSDictionary dictionaryWithObjectsAndKeys: (__bridge id)redColor,kCTUnderlineColorAttributeName, [NSNumber numberWithInt:0x0100],kCTUnderlineStyleAttributeName, ... ,nil ];
    42. 42. 段落設定(センターそろえ)
    43. 43. 段落設定 センターそろえNSDictionary *fontAttributes1 = [NSDictionary dictionaryWithObjectsAndKeys: paragraphStyleAttr, kCTParagraphStyleAttributeName, ... ,nil ];
    44. 44. id paragraphStyleAttr = ((^ { CTParagraphStyleSetting paragraphStyles[] = (CTParagraphStyleSetting[]){ (CTParagraphStyleSetting) { kCTParagraphStyleSpecifierAlignment, sizeof(alignment), &alignment}, (CTParagraphStyleSetting) { kCTParagraphStyleSpecifierLineHeightMultiple, sizeof(float_t),(float_t[]){ lineHeight } }, (CTParagraphStyleSetting) { kCTParagraphStyleSpecifierMinimumLineHeight, sizeof(float_t), (float_t[]){lineHeight } }, (CTParagraphStyleSetting) { kCTParagraphStyleSpecifierMaximumLineHeight, sizeof(float_t), (float_t[]){lineHeight } }, (CTParagraphStyleSetting) { kCTParagraphStyleSpecifierLineSpacing, sizeof(float_t), (float_t[]){ 0.0f } }, (CTParagraphStyleSetting) { kCTParagraphStyleSpecifierMinimumLineSpacing, sizeof(float_t),(float_t[]){ 0.0f } }, (CTParagraphStyleSetting) { kCTParagraphStyleSpecifierMaximumLineSpacing, sizeof(float_t),(float_t[]){ 0.0f } } };CTParagraphStyleRef paragraphStyleRef = CTParagraphStyleCreate(paragraphStyles,sizeof(paragraphStyles) / sizeof(CTParagraphStyleSetting)); return (__bridge id)paragraphStyleRef; })());
    45. 45. デモTEST1
    46. 46. 縦組み用
    47. 47. 縦組み用文字NSDictionary *fontAttributes1 = [NSDictionary dictionaryWithObjectsAndKeys: [NSNumber numberWithBool:YES], @"CTVerticalForms", ... ,nil ];
    48. 48. +フレーム設定 が必要AttributedStringじゃないけれど
    49. 49. フレーム設定//フレーム作成 CTFrameRef frame = CTFramesetterCreateFrame(framesetter,CFRangeMake(0, 0), path, (__bridge CFDictionaryRef)[NSDictionarydictionaryWithObjectsAndKeys:[NSNumbernumberWithUnsignedInt:kCTFrameProgressionRightToLeft],@"CTFrameProgression",nil]);
    50. 50. 文字間を等幅に (デリゲート使用)
    51. 51. 文字間を等幅にCGFloat MyGetWidthCallback( void* refCon ){ NSLog(@"Width being set %s",refCon); return 30.0;}- (void)drawRect:(CGRect)rect{ CTRunDelegateCallbacks callbacks; callbacks.getWidth = MyGetWidthCallback; CTRunDelegateRef delegate = CTRunDelegateCreate(&callbacks,NULL);NSDictionary *fontAttributes1 = [NSDictionary dictionaryWithObjectsAndKeys: delegate,kCTRunDelegateAttributeName, ... ,nil ];
    52. 52. 文字間を調整(カーニング使用)
    53. 53. 文字間を調整NSDictionary *fontAttributes1 = [NSDictionary dictionaryWithObjectsAndKeys: [NSNumber numberWithFloat:5.0],kCTKernAttributeName, , ... ,nil ];
    54. 54. リンク情報
    55. 55. リンク情報NSDictionary *fontAttributes1 = [NSDictionary dictionaryWithObjectsAndKeys: @"http://www.apple.co. jp/" ,@"NSLinkAttributeName", ... ,nil ];
    56. 56. デモTEST2
    57. 57. まとめ• NSAttributedString+CoreTextで簡単にきれい なレイアウト• iOSではコンテキスト描画...。Macでは drawRect()とかあるし、シャドウも掛けられ たりするし...将来に期待!
    58. 58. ありがとうございました

    ×