2018-05-01から1ヶ月間の記事一覧
バグがある。 How to fix window.location issue in iOS9 UIWebview - Stack OverflowsetTimeOutで次のイベントループまでまって実行してやる必要がある。
iosのsafariの設定の詳細のwebインスペクタをON macのsafariの開発者モードでデバッグ
WebPackの開発用サーバを使う。 webpack-dev-serverをnpmでインストール。 webpack.config.jsに devServer: { contentBase: path.resolve(__dirname, 'app'), port: 3000 } を等と設定、また、outputのpublicPathも追加してcontentBaseに合わせておく(そうし…
履歴を調べて古かったらコピーするというスクリプトを書いてみた。 makefileの代わりに import sys import os import shutil import re # pathlistで指定したフォルダのファイルに対応するファイルがbasepath以下にある場合、basepathの方が古くなっていたら…
webpack plugin webpack pluginは apply(compiler) {} を持つクラスとして定義して、 webpack.config.jsにおいて plugins: [ new HelloPlugin() ] のように入れてやれば良い。 const pluginName = 'HelloPlugin'; class HelloPlugin { apply(compiler) { com…
サーバ確認 httpdはhttpデーモン このhttpデーモンがapacheか確認する。 httpd -v これがapacheと出たら つまりapacheのコマンド apachectl と同じということ。 コンフィグファイル(/httpd.conf)の場所を調べる。 httpd -V conf内の DocumentRootの場所を調…
javaプラグインの使用 build.gradle apply plugin: 'java' プロジェクトとタスク プロジェクトは複数のタスクから構成される。 タスク 分割不可能な作業単位 build.gradle task hello << { println 'Hello world!' } 実行は gradle -q hello -qはログの抑制 …
pathを絶対パスに変換してoutputで指定してやれば良い。 const path = require('path'); module.exports = { // or production mode: 'development', entry: { menu:'./src/main.ts'}, output: { path: path.resolve(__dirname, 'app/dist') },
ファイル移動 vm *.js ./tmp
このような感じで onKeypadOpen:() => { $(document).on("touchmove.noScroll", function(e:JQuery.Event) { e.preventDefault(); }) }, onKeypadClose:() => { $(document).off("touchmove.noScroll"); },
data-hogeで cssから参照は[data-hoge="fuga"]
1. interfaceを使ってメソッド拡張まがいなことができる。 2. objectの定義に{key?:string, key2?:number}等と?をつけると省略化になる。 3. thisの用法が違う。
Jquery plugin プラグインの例 jquery.hoge.js (function ($) { $.fn.hoge = function () { return $("p").click(function () { console.log("test!"); $(this).text("hello!"); }); }; })(jQuery); これをjqueryとともにhtml側で読み込んでおく。 タイプス…
どれくらいつかえるか Can I use... Support tables for HTML5, CSS3, etc
Webアプリ環境 npm パッケージマネージャ TypeScript 型付きのjavascrpt WebPack TypeScriptやHTMLのパーツ化のために使用 Babel (今回使わなかった。) JSのバージョン吸収 npm プロジェクトでパッケージ管理をスタートしたい場合 npm init ではじめられる。…
Vue.jsのサンプルを打ち込んでみた。 簡単につかえるようだ。 <div> <div id="app-2"> <span v-bind:title="message"> Hover your mouse over me for a few seconds to see my dynamically bound title! </span> </div> <div id="app-3"> <span v-if="seen">Now you see me</span> </div> <div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.…</li></ol></div></div>
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"; },…
参照フォルダとして追加したいものをプロジェクトにドラッグして参照フォルダして登録、 Bundleをみるとフォルダごとアプルに入ることがわかる。よってパスはBundle.main.bundlePathを起点に相対パスを追加していけば良い。
1. InputEventは型定義を読み込んだ。 npm install @types/dom-inputevent 2. 定義されてないものはinputEvent["inputType"]で取れた。 3. 定義していないプロパティも input["oldValue"] = input.value;で代入できた。 4. childNodesはArray.prototype.forE…
TypeScript https://ics.media/entry/16329 インストール typescript また、webpackで使用するために ts-loader もインストール 設定ファイル ルートにtsconfig.json { "compilerOptions": { "sourceMap": true, "target": "es5", "module": "es2015" // 出…
WebPack https://webpack.js.org/ 読み込んで使う。エントリーポイント //spc/index.js import bar from './bar'; bar(); 読み込まれる側 //src/bar.js export default function bar() { // } これを設定するにはwebpack.config.jsを作る。 const path = req…
npm パッケージ管理スタート npm init これでpackage.jsonが作成される。 ローカルインストールは /node_modules 内にインストールされる。 -gをつけるとグローバルインストール。 アンインストールは uninstall パッケージのアップデートは update パッケー…
とっかかりをつくってみた。 const toStr = (t) => { if (t == null) { return "null"; } else { return t.toString(); } } /** * * @param {Node} node * @returns {string} */ function nodeDesc(node) { const list = [node.nodeName, node.nodeType, nod…
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>
更に色々書いてみた。 /** * @type{HTMLDivElement} */ const listBox = document.getElementById("listBox"); const toStr = (t) => { if (t == null) { return "null"; } else { return t.toString(); } } /** * * @param {Node} node * @returns {string}…
色々javascriptを書いてみた /** * @type{HTMLDivElement} */ const d = document.getElementById("cell"); /** * @type{HTMLDivElement} */ const listBox = document.getElementById("listBox"); const toStr = (t) => { if (t == null) { return "null"; …
あっているかはわからない。 <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>
とほほのサイトに色々書いてある。 /*jshint esversion: 6 */ // import {hello_world} from "mymodule.js"; // http://www.tohoho-web.com/js/index.htm //document.write("Hello World") //alert("Hello world!!"); const id_container = "container"; ///…
