はじめに 未来電子テクノロジーでインターンをしているにのみやです。 この記事では、一からwebページを作ってみる際に、「絵を描くように、ファイルを編集しながらプレビューしたい」と思って調べてみたことをまとめてみました。 プログラミングを始めて二週間ほどなので、間違いも多いと思います。 間違いがあれば、ぜひ教えてください。 STEP1 Live Serverをインストールする Live Serverにアクセスしてインストールします。 STEP2 セッティングする １．VSCode左上、ファイル内の自動保存を有効にします。 ２．右下の矢印の部分を「Go Live」にする ３．プレビューしたいHTMLファイル上で右クリックし、「Open in browser」をクリックします。 するとブラウザが開き、プレビューできるようになるので、画面分割モードなどにすることで編集しながらリアルタイムでプレビューできます。 ※画像ではわかりにくいですが、HTML/CSSファイルを編集して一秒くらいするとブラウザで変更が反映されます。 おわりに ざっと説明しましたが、「わかりにくい！」や「間違えている！」などのご意見がありましたらぜひ教えてください。
未来電子テクノロジーでインターンをしているにのみやです。
この記事では、一からwebページを作ってみる際に、「絵を描くように、ファイルを編集しながらプレビューしたい」と思って調べてみたことをまとめてみました。 プログラミングを始めて二週間ほどなので、間違いも多いと思います。 間違いがあれば、ぜひ教えてください。
Live Serverにアクセスしてインストールします。
１．VSCode左上、ファイル内の自動保存を有効にします。
２．右下の矢印の部分を「Go Live」にする
３．プレビューしたいHTMLファイル上で右クリックし、「Open in browser」をクリックします。
するとブラウザが開き、プレビューできるようになるので、画面分割モードなどにすることで編集しながらリアルタイムでプレビューできます。 ※画像ではわかりにくいですが、HTML/CSSファイルを編集して一秒くらいするとブラウザで変更が反映されます。
ざっと説明しましたが、「わかりにくい！」や「間違えている！」などのご意見がありましたらぜひ教えてください。
JQueryを使わずにheader・footerなどの共通のHTML文をJavaScriptで挿入する方法です。 といっても、innerHTMLで挿入するだけなんですけどね・・・ HTML index.html <!DOCTYPE html> <html> <head> <title>innerTest</title> <script type="text/javascript"> function header(){ var h = document.getElementById("header"); h.innerHTML = "HelloWorld"; } </script> </head> <body> <div id="header"></div> <script type="text/javascript">header();</script> </body> </html>
JQueryを使わずにheader・footerなどの共通のHTML文をJavaScriptで挿入する方法です。 といっても、innerHTMLで挿入するだけなんですけどね・・・
<!DOCTYPE html> <html> <head> <title>innerTest</title> <script type="text/javascript"> function header(){ var h = document.getElementById("header"); h.innerHTML = "HelloWorld"; } </script> </head> <body> <div id="header"></div> <script type="text/javascript">header();</script> </body> </html>
初めてまともにWebアプリを作ったから知見をまとめる 各リンク Flask関連 Flask-login関連 Flask-Bootstrap関連 Firebase関連 heroku関連 やったこと flaskのwebページ Firebaseに個人データを顔写真を格納 Flask-bootstrapを使ってレスポンシブ対応 Flask-Loginを使ってサイトの保護 学んだこと firebaseとpython間でのデータの送受信 flask-bootstrapを使ったhtml表記 herokuでアップロード 感想 勉強用でherokuを使ったが、普通にAWS or GCPを使うべきだった(個人アカウントを作りたくなかったから致し方無い) Flask-Loginが何度もログイン要請をしてくる訳が分からない。 バイトはデータ系なのでPython(Flask)で書いたが、JSとかGO言語とかを勉強したほうがよさそうだなと思った。
友人に頼まれ、先日初めてWebアプリを作ったので色々勉強したことをまとめておこうと思った。 バイトでpythonを使っている関係でFlaskで書いた。 Flaskの開発者はAprilフールの冗談でこのフレームワークを発案したらしいが、それを見た人が熱狂して結局作ったらしい。そんな細かい知識は面倒なので割愛して、いろいろまとめておく。 Flask基本 app.py from flask import Flask import os app = Flask(__name__) app.config = os.urandom(24) @app.route('/') def index(): return 'Hello World' @app.route('/flask') def home(): return 'Hello Flask' if __name__ == '__main__': app.run(host='127.0.0.1', port=5000, debug=True) マイクロフレームワークであるFlaskの中でも最も簡単なコードだと思われる。 ざっくり説明すると、変数appにFlaskクラスのオブジェクトを入れている。 configは一応設定用で書いたがこの場合必ずしも必要ではない。 @app.route('/')は、ルーティングを意味していて、つまりページのurlを示している。 この場合だと、http://127.0.0.1:5000 を開くと Hello Worldと返ってくるし、 http://127.0.0.1:5000/flask を開くと Hello Flaskと返ってくる。 app.run()でアプリがローカル上で立ち上がる仕組みになっている。 Flaskのディレクトリ構成 よくあるのが app.py ー application ー /config.py ー /view.py ー /model.py ー /templates ーー/layout.html ーー/home.html ー /static ーー/style.css みたいな感じ。 app.pyだけだと膨大なコードになって、不便なのでこんな感じで分けている。 app.py from application.view import app if __name__ == '__main__': app.run(host='127.0.0.1', port=5000, debug=True) applicationの中のviewからappを持ってくる。 config.py from flask import Flask import os app = Flask(__name) app.config = os.urandom(24) configはこういう設定系を置いておく view.py from .config import app @app.route('/') def index(): return 'Hello World' @app.route('/flask') def home(): return 'Hello Flask' viewは主にルーティングの処理とかを書く 因みにmodel.pyはクラスを書くことが多い。 templatesとJinja2 HTMLファイルを読み込むために、view.pyを書き換える。 view.py from .config import app from flask import render_template @app.route('/') def index(): return render_template('layout.html') @app.route('/flask') def home(): return render_template('home.html') これで、layout.htmlとhome.htmlをそれぞれ読み込める HTMLファイルを入れておくのがtemplatesディレクトリになる layout.html <h1>Hello World</h1> {% block body %}{% endblock %} home.html {% extends "layout.html" %} {% block body %} <h2>Hello Flask</h2> {% endblock %} 見ていただければ分かると思うが、layout.htmlの中に {% block body %} {% endblock %} とあり、home.htmlにも同様なものがある。 これがJinja2であり、{% extends "layout.html" %} によって、home.htmlはlayout.htmlからHello Worldを継承することができる。 model.pyについては、Flask_loginのページで書く。
友人に頼まれ、先日初めてWebアプリを作ったので色々勉強したことをまとめておこうと思った。
バイトでpythonを使っている関係でFlaskで書いた。 Flaskの開発者はAprilフールの冗談でこのフレームワークを発案したらしいが、それを見た人が熱狂して結局作ったらしい。そんな細かい知識は面倒なので割愛して、いろいろまとめておく。
from flask import Flask import os app = Flask(__name__) app.config = os.urandom(24) @app.route('/') def index(): return 'Hello World' @app.route('/flask') def home(): return 'Hello Flask' if __name__ == '__main__': app.run(host='127.0.0.1', port=5000, debug=True)
マイクロフレームワークであるFlaskの中でも最も簡単なコードだと思われる。 ざっくり説明すると、変数appにFlaskクラスのオブジェクトを入れている。 configは一応設定用で書いたがこの場合必ずしも必要ではない。
@app.route('/')は、ルーティングを意味していて、つまりページのurlを示している。 この場合だと、http://127.0.0.1:5000 を開くと Hello Worldと返ってくるし、 http://127.0.0.1:5000/flask を開くと Hello Flaskと返ってくる。
app.run()でアプリがローカル上で立ち上がる仕組みになっている。
よくあるのが app.py ー application ー /config.py ー /view.py ー /model.py ー /templates ーー/layout.html ーー/home.html ー /static ーー/style.css
みたいな感じ。
app.pyだけだと膨大なコードになって、不便なのでこんな感じで分けている。
from application.view import app if __name__ == '__main__': app.run(host='127.0.0.1', port=5000, debug=True)
applicationの中のviewからappを持ってくる。
from flask import Flask import os app = Flask(__name) app.config = os.urandom(24)
configはこういう設定系を置いておく
from .config import app @app.route('/') def index(): return 'Hello World' @app.route('/flask') def home(): return 'Hello Flask'
viewは主にルーティングの処理とかを書く
因みにmodel.pyはクラスを書くことが多い。
HTMLファイルを読み込むために、view.pyを書き換える。
from .config import app from flask import render_template @app.route('/') def index(): return render_template('layout.html') @app.route('/flask') def home(): return render_template('home.html')
これで、layout.htmlとhome.htmlをそれぞれ読み込める
HTMLファイルを入れておくのがtemplatesディレクトリになる
<h1>Hello World</h1> {% block body %}{% endblock %}
{% extends "layout.html" %} {% block body %} <h2>Hello Flask</h2> {% endblock %}
見ていただければ分かると思うが、layout.htmlの中に {% block body %} {% endblock %} とあり、home.htmlにも同様なものがある。
これがJinja2であり、{% extends "layout.html" %} によって、home.htmlはlayout.htmlからHello Worldを継承することができる。
model.pyについては、Flask_loginのページで書く。
ネットを介してのWebView表示ではなく、手元にあるHTMLをWebViewで表示、scriptタグ内のJSメソッドの呼び出し方法をまとめます。 SwiftでWebViewを表示させる場合、WKWebViewを使うことがほとんどだと思います。現在ではUIWebViewは非推奨です。そちらについては以下の記事がとても参考になります。 [参考元]：UIWebViewを使わない理由とWKWebViewを使う理由 環境 OS: Mojave 10.14.5 Xcode: 10.1 Swift 4.2 HTML 今回はindex.htmlをWKWebViewでロードし、<script>タグ内にあるJSメソッドを呼び出すことをします。 HTMLファイルはプロジェクト内に置きます。置き場は自由で構わないのですが、例として以下のように配置しておきます。 例 project ├─Resource │ ├index.html │ └sample.json │ └─View └SomeViewController HTMLのロード ローカルのHTMLファイルはパスを取得する必要があり、取得にはBundle.main.pathを使用します。 仕様ではBundle.main.pathはプロジェクトのBuild Setting > Copy Bundle Resourcesにあるファイルを取得するようです。 まずこの項目を確認し、取得したいHTMLファイルがなければ追加しておきましょう。 [参考元]：Swiftでプロジェクト内のファイルを取得する際の注意点2つ HTMLファイルのパスをURL型にキャストしてWebViewのloadFileURLの引数に与えます。これでWebViewにロードできました。 func loadLocalHTML() { guard let path: String = Bundle.main.path(forResource: "index", ofType: "html") else { return } let localHTMLUrl = URL(fileURLWithPath: path, isDirectory: false) webView.loadFileURL(localHTMLUrl, allowingReadAccessTo: localHTMLUrl) } Swift側からscript内のjsを実行 実行タイミング <script>タグにあるメソッドは、HTML全てがロードし終わってから呼び出さないとメソッド呼び出しに失敗します。 ロードが終わったことを通知するdelegateがWKNavigationDelegateにあります。 delegateの通知先は自分であることの宣言を忘れずに。 SomeViewContoller webView.navigationDelegate = self SomeViewController extension SomeViewController: WKNavigationDelegate { func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) { // ここでJSの実行をする } } JSの実行 evaluateJavaScriptを使います。引数のjavaScriptStringに、実行するメソッドをStringで渡します。 また、ここのStringではjsの文法で書く必要があります。jsの知見が乏しい筆者はここで躓きました。 [公式リファレンス]：evaluateJavaScript(_:completionHandler:) <script>の中身は以下のようなものと仮定して、initHTML関数に引数を渡し実行する方法を解説します。 <script> function initHTML(id, jsonData, onload) { console.log('initHTMLだお'); console.log(id, jsonData); onload(); } </script> 引数 Swiftは静的型付け、JSは動的型付けなので、ゆるい方向への値渡しです。 initHTMLの引数(id, jsonData, onload)は、Swift側ではそれぞれInt,Json,関数として渡します。 基本は文字列リテラル内での値の展開\()を使います。 Jsonに関しては、Jsonファイルを読み取ってData->Stringに変換して、値展開で渡しています。Stringで渡してもWebView側でJsonとして扱ってくれます。 関数はjsの書き方であるアロー関数を用いて書きましょう。 extension SomeViewController: WKNavigationDelegate { func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) { let intValue = 10 guard let json = getLocalJson() else { return } guard let strJson = String(data: json, encoding: .utf8) else { return } let script = "initHTML(\(intValue), \(strJson), () => { console.log('Swiftから渡された値だお') });" webView.evaluateJavaScript(script) { object, error in print(error ?? "成功") } } func getLocalJson() -> Data? { guard let path = Bundle.main.path(forResource: "sample", ofType: "json") else { return nil } let url = URL(fileURLWithPath: path) let json: Data? do { json = try Data(contentsOf: url) } catch { json = nil } return json } } コンソールの確認 JSの実行ができたらコンソールを確認しましょう。 しかしWebViewで実行したJSコンソールログはXcodeでは見れません。 ブラウザであるSafariで見ることができます。開発 -> 端末名 -> index.jsと選択するとWebインスペクターが開きます。 呼び出しがうまくいってログが出力されています！ 表示がない場合は左上らへんにある更新マークを押しましょう。 次回 WebViewのJS内でprojectのソース（画像とか）にアクセスしたときに発生するエラー、Orijin null is not byAccess-Control-Allow-Origin編に続く... WWDC19あとがき SwiftUIめっちゃすごい。iOSのUI回りに激震が走りましたね。 ここまでUIの作成ハードルが下がると我々iOSエンジニアの価値が相対的に下がっていくのでは… Combine frameworkの登場により、Rxライブラリは今後必要なくなるのかな。ただObserverパターンの考え方は必要なのでここはそれなりにハードルは依然高そう。 参考 iOS WKWebView ネイティブとローカルJavascript連携
ネットを介してのWebView表示ではなく、手元にあるHTMLをWebViewで表示、scriptタグ内のJSメソッドの呼び出し方法をまとめます。
SwiftでWebViewを表示させる場合、WKWebViewを使うことがほとんどだと思います。現在ではUIWebViewは非推奨です。そちらについては以下の記事がとても参考になります。 [参考元]：UIWebViewを使わない理由とWKWebViewを使う理由
OS: Mojave 10.14.5 Xcode: 10.1 Swift 4.2
今回はindex.htmlをWKWebViewでロードし、<script>タグ内にあるJSメソッドを呼び出すことをします。 HTMLファイルはプロジェクト内に置きます。置き場は自由で構わないのですが、例として以下のように配置しておきます。
<script>
project ├─Resource │ ├index.html │ └sample.json │ └─View └SomeViewController
ローカルのHTMLファイルはパスを取得する必要があり、取得にはBundle.main.pathを使用します。 仕様ではBundle.main.pathはプロジェクトのBuild Setting > Copy Bundle Resourcesにあるファイルを取得するようです。 まずこの項目を確認し、取得したいHTMLファイルがなければ追加しておきましょう。
Bundle.main.path
Build Setting
Copy Bundle Resources
[参考元]：Swiftでプロジェクト内のファイルを取得する際の注意点2つ
HTMLファイルのパスをURL型にキャストしてWebViewのloadFileURLの引数に与えます。これでWebViewにロードできました。
loadFileURL
func loadLocalHTML() { guard let path: String = Bundle.main.path(forResource: "index", ofType: "html") else { return } let localHTMLUrl = URL(fileURLWithPath: path, isDirectory: false) webView.loadFileURL(localHTMLUrl, allowingReadAccessTo: localHTMLUrl) }
<script>タグにあるメソッドは、HTML全てがロードし終わってから呼び出さないとメソッド呼び出しに失敗します。 ロードが終わったことを通知するdelegateがWKNavigationDelegateにあります。
WKNavigationDelegate
delegateの通知先は自分であることの宣言を忘れずに。
webView.navigationDelegate = self
extension SomeViewController: WKNavigationDelegate { func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) { // ここでJSの実行をする } }
evaluateJavaScriptを使います。引数のjavaScriptStringに、実行するメソッドをStringで渡します。 また、ここのStringではjsの文法で書く必要があります。jsの知見が乏しい筆者はここで躓きました。
evaluateJavaScript
javaScriptString
String
[公式リファレンス]：evaluateJavaScript(_:completionHandler:)
<script>の中身は以下のようなものと仮定して、initHTML関数に引数を渡し実行する方法を解説します。
<script> function initHTML(id, jsonData, onload) { console.log('initHTMLだお'); console.log(id, jsonData); onload(); } </script>
Swiftは静的型付け、JSは動的型付けなので、ゆるい方向への値渡しです。 initHTMLの引数(id, jsonData, onload)は、Swift側ではそれぞれInt,Json,関数として渡します。
基本は文字列リテラル内での値の展開\()を使います。 Jsonに関しては、Jsonファイルを読み取ってData->Stringに変換して、値展開で渡しています。Stringで渡してもWebView側でJsonとして扱ってくれます。 関数はjsの書き方であるアロー関数を用いて書きましょう。
\()
Data
extension SomeViewController: WKNavigationDelegate { func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) { let intValue = 10 guard let json = getLocalJson() else { return } guard let strJson = String(data: json, encoding: .utf8) else { return } let script = "initHTML(\(intValue), \(strJson), () => { console.log('Swiftから渡された値だお') });" webView.evaluateJavaScript(script) { object, error in print(error ?? "成功") } } func getLocalJson() -> Data? { guard let path = Bundle.main.path(forResource: "sample", ofType: "json") else { return nil } let url = URL(fileURLWithPath: path) let json: Data? do { json = try Data(contentsOf: url) } catch { json = nil } return json } }
JSの実行ができたらコンソールを確認しましょう。 しかしWebViewで実行したJSコンソールログはXcodeでは見れません。 ブラウザであるSafariで見ることができます。開発 -> 端末名 -> index.jsと選択するとWebインスペクターが開きます。
Safari
開発
端末名
index.js
呼び出しがうまくいってログが出力されています！ 表示がない場合は左上らへんにある更新マークを押しましょう。
WebViewのJS内でprojectのソース（画像とか）にアクセスしたときに発生するエラー、Orijin null is not byAccess-Control-Allow-Origin編に続く...
Orijin null is not byAccess-Control-Allow-Origin
SwiftUIめっちゃすごい。iOSのUI回りに激震が走りましたね。 ここまでUIの作成ハードルが下がると我々iOSエンジニアの価値が相対的に下がっていくのでは… Combine frameworkの登場により、Rxライブラリは今後必要なくなるのかな。ただObserverパターンの考え方は必要なのでここはそれなりにハードルは依然高そう。
iOS WKWebView ネイティブとローカルJavascript連携
概要 IEは<template>に対応していないため，<form>内に<input>を持つような<template>を配置してしまうと<template>内まで送信されてしまうことを回避する方法を紹介します． 状況 <form> <input type="text" id="input1"> <template> <input type="text" id="input[_new]"> </template> </form> この場合，IEでは<template>以下の<input type="text" id="input[_new]">まで送信されてしまいます． 回避方法 templateタグにdisabled属性を与える． 理由 IEでは，親タグがdisabled属性を持つと，disabled属性が子のタグまで伝搬する仕様を利用した手法です． 例えば <div> <input type="text" value="input1"> <input type="text" value="input2" disabled> </div> <div disabled> <input type="text" value="input3"> <input type="text" value="input4" disabled> </div> のようなHTMLを書くと，Chromeなどでは と，自身のdisabled属性の有無で判定されますが，IEでは と，親タグのdisabled属性が伝搬してしまいます．したがって<template>にdisabled属性を与えれば，<template>以下の要素はすべて送信されなくなります． まとめ IEでも動く<form>内に<template>を置く方法を紹介しました． この方法を用いると，<input>にrequired属性を加えていても動作するようになります． しかし，この方法はIEの特殊な仕様を用いているため，注意が必要です． そもそもIEが<template>に対応していればよいのですが...
IEは<template>に対応していないため，<form>内に<input>を持つような<template>を配置してしまうと<template>内まで送信されてしまうことを回避する方法を紹介します．
<form> <input type="text" id="input1"> <template> <input type="text" id="input[_new]"> </template> </form>
この場合，IEでは<template>以下の<input type="text" id="input[_new]">まで送信されてしまいます．
templateタグにdisabled属性を与える．
IEでは，親タグがdisabled属性を持つと，disabled属性が子のタグまで伝搬する仕様を利用した手法です． 例えば
<div> <input type="text" value="input1"> <input type="text" value="input2" disabled> </div> <div disabled> <input type="text" value="input3"> <input type="text" value="input4" disabled> </div>
のようなHTMLを書くと，Chromeなどでは
と，自身のdisabled属性の有無で判定されますが，IEでは
と，親タグのdisabled属性が伝搬してしまいます．したがって<template>にdisabled属性を与えれば，<template>以下の要素はすべて送信されなくなります．
IEでも動く<form>内に<template>を置く方法を紹介しました． この方法を用いると，<input>にrequired属性を加えていても動作するようになります． しかし，この方法はIEの特殊な仕様を用いているため，注意が必要です． そもそもIEが<template>に対応していればよいのですが...
