Vue.js の基本 (10)

vue

前回、プロパティを使用することでコンポーネントへ値を渡せることを確認しました。 しかし場合によっては、コンポーネントから親側へデータを渡したい場合もあるはずです。 その場合は、カスタムイベントを使用します。 普通の input タグの場合、値が変化…

Vue.js の基本 (9)

vue

前回に引き続きコンポーネントを見ていきたいと思います。 以下のような、タイトルとメッセージを表示するというシンプルなHTML部品があったとします。 これをコンポーネント化してみたいと思います。コンポーネントにすると、こうなります。 一番はじめのHT…

Vue.js の基本 (8)

vue

プログラミング言語が変わっても変わらないことがいくつかあると考えていますが、そのうちの1つが「大きいものは分割する」ということです。 部品、共通化、関数、クラス、モジュール、ライブラリ、コンポーネント、などなど昔から呼び方や粒度は様々ですが…

Vue.js の基本 (7)

vue

テキストボックスに数値を入れると、それを加算するという機能を実装するとします。 JavaScript(+JQuery) で普通に実装すると、こんな感じになるでしょうか。 テキストボックスになにか入力されたら、すべてのテキストボックスの値を足して、labelにその内容…

Vue.js の基本 (6)

vue

これまで何度も Vue はリアクティブだリアクティブだと書いてきました。 上記は ON/OFF のラジオボタンを選択することで、テキストボックスの有効/無効が切り替わります。 これは isOn というデータにもとづいてリアクティブに行われています。 ところで、デ…

Vue.js の基本 (5)

vue

ループは、どのようなプログラミング言語でもテンプレートエンジンでも備えられていますが、もう1つ備えられているものがあります。分岐です。 Vue にも分岐を行うための仕組みがあります。それが v-if 属性です。 非常にシンプルです。v-if 属性に指定した…

Vue.js の基本 (4)

vue

どのようなプログラミング言語でも、テンプレートエンジンでも、ループを行うための仕組みがあります。 Vue でそれを行うのは、v-for 属性です。なお Vue 独自の属性には、すべて v- というプレフィクスがついています。 データは list という配列で、要素は…

Vue.js の基本 (3)

vue

前回、テキストボックス、ラジオボタン、セレクトボックスについて、UI 要素と JavaScript のデータがひもづく-バインディングされる様を確認しました。 UI 要素には他にも、複数のデータとひもづくものがあります。チェックボックス、複数選択セレクトボッ…

Vue.js の基本 (2)

Vue.js を使用する場合の入力要素とのつなぎこみを見ていきたいと思います。 表示する場合は、ビューモデルデータを {{ }} という記法を用いて表示させることができました。 ユーザが入力した内容をビューモデルデータに反映させるためには、v-model という…

Vue.js の基本

vue

Vue.js は、公式ページにおいて Vue はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。 と説明されている通り、ユーザインタフェース - HTML(DOM) とその上で制御することに特化したフレームワークです。 提供される機能がユー…

Vue.js でリアクティブな動作を見る (2)

こちらが前回の例 ですが1つ書き忘れていたことがありました。 ラベルの表示内容はオブジェクト { name: '' } の name の変化に反応して変わるわけですが、 このオブジェクトのプロパティ name の値もまた、input タグの入力内容に反応して自動的に内容が書…

Vue.js でリアクティブな動作を見る

テキストボックスの内容を、別のラベルの中に転記したいとします。 jQuery を使った典型的なコードでは、以下のようになります。 これは、 テキストボックスへの入力が発生したら テキストボックスの要素を取得してそのvalue値を取得し ラベルの要素を取得し…

Selenium WebDriver を使う (C#) (3)

WebDriver を使ってよくやることをまとめます。 ブラウザのウィンドウを最大化する var url = "<任意のURL>"; driver.Manage().Window.Maximize(); 任意のURLに移動する var url = "<任意のURL>"; driver.Navigate().GoToUrl(url); 「戻る」操作を行う var u…

Selenium WebDriver を使う (C#) (2)

前回 は WebDriver を使ってブラウザを起動する方法を確認しました。 今回は HTML 要素の取得について確認します。 WebDriver で行えることは、「Web ページの操作」です。Web ページの操作の大部分は HTML の要素を操作することです。 つまり HTML の要素を…

Cloudflare で SSL

某違法サイトも利用していたという CDN のサービスが Cloudflare です。 CDN はコンテンツ配信のためのサーバネットワークで、閲覧者に近いサーバからコンテンツを配信することにより、読み込み速度向上や通信リソース節約などを目的とするものです。 この仕…

Selenium WebDriver を使う (C#) (1)

WebDriver を使って、ブラウザ(Chrome)の起動と簡単な操作を行ってみます。 環境は Windows Visual Studio 2017 です。 WebDriver は NuGet で入れられます。Selenium.WebDriver と Selenium.Chrome.WebDriver を入れます。 Selenium.WebDriver が主なライブ…

Selenium WebDriver を使う

めっきり冷え込んできた今日このごろです。 年末年始は強い寒波に見舞われるということで、防寒や交通などには注意する必要がありそうです。 さて、最近では Selenium という名前はだいぶ世間に浸透しているのではないかと思いますし、実際にご利用になられ…

今更ながら JSON のおさらい

一昔前(もっと前かもしれませんが..)には、データ交換のフォーマットといえば XML 、という時期がありました。 その流れで SOAP や WSDL 、BPEL 、ESB などが生まれましたが、複雑すぎたのか、堅すぎたのか、最近ではあまり見ることがありません。(大規模な…

WebSocket を試す

最近のブラウザではだいたい WebSocket が使用できますので、この機能を試してみたいと思います。 データの取得先は、リアルタイムといえば取引ということで、仮想通貨取引所 Bitmex の WebSocketAPI を使ってみます。

コマンドラインで Route53

EC2 のサーバで Web サイトを運用する場合、DNS には Route53 を利用される方もいらっしゃるかと思います。 Route53 は「可用性が高くスケーラブルなクラウドドメインネームシステム (DNS) ウェブサービス」(本家サイトより) です。 いくつかのドメインの We…

C# でチャットワークの API を使ってメッセージを投稿する

タイトルの通りです。 チャットワークには Web ベースの API が用意されており、それを使用することでプログラムからメッセージを投稿することができます。 今のところ認証は単一の API トークンによるもののみで、とてもシンプルです。 APIトークンはこちら…

C# で Worpdress の API を使って記事を投稿する

Wordpress に API が備わっていることはこれまでも記事で紹介していますが、今回は具体的に使う場合のコードのメモになります。 API では JSON でデータをやり取りしますので、DynamicJson を使用することにします。NuGet でインストールするかソースコード…

Redirect ディレクティブによるリダイレクト

ある URL にアクセスされた場合、それを別の URL に飛ばしたい場合があります。 それは内部的なものと外部的なものに分けられます。 内部的なものは、ある URL にアクセスされたときに、その URL を処理する機能を別の機能にまかせたいケースです。 Wordpres…

certbot-auto で ImportError: No module named cryptography.hazmat.bindings.openssl.binding エラー

AWS の EC2 で運用しているWebサイトがあり、そのサーバでは certbot-auto を使用してサイトのSSL化を行っていました。 先日、certbot-auto を使用してSSL証明書の作成を行おうとしたところ、以下のエラーが発生しました。 Upgrading certbot-auto 0.27.1 to…

XPath 基礎 (4)

XPath の基礎 (4) です。 XPath では、CSS ではできないような強力な選択を行うことができます。 これはテキストノードを使用できることがその主な要因であると感じます。 個人的によく使用するのが、「ある文字列が要素に含まれているか」という判断です。 …

XPath 基礎 (3)

XPath の基礎 (3) です。 //div[@name='hoge'] 上記のように書けば、name 属性が "hoge" であるすべての div タグを選択できます。 実は XPath には様々な省略記法があり、実は上記もその省略記法で書かれていて、省略しないで書くと以下のようになります。 …

XPath 基礎 (2) 属性値での指定

HTMLタグの属性値の値によって、何らかの要素を指定したい場合があります。 <div class="foo bar"> </div> <div id="hoge"> </div> <div name="hoge"> </div> CSS の場合、上記であれば、 以下のようなセレクタで指定できます。 .foo { ... } #hoge { ... } [name="hoge"] { ... } XPath の場合は、以下のようになります。 //div[cont…

XPath 基礎 (1)

みなさんもご存知の通り、Web ページは HTML で書かれています。 ですので、スクレイピングしたりクライアントサイドで動的なページを作ったりするときには、自分が処理したいその部分を何らかの方法で指定する必要があります。 jQuery 使いの方に馴染みが深…

Salesforce で You have uncommitted work pending エラー

Salesforce の Apex コードでは、外部のWebサービスを利用することができます。つまり HTTP リクエストを送信することができます。 これを Salesforce ではコールアウトと呼んでいます。 通常の Apex コードではコールアウトを行うことはできず、callout=tru…

MySQL をコマンドラインで使う

自動化するならコマンドラインですね。ということで、最近使った MySQL のコマンドラインを記録しておきます。 データベースを作成する mysql -u<ユーザID> -p<パスワード> -e "CREATE DATABASE <データベース名> CHARACTER SET utf8mb4" ※ -u と -p の後ろ…