Rodhos Soft

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

html

長押し系

ひとまず色々あるのでまとめて /* 画像のクリックなどのイベントを無視 */ img { pointer-events: none; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -webkit-user-drag: none; }

スクロール禁止にする

この記事に詳細は書いてある。 qiita.com touchmoveをaddEventListenerしてpreventDefaultする。その際にpassive:falseを指定する必要がある。 function handleTouchMove(event:TouchEvent){ console.debug("touchmove.noScroll prevent.."); event.preventD…

認証関連

manifest.jsonが401で認証通らず読み込めないのはcrossOrigin="use-credentials"をつけないといけないからのようだ。 https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/crossorigin

urlに飛ぶ

window.location.assign(***)だった‥。

長押し無効

このあたり touch-action: none; pointer-events: none;

iosのwkWebViewでズームさせない

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,muser-scalable=no"></meta>

チェック

チェックの有無の取得 <p>hoge<input type="checkbox" data-detail value="1"></p> let checked = ($("[data-detail]").is(":checked")) ? true : false;

canvas

お絵描きのサンプル マウスをダウンして描画開始、動かしたら線を引いて、マウスをあげたら描画終了 pathの構造 path 複数のsubpathから構成されている。 subpath 座標点のリストを持ちlinesegmentとも呼ばれる。 subpath closedかどうかのフラグを持つ cont…

Web技術の情報

developers.google.comgoogle、よく書かれている。

スクロールを一時禁止

このような感じで onKeypadOpen:() => { $(document).on("touchmove.noScroll", function(e:JQuery.Event) { e.preventDefault(); }) }, onKeypadClose:() => { $(document).off("touchmove.noScroll"); },

カスタムデータ属性

data-hogeで cssから参照は[data-hoge="fuga"]

html埋め込み

webpackのhtml-loaderを使ってhtmlをjavascriptで読み込んだ使う。 html-loaderのインストール。 npm install html-loader webpack.config.jsを設定 module.exports = { entry: './app.js', output: { path: __dirname + "/dist", filename: "bundle.js"; },…

レイアウト作成続

flexを使うほうが調整が簡単なことがわかった。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>List</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <link rel="stylesheet" type="text/css" href="style.css"> </link></meta></meta></head></html>

テーブル

書いてみたが使わなくて良いみたい。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>List</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <link rel="stylesheet" type="text/css" href="style.css"> </link></meta></meta></head></html>

書いてみた

まだぐしゃぐしゃだがやはりスタイルはまとめて他の場所に書くほうがすっきりするようだ。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>List</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> </meta></meta></head></html>

フレックスで縦に並べる

あっているかはわからない。 <div id="box" style=" width: 300px; display:flex; flex-grow: 1; align-content: center; align-items: center; flex-direction: column;"> <a href="http://localhost"> <img src="./menu/01.png"/> </a> <a href="http://localhost"> <img src="./menu/02.png"/> </a> <a href="http://localhost"> </a></div>

flexbox その2

flexboxを改めてやる。以下のサイトの記事を読んだ。coliss.com flexアイテムとflexコンテナ flexコンテナは多数のflexアイテムを内包する。flexコンテナにしたい要素に display: flex;を設定する。 すると子要素は自動的にflexアイテムになる。 並べる方向 …

初歩的知識

以下を参照した。 saruwakakun.com display:inlineは大きさ変えられない。display:blockかdisplay:inline-blockにする必要あり。aタグ, spanタグ。 width:autoの決まり方 基本親要素まで広がる、%指定で親要素の何%かと言う決まり方になる(このときpadding, …

グラデーション

こちらのやり方にしたがってやってみた。ics.media しかし値の調節にこつがいるのかもしれない。 <html> <head> <meta charset="utf-8"> <style> body { } #bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* 背景グラデーションの作成 */ background: linear-gradient(to bo</meta></head></html>…

flexbox

flexboxを用いて、タイル表示をしてみる。以下を参考にした。 ics.media HTMLはヘッダーにメニューとmainにタイルとしてdivを置いた。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>title</title> <link rel="stylesheet" type="text/css" href="sample.css"> </head> <body> <header> <img src="hoge.png" alt=""> <ul> <li><a href="">item1</a></li></ul></header></body></html>

最初

htmlの最初 <html lang="ja"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> </body> </html>

canvasのサンプル

html5のcanvasで線を描く。 <head> <title>HTML5 canvas</title> </head> <body> <div align="center"> <h1>sample</h1> </div> <div align="center"> <canvas id="canvas" width="200" height="200" > <p>error</p> </canvas> </div> <script> var example = document.getElementById('canvas'); var context = e…</body>