Rodhos Soft

備忘録を兼ねた技術的なメモです。Rofhos SoftではiOSアプリ開発を中心としてAndroid, Webサービス等の開発を承っております。まずはご相談下さい。

ローカルHTMLのメモ

WKWebViewで実装すると
フォルダ参照ならhtml内のlinkは./でプロジェクト直下になっているようだ。

WKWebViewは今の所、コード上で貼り付けるしかない。

WKNavigationDelegateでnavigationResponseでdocument.locationの移動を検知できる。
decisionHandler(.allow)で許可する。

challenge: URLAuthenticationChallengeで
信頼するかどうか

        print("[Warning]challenge AuthenticationChallange")
        let cred = URLCredential(trust: challenge.protectionSpace.serverTrust!);
        completionHandler(.useCredential, cred)

Build Phaseでプロジェクト直下のファイルをResourceにコピーできる。
ResourceにコピーできればMainBundleから取得できる。

cmakeの仕方

以下を参考にする。
qiita.com

コマンドラインのビルド

main.cpp, hello.hppがあるとする。
これらをまず

g++ -c main.cpp hello.hpp

コンパイルして.oファイルを作る。
そしてリンクする。

g++ -o a.out main.o hello.o

cmake

CMakeLists.txtを作る

cmake_minimum_required(VERSION 2.8)
project(sample_project CXX)

add_executable(a.out main.cpp hello.cpp)

buildフォルダを作り、そこで実行する。

mkdir build
cd build
cmake ..
make

canvas

お絵描きのサンプル マウスをダウンして描画開始、動かしたら線を引いて、マウスをあげたら描画終了

pathの構造

  • path 複数のsubpathから構成されている。
  • subpath 座標点のリストを持ちlinesegmentとも呼ばれる。
  • subpath closedかどうかのフラグを持つ
  • context pathを一つ持つ

    contextの命令

  • beginPath pathのsubpath達をクリアする。
  • moveto 新しいsubpathを作り現在のsubpathとし、pathに追加する
  • lineto 現在のsubpathのlinesegumentに座標点を追加する
  • closePath 現在のsubpathのclosedフラグをtrueにする。
  • stroke pathを描画する。

display

  • block (p、div、ul、h1〜h) 横いっぱいに広がり、縦に並ぶ
  • inline ( a、span、omg) 要素が横に並んでいく
  • inline-block
  • none 非表示

blockは改行が入り、幅と高さが設定される。 左右、上下の余白が設定できる。 inlineは改行は入らず幅と高さが設定できない 左右の余白が設定できる。親に対しtext-alignが設定できる。(vertical-alignも) inline-blockは改行が入らず、幅と高さが設定できる 上下左右の余白が設定できる。親に対しtext-alignが設定できる(vertical-alignも)

  • 参考

【CSS】displayの使い方を総まとめ!inlineやblockの違いは?

Slickの導入

  1. サイトからDL slick - the last carousel you'll ever need

  2. htmlから読み込む

<script type="text/javascript" src="/js/slick/slick/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="/js/slick/slick/slick.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/js/slick/slick/slick-theme.css" media="screen" />
  1. 表示用のボタンを貼り付ける
  <ul class="slick-box">
        <li class="slick-item">
            <button data-id="menu1">
                <img src="./resource/1.png" width="250px" height="250px" alt=""/>
                <p>1</p>
            </button>
        </li>
        <li class="slick-item">
            <button data-id="menu2">
                <img src="./resource/2.png" width="250px" height="250px" alt=""/>
                <p>2</p>
            </button>
        </li>
        <li class="slick-item">
            <button data-id="menu3">
                <img src="./resource/3.png" width="250px" height="250px" alt=""/>
                <p>3</p>
            </button>
        </li>
        <li class="slick-item">
            <button data-id="menu4">
                <img src="./resource/04.png" width="250px" height="250px" alt=""/>
                <p>4</p>
            </button>
        </li>
    </ul>
  1. 表示用する
<script type="text/javascript">
    /// スライダー表示
    $(function() {
       $('.slick-box').slick({
            accessibility: true,
            adaptiveHeight: true,
            autoplay: false,            
            dots: true,
            arrows: true,
            speed: 300,
            fade: false,
            infinite: true,
           slidesToShow: 1,
            slidesToScroll: 1,
            centerMode: true,
            centerPadding: "60px",
            mobileFirst: true,
            focusOnSelect:false,
            focusOnChange:false,
            draggable: true,
            touchMove: true,
            swipe: true,
            swipeToSlide: true,
            verticalSwiping: false,
            vertical: false
        }); 
    });
</script>