カテゴリー : プログラミング

SOY CMSマニュアルページ作成中

SOY CMSの開発秘話を投稿しました。→SOY CMSの開発秘話
ブログ内検索
 

php-webdriverでelement click interceptedのエラーに対して

Selenium + Jenkins + phpwebdriver + Chromiumのヘッドレスでテストの自動化を行っている。Jenkins + ヘッドレスChromeでテスト自動化の省力化先日、SOY CMSとSOY Shopに常に画面左下に設置されるメモウィジェットを設置して、テストにかけてみたら、PHP Fatal error: Uncaught Facebook\WebDriver\Exception\UnrecognizedExceptio...

Read More…

 

SOY ShopのオーダーカスタムフィールドでjQueryのDatepickerを使ってみる

配送と店舗受け取り型の形態のネットショップを運営予定の方から、カートのお支払い・配送方法の選択画面で、配送(上のキャプチャでは宅配便)と店舗受け取りを並べつつ、どちらの注文も同時に対応できるようにしたいという要望がありました。どちらか一方であれば、標準配送モジュールの複製と少々のカスタマイズで事足りるが、一つの注文で両方同時に選択したいという要望の為、プラグイン(モジュール)の複製では要件を満たさない。SOY Shopの配送モジュールのカスタマイズ例そこで、配送モ...

Read More…

 

SheetJSを試してみた

オライリーから出版されたReal World HTTP 歴史とコードに学ぶインターネットとウェブ接続の第2版が出たので、早速購入して読んでみた。この本はGoでHTTPを学べる良書で、サイト運営での表示の高速化をする上で知っておきたい内容が充実しているので、SEOをする上で絶対に読んでおいた方が良い。第2版になって、JavaScriptのXMLHttpRequestやCDNについての章が増え、JavaScriptの章を読んでいたら、XMLHttpRequest - Web API ...

Read More…

 

gRPC for PHPのインストール

Google AdsのMCCアカウントでキーワードプランナーを無料で使えるようにするまでの記事の続きで、Google Ads APIを使用するための手順を整理する。サービスの概要 | Google Ads API Beta | Google Developersに目を通すと、事前にgRPCを使えるようにしておいてほしいとのことで、gRPC for PHPのインストールを行う。※gRPCの仕組みは難しいので今回の記事では端折るgRPC – A high-performa...

Read More…

 

【SEO対策】他のCMS向けの総当り攻撃を避ける

今回の対策はSEOに直結するかわからないけれども、サイトを運営していてページの表示速度を下げる要因なので触れておく。とあるサイトを公開した後にアクセスログを確認したら衝撃的なログがあった。そのログというのが、https://example.com/wp-loginhttps://example.com/wp-adminへのアクセスだった。このサイトは世界ナンバーワンのシェアを誇る某CMSを使用していないので関係ないといえば関係ないけれども、アクセスログに上記のパスで埋...

Read More…

 

【SEO対策】Google Mapsの遅延出力

仕事内容 - saitodev.co当サイトの仕事紹介のページにiframeでGoogle Mapsを表示している個所がありますが、このGoogle Mapsの出力によって、PageSpeed Insightsの結果が80点台になっていました。今回の記事ではGoogle Mapsを遅延出力してみたらどうなるのか?を試した結果を紹介します。遅延出力する前に記載されていたコードは、iframe src="https://www.google.com...

Read More…

 

【SEO対策】最終産物のHTMLのキャッシュで高速化

SEO対策、データベースチューニングでサイトの表示速度を上げる為にはMySQL等のサーバ型のデータベースを採用して、サーバのメモリが許す限りデータベースにメモリ等の使用を振り分けるという内容を紹介しました。と紹介したものの、当サイトではデータベースはファイル型のSQLiteを使用しています。理由はSOY CMSを利用するであろうユーザのほとんどがMySQLがチューニング出来ないサーバを利用するはずで、SQLiteで高速化が出来なければ意味がないだろうと判断して、SQLiteを使用し続...

Read More…

 

【SEO対策】実行環境のバージョンを上げて高速化

SEO対策、キャッシュの利用でデータ転送量を削減までの記事では、ブラウザでサイトを見る時のブラウザからリクエストを送り、レスポンスが返ってくる時のデータの最適化を見てきたけれども、今回から新たな視点を加えてのSEO対策を見ていくことにする。Google製のWebサービスであるPageSpeed Insightsでスコアが100になるためには、ラボデータで各項目がオールグリーンになる必要がある。ここで最後まで苦戦したのが、インタラクティブになるまでの時間と初回入...

Read More…

 

SOY ShopのマイページのフォームでParsely.jsを使用する際に注意すること

本題に入る前に先にParsely.jsについて触れておくと、Parsely.jsお手軽に見栄えの良い入力内容のチェックを設置出来るJavaScriptのライブラリで、form data-parsley-validate上記のようにdata-parsely-validateと、必須にしたい項目にrequiredを付けるだけで設置が完了します。このライブラリをSOY Shopのマイページ等で使用する場合はひと工夫が必要になります。話を始める前にマイページ内のフ...

Read More…

 

pickadate.jsでHTML5のrequired属性を使いたい

pickadate.jsというスタイリッシュでレスポンシブなカレンダー形式の選択フォームを設置できるライブラリがある。packadate.jsこのライブラリを利用しつつ、HTML5のrequired属性を使用しなければならない状況に遭遇し設置に苦戦したので、今回はその時に対応した方法をメモとして残しておく。フォームデータの検証 - ウェブ開発を学ぶ | MDNpackadate.jsの仕様をよく読むと、/****************************...

Read More…

 

Ubuntu19.10でSelenium + php-webdriverが動作しなかった時の対処

Ubuntu19.10でテストの自動化の環境を作ろうと思ったけれども、環境を構築して実際に実行したけれども、/*****************************************************/拡張機能の読み込みエラー次の場所から拡張機能を読み込むことができませんでした:. マニフェスト ファイルが見つからないか読み取りません/*****************************************************/というエラーで実行...

Read More…

 

Ubuntu19.10でSnapのBracketsのライブプレビューが動作しなかった時の対処

表題の通り、UbuntuでSnap版のBracketsを入れたけれども、作成中のHTMLをライブプレビューで確認したら、Brackets - A modern, open source code editor that understands web design.Snappy - WikipediaChromiumが立ち上がった後、/****************************************************/ファイル...

Read More…

 

PHPのexec関数でセッションの値の引き継ぎに苦戦した時のメモ

Amazon Linuxでセッションの取扱で苦戦したのでメモとして残す。※今回の内容はAmazon Linuxとは関係ないかもしれないけれども、LAMPの環境のPHPの初期設定の注意点になるかもしれないので、OS名を晒しておく。※LAMP = Linux + Apache + MySQL + PHP(or Perl or Python)の環境の略LAMP - Wikipedia環境OS:Amazon Linux 2 AMIAmazon Linux 2(セキュアなLin...

Read More…

 

PHPで形態素解析エンジンのMaCabを使用する為の手順のメモ

PHPで形態素解析エンジンであるMeCabを使えるようにする為の手順をメモしておく。MeCab: Yet Another Part-of-Speech and Morphological AnalyzerMeCab - Wikipedia形態素解析 - Wikipedia環境OS:Ubuntu19.10Apache 2.4.41PHP 7.3.11-1+ubuntu19.10.1+deb.sury.org+6Server API FPM/FastCGI上記...

Read More…

 

Jenkins + ヘッドレスChromeでテスト自動化の省力化

SOY CMS / Shopの開発で、Jenkinsを利用してテストの自動化を行っている。※詳しい構成は下記のリンク先の記事に記載がある。さくらVPSにJenkinsを入れて、Selenium + php-webdriverを動かせるようにする機能を追加する度に負荷の高いテストコードを追加し続け、気がついたら、一回のビルドの所要時間が5時間を超えていた。1日3回ぐらいJenkinsがテストを行ってくれるので、1日15時間とテスト要因で人を雇ったらブ...

Read More…

 

PHPで並行処理

PHPで並行処理をしたい個所が出てきた。PHP: Hypertext Preprocessorデータベースに挿入するデータがタイムスタンプとそれに紐づく値で、データを挿入する順番を気にしなくても良いログのようなものだ。タイムスタンプは必ず0時0分0秒のものにして、重複する場合は挿入しないという仕様なので、片っ端からデータを突っ込もうとしてもデータベースに過剰にデータが挿入されるということはない。Go言語であればゴルーチンという素敵な仕様があるけれども、Go言語...

Read More…

 

さくらのVPSにUbuntu18.04を入れてSOY CMSを動かした時のメモ

以前、さくらのVPSでSOY CMSを動かした時のメモでさくらのVPSにUbuntuを入れて、SOY CMSの環境を構築した記事を投稿したけれど、古くなったので改めてまとめることにする。最終的な環境さくらのVPS 4GVPS(仮想専用サーバー)|さくらインターネット - 無料お試し実施中Ubuntu 18.04(16.04を入れた直後に速攻でアップグレード)Apache2.4.38PHP 7.3.3.1 FastCGIMySQL 5.7.25今回の話を...

Read More…

 

Go言語でKVSのRedisを使ってみる

Go言語で構築したサーバで複数台の構成にして、ロードバランサで負荷分散しなければならない状況になりそうだ。複数台にした時に問題になるのが、複数サーバ間でセッションのような値を共有したいという問題が発生する。どうにかできないかと検討してみたところ、https://redis.io/KVS(Key-Valueストア)のRedisであればできそうだということを思い出し、NoSQL - WikipediaGo言語でRedisの使い方を調べること...

Read More…

 

Go言語を使ってJSONから複数のデータを取得してみる

Go言語でJSON前回JSONから、秘密鍵などが入ったデータファイルをmain.goで読み込んだ。今回は、複数のデータの場合、どう呼び出すか試してみる。まず、sample.jsonに下記のコードを入力する。[{"id" : 1,"name" : "usako","reading" : "usano"},{"id" : 2,"name" : "kumata","reading" : "k...

Read More…

 

Go言語でJSON

JSONとは、JavaScript Object Notationの略で、テキストベースのデータフォーマットだ。***.jsonという形でデータファイルになる。秘密鍵などのデータを保存しておきたい時の設定ファイルとして使うことが多い。今回は、~/workspace/json/sample.jsonを作成し、下記の情報を入力する。{"id":1,"name":"usako","reading":"usano"}lsonファイルは、{ “項目”:値.....

Read More…

 

Go言語でGoogle Analyticsのデータをチャットワークに送ってみる

「植物のミカタ」のGoogle Analytics(以後GAと略す)から取得したpageviewsをチャットワークに送ってみる。今回は、前日のpageviewsと日付けを取得してみる。※pageviewsとは、閲覧されたページの合計数として定義される指標実際のコードを書く前に今回のコードで必要なライブラリを取得しておく。$ go get golang.org/x/oauth2$ go get google.golang.org/api/analytics/v3pa...

Read More…

 

妻がプログラミングをはじめてGo言語とQtでアプリを公開するまで

Go言語とQtで給与明細の計算機を作ってみたで記載した通り、今年の四月からプログラミングの勉強をはじめ、ちょうど半年が経過したところで、Go言語とQtでGUIアプリケーションの税金計算のアプリを公開した。実際に書いたコードはGitHubで管理して、下記のURLから開発したコードを確認することができる。https://github.com/ryoko-saito/payslip_on_restaurant_bizhttps://github.com/ryok...

Read More…

 

Go言語でsyncパッケージを使ってみる

O'Reilly Japan - Go言語による並行処理Go言語で並行処理についての本が出版されたので購入して読んでいる。この本よりも前にLambda Note GoならわかるシステムプログラミングGoでシステムプログラミングに触れる本でも並行処理について記載されていて、syncパッケージのWaitGroupやMutexが大事だという記載があり、説明文からもこれらが大事だということはわかるんだけれども、普段並行処理を書かない私にとってしっくりこなかった...

Read More…

 

Go言語で関数の練習問題③

r := generate()とする数字をランダムに出力するgenerate関数を作成する。package mainimport ("fmt")func main() {r:=generate()fmt.Println(r)}func generate() int {rand.Seed(time.Now().UnixNano())r := rand.Intn(10)return r}今回は、お題にr := gen...

Read More…

 

Go言語で関数の練習問題②

今回は、greet(name) にname := "うさこさん"と入力すれば、こんにちはうさこさんと出力する関数を作成してみる。package mainimport "fmt"func main() {name:="うさこさん”greet(name)}func greet(a string) {fmt.Println("こんにちはうさこさん”)}ここで作成する関数は、greet関数で、今回は、name := "うさこさん"と...

Read More…

 

Go言語で関数の練習問題①

関数を自分で作成する際、引数や返り値をどう設定すればよいのかわからなかったので、例題でどう書けばよいのか考えることにした。Go言語で関数Go言語でf(x) = x 2という関数を作ってみる。そこにx=3を代入して結果を表示してみる。package mainimport "fmt"func main() {x := 3y := f(x)fmt.Println(y)}// f(x) = x + 2という式を意味する関数func f(...

Read More…

 

Go言語でQtのQComboBoxを使ってみる

Go言語でQtのQComboBoxを作ってみる。QComboBox Class | Qt Widgets 5.11package mainimport ("os""github.com/therecipe/qt/widgets")func main() {app := widgets.NewQApplication(len(os.Args), os.Args)window := widgets.NewQMainWindow(nil,...

Read More…

 

Go言語とQtで計算フォームを作成してみる

Go言語とQtを使って、下記のような計算フォームを作成してみる。package mainimport ("os""strconv""github.com/therecipe/qt/widgets")//packageスコープ内に変数を定義しておくと、mainの中、外でも変数を使うことができるvar jikyuuInput *widgets.QLineEditvar jikanInput *widgets.QLineEditvar ...

Read More…

 

Go言語でQtのQGroupBoxとQGridLayoutを組み合わせたサンプル

QtのQGroupBoxとQtのQGridLayoutを使って、下記のような画面を作成してみる。Go言語でQtのQGroupBoxを使ってみるGo言語でQtでQGridLayoutを使ってみるpackage mainimport ("os""github.com/therecipe/qt/widgets")func main() {app := widgets.NewQApplication(len(os.Args), os.Ar...

Read More…

 

Go言語でQtのQLineEditを使ってみる

Go言語でQtのQLabelを使ってみるに引き続き、QtのQLineEditを使って、入力フォームを作成してみる。QLineEdit Class | Qt Widgets 5.11package mainimport ("os""github.com/therecipe/qt/widgets")func main() {app := widgets.NewQApplication(len(os.Args), os.Args)wi...

Read More…

 

Go言語の構造体2

前回のパッケージの関数とメソッド周りに引き続き、Go言語の構造体周りを見ていく。Go言語のパッケージの関数とメソッドについてQtのコードを見ていると、NewQMAinWIndowやらSetLayoutといったNew~、Set~という記述をよく見かける。これを理解するためには、構造体の仕組みをおさらいした方がよさそうなので、もう一度構造体について詳しくみていくことにする。Go言語でQtのQGroupBoxを使ってみる構造体は、一つの変数にどのような値のセットをもつか厳格に決...

Read More…

 

Go言語のパッケージの関数とメソッドについて

Go言語のパッケージについてもう一度みていく。Go言語でpackageGo言語で構造体のメソッドdir├── main.go└── pac└── pac.go上記のようにpacパッケージを作成し、nameとreadingフィールドを持ったPerson構造体を作成する。この構造体に関連した関数を作成してみる。pac/pac.gopackage pac//Person構造体を定義するtype Person struct {name...

Read More…

 

Go言語でQtのQBoxLayoutを使ってみる

Go言語でQtのQMainWindowを使ってみるに引き続き、今回はGo言語でQtのQBoxLayoutを使ってみる。QBoxLayout Class | Qt Widgets 5.11Qtのレイアウトについては下記の記事に記載してある。Qtのレイアウトについてpackage mainimport ("os""github.com/therecipe/qt/widgets")func main() {app := widget...

Read More…

 

Qtのレイアウトについて

Qtのレイアウトは、主に3つある。QBOXLayout、QGridLayout、QFormLayoutである。QBOXLayoutには、QHBOXLayoutとQVBOXLayoutの2つがある。QHBOXLayoutは、下記の図のようにウィジェットを水平に整列させる。Layout Management | Qt Widgets 5.11より抜粋QVBOXLayoutは、下記の図のようにウィジェットを垂直に整列させる。QGridLayoutは、グリッド...

Read More…

 

Go言語でQtのQMainWindowを使ってみる

Qtには、様々なクラス(部品のようなイメージ)がある。今回はメインウィンドウ(QMainWindow)のフレームワークを作成してみる。Qtのメインウィンドウのフレームワークは、下記のような構造になっている。QMainWindow Class | Qt Widgets 5.11より抜粋今回は、赤枠の部分(枠の内側は空)を作成してみる。実際のコードを書く前にGo言語で開発環境の構築の記事を載せておく。Go言語でQtを扱ってみる on UbuntuGo言語で...

Read More…

 

Go言語でQtを扱ってみる on Windows

Go言語でQtを扱ってみる on UbuntuでUbuntuでGo言語とQtの開発環境を用意した。続いて、Windows10でもGo言語とQtの開発環境を用意してみる。環境ASUS TransBook T304UOS : Windows10 64bitGo言語:1.11 linux/amd64Qt:5.11.1端末はgit bashを利用しているので、新規でMSYS2をインストールせず、git bashを使用する方向で話を進めます。git bashは下記の記事...

Read More…

 

Go言語でQtを扱ってみる on Ubuntu

Go言語はC言語のようなコンパイルとPython等のLL言語の両方の実行方法を持ちつつ、言語の仕様を削ぎ落として学習コストを下げつつ実行の高速化を保ち、更にはクロスコンパイルで一つのコードで様々なOSをサポートする。シンプルな故に開発の支援ツールも充実しているという特徴を持つ言語だが、デスクトップアプリ(GUI)の開発に弱いというイメージがある。敢えて弱くしているように見えるので以後は弱点とは言わないが、洗礼された言語を使っっているとやはりGUIアプリのコードを書...

Read More…

 

JavaScriptのAnalyzerNodeで音に反応して動きを変えてみる

JavaScriptのAnalyzerNodeで拾った音の周波数を可視化してみる3までの記事で、HTML5のWeb Audio APIにあるAnalyzerNodeでマイクから拾った音を周波数データとして取得してみた。今回はこのデータを使って、HTML5 Canvasで作成したアニメーションを制御してみる。はじめに音は関係なく、丸がただ動くだけのアニメーションを作成してみる。今回は前回のコードのdraw関数のみの修正となるので、実際に書いたコードもdraw関数のみ...

Read More…

 

Go言語とSQLiteでプリペアドステートメント

Go言語でINSERT文を書く時、直接user_idやpriceなどの変数を構文中に入れるとデータを消去されたり改変される危険性がある。これをSQLインジェクションと呼ぶ。SQLインジェクション - WikipediaSQLインジェクションを阻止するための方法にプリペアドステートメントがある。例として、下記のようなコードを記載する.package mainimport ("database/sql""log"_ "github.com/m...

Read More…

 

JavaScriptのAnalyzerNodeで拾った音の周波数を可視化してみる3

JavaScriptのAnalyzerNodeで拾った音の周波数を可視化してみる2前回の記事でWeb Audio APIのAnalyzerNodeを使って、マイクで拾った音から周波数データを取得してみた。実際に取得してみて、ハウリングが発生してという表現が正しいかわからないが、ファンファンファンという耳が痛くなるような音が鳴り出した。このハウリング対策として、マイクから音を拾う際にBiquadFilterというフィルターをかます。説明の前に実際のコードを書いて...

Read More…

 

Go言語とSQLiteでトランザクション

Go言語とSQLiteで下記のコードをトランザクションしてみる。トランザクションとは、分割不可な一連の処理を意味する。今回は、user_id=1のpriceから1000円を引き、user_id=2のpriceに1000円たすという処理を行うが、この時、途中でエラーが起こった場合は、どの処理もされないようにしたい。この時にトランザクションの仕組みを利用する。package mainimport ("database/sql""log""strconv"...

Read More…

 

JavaScriptのAnalyzerNodeで拾った音の周波数を可視化してみる2

前回のJavaScriptのAnalyzerNodeで拾った音の周波数を可視化してみる1で、数学が弱い生物系出身の自分が無謀ながらコンピュータにおける高速フーリエ変換に触れてしまった。フーリエ変換と言えば、世の中を劇的に変えたであろう偉大な数式を挙げろと言われたら必ず出てくるようなもので、身近でフーリエ変換によって出来たものと言えば、真っ先に挙がるのが音声データが保存されたCDだろう。オーケストラのCDをイメージしてみたらしい。円盤がくるくると周り、 ...

Read More…

 

Go言語でExcelからデータを取得する。

Go言語でExcelファイルからデータを取得する。まず、test.xlsxのExcelファイルを作成し、データを入れておく。下記のコードを書いてみる。package mainimport ("fmt""log""github.com/tealeg/xlsx")func main() {file, err := xlsx.OpenFile("test.xlsx")if err != nil {log.Fatal(err)}...

Read More…

 

JavaScriptのAnalyzerNodeで拾った音の周波数を可視化してみる1

JavaScriptのWeb Audio APIで録音してみるでHTML5のAPIを介して、ブラウザとマイクで音を拾って、wav形式の音声データとして保存してみた。それを踏まえた上で、今回はマイクで拾った音を他の処理で使えるように、音を周波数のデータとして取得してみる。取得の前に周波数のデータとして取得する為に必要なフーリエ変換について見てみることにする。といっても生物上がりで数学は得意ではないので、以後の開発で使える程度の概念程度を自分用のメモとして残す。 ...

Read More…

 

Go言語でExcel形式のファイルを作成

Go言語でExcel形式のファイルにデータを打ち込んでみる。最初に端末にgo get github.com/tealeg/xlsxでExcelをGo言語で作成するためのライブラリを取得しておく。GitHub - tealeg/xlsx: Google Go (golang) library for reading and writing XLSX files.次に下記のコードを入力する。package mainimport ("log""github....

Read More…

 

JavaScriptのWeb Audio APIで録音してみる

先日、パソコンの前で手を叩いたら、その音をキッカケにして動作するアプリは作れないかな?という意見が挙がった。というわけで、早速調べてみたところ、HTML5のAPIでWeb Audio APIをいう仕様を見つけた。Web Audio API - Web API インターフェイス | MDNというわけで、早速、上記のURLと下記のURLを参考にして録音アプリを作ってみた。ユーザーから音声データを取得する  |  Web |  Google Developers...

Read More…

 

Go言語とSQLite3でデータを取得する

前回の記事、Go言語とSQLでランダムの顧客10人の注文を10000件登録してみるで作成したtableから10件のデータを取得してみる。package mainimport ("database/sql""fmt""log"_ "github.com/mattn/go-sqlite3")func main() {db, err := sql.Open("sqlite3", "sample.db")if err != nil {...

Read More…

 

Go言語とSQLでランダムの顧客10人の注文を10000件登録してみる

Go言語とSQLiteでランダムの顧客10人の注文をランダムの金額1000~10000の範囲で10000件登録してみる。まず下記のコードを記載する。package mainimport ("database/sql""fmt""log""math/rand""strconv""time"_ "github.com/mattn/go-sqlite3"(//自動入力されないので、手打ちで入力する))func main() { ...

Read More…

 

Go言語のSQLiteドライバでデータを挿入してみる

はじめにGo言語でSQLiteを使えるようにするためにSQLiteのドライバーを取得しておく必要があるが、いつも使用しているGit Bashでは取得できないため、下記のURLからgit-sdkをダウンロードして、インストールしておく。https://github.com/git-for-windows/build-extra/releasesインストール後にデスクトップ上にMSYS2のアイコンが出来ているので、今回はmsys2から操作を行う。MSY...

Read More…

 

SQLiteで集計をしてみる

SOY Shopで実際に実稼働しているデータベースから齋藤という名前のつく人の注文回数を調べて一番注文した人をあげてみる。はじめにSOY Shopのデータベースのスキーマを確認する。スキーマは下記のURLから確認することが出来る。https://github.com/inunosinsi/soycms/blob/master/cms/soyshop/webapp/src/logic/init/sqlite.sql今回取得したいのは、注文のテーブル(soyshop_order)の注...

Read More…