Swift転職なら=>【LevTech】
↑クリックして拡大
↑クリックして拡大
↑クリックして拡大
↑クリックして拡大

頭痛が減ったので共有です!

rebuild.fmを応援しています!

HOME > UITextViewやらで縦書きができないか検証

UITextViewやらで縦書きができないか検証

サンプル画像

「文字の縦書き」をやってみたいのですが、どうもUITextView等には設定が無いとのことです。 調べていると、本当にない?のかな。少し調査して作れそうなもんであればつくってみれたら、、、との気持ちで進めてみます。

さてさて、調査を進めていくと、ブックリーダー作成なんかに利用したりとトライはされているようで、 UITextViewでは縦書きは対応していませんが、UIWebViewのCSSなんかで縦書きしたりができるようなサイトを見つけました。 ただ、UITextViewは縦書きに対応していないので独自にフォーカスなんかも実装する必要があるので面倒そう。ざっくり プロトタイプですが、簡単な物ができないかを調査してみました。

参考:iOSで文字を組む
参考:ブックリーダーアプリ開発方法まとめ 文字描画編
参考:TTTAttributedLabelを使って簡単縦書き
参考:縦書きtextarea要素
参考:writing-modeの解説
参考:Cocoaでの縦書きの実現について
参考:僕も調べ中なんですけどたぶんダメ

やってみた(UITextView編)

自作クラスのUITatagakiTextViewを作成(もどき)です。やってることは単純で文字列を行間に分けて、一文字ずつUILabelを配置しているだけです。 本来はそれぞれのキャラクタ毎に文字サイズ等を調整すればもっと気持ちよく表示できるんじゃないかなとも思います。


import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let myTextView: UITategakiTextView = UITategakiTextView(frame: CGRectMake(0, 20, self.view.frame.width, self.view.frame.height))
        myTextView.takegakiText("はじめまして\nSwiftサラリーマンと申します\nあなたのお名前は?\nイトオカシ\n英数字が変ですね\n01234567\nまだまだダメダメです",textSize:25);
        self.view.addSubview(myTextView);
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

上はViewController.swiftに貼り付けて、、、、UITategakiTextViewクラスを以下に追加します


import UIKit

public class UITategakiTextView: UITextView {
    
    required public init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
    }
    
    override init(frame: CGRect, textContainer: NSTextContainer?) {
        super.init(frame: frame, textContainer: textContainer);
    }
    
    //縦書きテキストを作成
    func takegakiText(text:String,textSize:Int){
        
        let startX = Int(self.bounds.width) - textSize;
        let startY = 0;
        
        let lines = text.componentsSeparatedByString("\n")
        let linesLen = count(lines);
        
        for ( var i = 0; i < linesLen; i++){
            let line = lines[i];
            var colCnt = i;
            var rowCnt = 0;
            for c in line {
                println(c);
                let _x = startX - (colCnt * textSize);
                let _y = startY + (rowCnt * textSize);
                self.makeLabel(String(c),x:_x,y:_y,s: textSize);
                rowCnt += 1;
            }
            println("------");
        }    
    }
    
    //UILabelを作成
    func makeLabel(c :String, x:Int, y:Int, s:Int){
        var label = UILabel(frame: CGRectMake(CGFloat(x), CGFloat(y),CGFloat(s),CGFloat(s)));
        label.font = UIFont(name: "HiraMinProN-W6", size: CGFloat(s))
        label.text = c;
        self.addSubview(label);
    }
}

UITextViewを継承していますが、全く継承している意味の無い作成です。まだ途中ですが、、、、、共有です。

やってみた(WebView編)

textareaのwriting-modeやらを変更すればいけそうな気配。果たして端末のブラウザ上で動作するか。WKWebViewで試してみる。



import UIKit
import WebKit

class ViewController: UIViewController,WKNavigationDelegate {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let webView = WKWebView(frame: CGRectZero, configuration: WKWebViewConfiguration())
        webView.setTranslatesAutoresizingMaskIntoConstraints(false)
        webView.navigationDelegate = self
        view.addSubview(webView)
        
        view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|[webView]|", options: NSLayoutFormatOptions.allZeros, metrics: nil, views: ["webView": webView]))
        view.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|[webView]|", options: NSLayoutFormatOptions.allZeros, metrics: nil, views: ["webView": webView]))
        
        if let url = NSBundle.mainBundle().URLForResource("tategaki_sample", withExtension: "html") {
            webView.loadRequest(NSURLRequest(URL: url))
        }
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
    
    func webView(webView: WKWebView, didFinishNavigation navigation: WKNavigation!) {
        //println("Finished navigating to url \(navigation.request.URL)")
    }
    
}

ViewControllerのWKWebViewから(UIWebViewでもOK)プロジェクトに追加したtategaki_sample.htmlを表示します。


 <!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <style>
  .box{
      float:left;
      width:200px;
      height:200px;
      margin-left:50px;
      border:solid 1px silver;
  }
  /* 縦書きの指定 */
  #box1 {
      -ms-writing-mode:tb-rl;
      -webkit-writing-mode:vertical-rl;
      direction:ltr;
  }  unicode-bidi:bidi-override;
  }
  </style>
  </head>
  <body>
  <p id="box1" class="box">
はじめまして<br/>Swiftサラリーマンと申します<br/>あなたのお名前は?<br/>イトオカシ<br/>英数字が変ですね<br/>01234567<br/>まだまだダメダメです
  </p>
  </body>
  </html>

出来上がりはこんな感じ。縦書きされています!ただし、タグはtextareaではなくpの状態

サンプル画像

フォントの種類が違うのはもちろんありますが英数字は横向きのままなんですね。

さて、これをtextareaに切り替えられるものなのかな

サンプル画像

タグをtextareaに変えるだけではダメでした。。。。横書きになってしまいました。

調査していると以前は縦書きでもブラウザが認識していた時があるのでは? と思われる記載がチラホラ。そのサイトにあるサンプルも横書きになってるので縦書き対応してくれなくなったのかなぁ。。。

まとめ

縦書きの入力テキストエリアをつくるのは結構手間ひまかけないといけなさそうでした。また調査してみたいと思います。時間切れです!

文字関係の記事(CoreText) ルビや縦書きCoretextを追加しました。

↓こんな記事もありますよ!

GはGoogle他のアルファベットを勝手に妄想してみる

さて昨日はGoogleが衝撃的な発表でAlphabetという親会社をつくって、Googleはアルファベットの中のGがGoogleとの 位置づけで今後展開していくとの事。ネーミングもですが、今後の期待を大きく感じる、またわかりやすく好印象だったのか株価も 大きく上がったとのことでした。さて、その他残りのアルファベットはどんな風になるのかなぁと勝手に歩きながら妄想してみました。

Facebook SDK のAppEventを検証する

さて、AppEventですが、FacebookのAppを利用したログシステムなのかな。ログをカスタマイズして保存して、 それを解析できる、そんな感じなのかなと思っています。 広告利用の為に、インストールされた数やログの解析によってユーザの動作を確認できるようですので細かく設定できるのではと思います。 まずは上記のようにログを保存する、ログを読み込む、ができるのかを検証してみます

UITabBarItem

タブバーを利用した時にアイコンがデフォルトのものだけでは物足りなかったのでフリー素材でよさそうなサイトがあったので共有です。 500個も魅力的でオーソドックスで使いやすいアイコン盛りたくさん。
このエントリーをはてなブックマークに追加
右側のFacebookのLikeをクリック頂けると記事更新の際に通知されますので宜しければご利用下さい!