仕事内容 - saitodev.co 当サイトの仕事紹介のページにiframeでGoogle Mapsを表示している個所がありますが、 このGoogle Mapsの出力によって、 PageSpeed Insightsの結果が80点台になっていました。 今回の記事ではGoogle Mapsを遅延出力してみたらどうなるのか？を試した結果を紹介します。 遅延出力する前に記載されていたコードは、 iframe src="https://www.google.com...
カテゴリー ： プログラミング
SOY CMS、SOY ShopとSOY Appの操作に関する質問を下記のページで受け付けています。
SOY CMS/Shopで標準機能だけでは実装が難しい時はお気軽にご相談下さい。
SOY CMSの開発秘話を投稿しました。→
SOY CMSの開発秘話
SEO対策、最終産物のHTMLのキャッシュで高速化
SEO対策、データベースチューニングでサイトの表示速度を上げる為にはMySQL等のサーバ型のデータベースを採用して、サーバのメモリが許す限りデータベースにメモリ等の使用を振り分けるという内容を紹介しました。 と紹介したものの、当サイトではデータベースはファイル型のSQLiteを使用しています。 理由はSOY CMSを利用するであろうユーザのほとんどがMySQLがチューニング出来ないサーバを利用するはずで、SQLiteで高速化が出来なければ意味がないだろうと判断して、SQLiteを使用し続...
SEO対策、実行環境のバージョンを上げて高速化
SEO対策、キャッシュの利用でデータ転送量を削減までの記事では、ブラウザでサイトを見る時のブラウザからリクエストを送り、レスポンスが返ってくる時のデータの最適化を見てきたけれども、今回から新たな視点を加えてのSEO対策を見ていくことにする。 Google製のWebサービスであるPageSpeed Insightsでスコアが100になるためには、 ラボデータで各項目がオールグリーンになる必要がある。 ここで最後まで苦戦したのが、インタラクティブになるまでの時間と初回入...
SOY ShopのマイページのフォームでParsely.jsを使用する際に注意すること
本題に入る前に先にParsely.jsについて触れておくと、 Parsely.js お手軽に見栄えの良い入力内容のチェックを設置出来るJavaScriptのライブラリで、 form data-parsley-validate 上記のようにdata-parsely-validateと、必須にしたい項目にrequiredを付けるだけで設置が完了します。 このライブラリをSOY Shopのマイページ等で使用する場合はひと工夫が必要になります。 話を始める前にマイページ内のフ...
pickadate.jsでHTML5のrequired属性を使いたい
pickadate.jsというスタイリッシュでレスポンシブなカレンダー形式の選択フォームを設置できるライブラリがある。 packadate.js このライブラリを利用しつつ、HTML5のrequired属性を使用しなければならない状況に遭遇し設置に苦戦したので、今回はその時に対応した方法をメモとして残しておく。 フォームデータの検証 - ウェブ開発を学ぶ | MDN packadate.jsの仕様をよく読むと、 /****************************...
Ubuntu19.10でSelenium + php-webdriverが動作しなかった時の対処
Ubuntu19.10でテストの自動化の環境を作ろうと思ったけれども、環境を構築して実際に実行したけれども、 /*****************************************************/ 拡張機能の読み込みエラー 次の場所から拡張機能を読み込むことができませんでした:. マニフェスト ファイルが見つからないか読み取りません /*****************************************************/ というエラーで実行...
Ubuntu19.10でSnapのBracketsのライブプレビューが動作しなかった時の対処
表題の通り、 UbuntuでSnap版のBracketsを入れたけれども、作成中のHTMLをライブプレビューで確認したら、 Brackets - A modern, open source code editor that understands web design. Snappy - Wikipedia Chromiumが立ち上がった後、 /****************************************************/ ファイル...
PHPのexec関数でセッションの値の引き継ぎに苦戦した時のメモ
Amazon Linuxでセッションの取扱で苦戦したのでメモとして残す。 ※今回の内容はAmazon Linuxとは関係ないかもしれないけれども、LAMPの環境のPHPの初期設定の注意点になるかもしれないので、OS名を晒しておく。 ※LAMP = Linux + Apache + MySQL + PHP(or Perl or Python)の環境の略 LAMP - Wikipedia 環境 OS：Amazon Linux 2 AMI Amazon Linux 2（セキュアなLin...
PHPで形態素解析エンジンのMaCabを使用する為の手順のメモ
PHPで形態素解析エンジンであるMeCabを使えるようにする為の手順をメモしておく。 MeCab: Yet Another Part-of-Speech and Morphological Analyzer MeCab - Wikipedia 形態素解析 - Wikipedia 環境 OS：Ubuntu19.10 Apache 2.4.41 PHP 7.3.11-1+ubuntu19.10.1+deb.sury.org+6 Server API FPM/FastCGI 上記...
Jenkins + ヘッドレスChromeでテスト自動化の省力化
SOY CMS / Shopの開発で、Jenkinsを利用してテストの自動化を行っている。 ※詳しい構成は下記のリンク先の記事に記載がある。 さくらVPSにJenkinsを入れて、Selenium + php-webdriverを動かせるようにする 機能を追加する度に負荷の高いテストコードを追加し続け、 気がついたら、一回のビルドの所要時間が5時間を超えていた。 1日3回ぐらいJenkinsがテストを行ってくれるので、 1日15時間とテスト要因で人を雇ったらブ...
PHPで並行処理
PHPで並行処理をしたい個所が出てきた。 PHP: Hypertext Preprocessor データベースに挿入するデータがタイムスタンプとそれに紐づく値で、データを挿入する順番を気にしなくても良いログのようなものだ。 タイムスタンプは必ず0時0分0秒のものにして、重複する場合は挿入しないという仕様なので、 片っ端からデータを突っ込もうとしてもデータベースに過剰にデータが挿入されるということはない。 Go言語であればゴルーチンという素敵な仕様があるけれども、 Go言語...
さくらのVPSにUbuntu18.04を入れてSOY CMSを動かした時のメモ
以前、さくらのVPSでSOY CMSを動かした時のメモでさくらのVPSにUbuntuを入れて、SOY CMSの環境を構築した記事を投稿したけれど、 古くなったので改めてまとめることにする。 最終的な環境 さくらのVPS 4G VPS（仮想専用サーバー）｜さくらインターネット - 無料お試し実施中 Ubuntu 18.04(16.04を入れた直後に速攻でアップグレード) Apache2.4.38 PHP 7.3.3.1 FastCGI MySQL 5.7.25 今回の話を...
Go言語でKVSのRedisを使ってみる
Go言語で構築したサーバで複数台の構成にして、 ロードバランサで負荷分散しなければならない状況になりそうだ。 複数台にした時に問題になるのが、 複数サーバ間でセッションのような値を共有したいという問題が発生する。 どうにかできないかと検討してみたところ、 https://redis.io/ KVS(Key-Valueストア)のRedisであればできそうだ ということを思い出し、 NoSQL - Wikipedia Go言語でRedisの使い方を調べること...
Go言語を使ってJSONから複数のデータを取得してみる
Go言語でJSON 前回JSONから、秘密鍵などが入ったデータファイルをmain.goで読み込んだ。 今回は、複数のデータの場合、どう呼び出すか試してみる。 まず、sample.jsonに下記のコードを入力する。 [ { "id" : 1, "name" : "usako", "reading" : "usano" }, { "id" : 2, "name" : "kumata", "reading" : "k...
Go言語でJSON
JSONとは、JavaScript Object Notationの略で、テキストベースのデータフォーマットだ。 ***.jsonという形でデータファイルになる。秘密鍵などのデータを保存しておきたい時の設定ファイルとして使うことが多い。 今回は、~/workspace/json/sample.jsonを作成し、下記の情報を入力する。 { "id":1, "name":"usako", "reading":"usano" } lsonファイルは、｛ “項目”：値.....
Go言語でGoogle Analyticsのデータをチャットワークに送ってみる
「植物のミカタ」のGoogle Analytics(以後GAと略す)から取得したpageviewsをチャットワークに送ってみる。 今回は、前日のpageviewsと日付けを取得してみる。 ※pageviewsとは、閲覧されたページの合計数として定義される指標 実際のコードを書く前に今回のコードで必要なライブラリを取得しておく。 $ go get golang.org/x/oauth2 $ go get google.golang.org/api/analytics/v3 pa...
妻がプログラミングをはじめてGo言語とQtでアプリを公開するまで
Go言語とQtで給与明細の計算機を作ってみたで記載した通り、 今年の四月からプログラミングの勉強をはじめ、 ちょうど半年が経過したところで、 Go言語とQtでGUIアプリケーションの税金計算のアプリを公開した。 実際に書いたコードはGitHubで管理して、 下記のURLから開発したコードを確認することができる。 https://github.com/ryoko-saito/payslip_on_restaurant_biz https://github.com/ryok...
Go言語でsyncパッケージを使ってみる
O'Reilly Japan - Go言語による並行処理 Go言語で並行処理についての本が出版されたので購入して読んでいる。 この本よりも前に Lambda Note Goならわかるシステムプログラミング Goでシステムプログラミングに触れる本でも並行処理について記載されていて、 syncパッケージのWaitGroupやMutexが大事だという記載があり、 説明文からもこれらが大事だということはわかるんだけれども、 普段並行処理を書かない私にとってしっくりこなかった...
Go言語で関数の練習問題③
r := generate()とする数字をランダムに出力するgenerate関数を作成する。 package main import ( "fmt" ) func main() { r:=generate() fmt.Println(r) } func generate() int { rand.Seed(time.Now().UnixNano()) r := rand.Intn(10) return r } 今回は、お題にr := gen...
Go言語で関数の練習問題②
今回は、greet(name) にname := "うさこさん"と入力すれば、こんにちはうさこさんと出力する関数を作成してみる。 package main import "fmt" func main() { name:="うさこさん” greet(name) } func greet(a string) { fmt.Println("こんにちはうさこさん”) } ここで作成する関数は、greet関数で、今回は、name := "うさこさん"と...
Go言語で関数の練習問題①
関数を自分で作成する際、引数や返り値をどう設定すればよいのかわからなかったので、例題でどう書けばよいのか考えることにした。 Go言語で関数 Go言語でf(x) = x 2という関数を作ってみる。そこにx=3を代入して結果を表示してみる。 package main import "fmt" func main() { x := 3 y := f(x) fmt.Println(y) } // f(x) = x + 2という式を意味する関数 func f(...
Go言語でQtのQComboBoxを使ってみる
Go言語でQtのQComboBoxを作ってみる。 QComboBox Class | Qt Widgets 5.11 package main import ( "os" "github.com/therecipe/qt/widgets" ) func main() { app := widgets.NewQApplication(len(os.Args), os.Args) window := widgets.NewQMainWindow(nil,...
Go言語とQtで計算フォームを作成してみる
Go言語とQtを使って、下記のような計算フォームを作成してみる。 package main import ( "os" "strconv" "github.com/therecipe/qt/widgets" ) //packageスコープ内に変数を定義しておくと、mainの中、外でも変数を使うことができる var jikyuuInput *widgets.QLineEdit var jikanInput *widgets.QLineEdit var ...
Go言語でQtのQGroupBoxとQGridLayoutを組み合わせたサンプル
QtのQGroupBoxとQtのQGridLayoutを使って、下記のような画面を作成してみる。 Go言語でQtのQGroupBoxを使ってみる Go言語でQtでQGridLayoutを使ってみる package main import ( "os" "github.com/therecipe/qt/widgets" ) func main() { app := widgets.NewQApplication(len(os.Args), os.Ar...
Go言語でQtのQLineEditを使ってみる
Go言語でQtのQLabelを使ってみるに引き続き、 QtのQLineEditを使って、入力フォームを作成してみる。 QLineEdit Class | Qt Widgets 5.11 package main import ( "os" "github.com/therecipe/qt/widgets" ) func main() { app := widgets.NewQApplication(len(os.Args), os.Args) wi...
Go言語の構造体２
前回のパッケージの関数とメソッド周りに引き続き、Go言語の構造体周りを見ていく。 Go言語のパッケージの関数とメソッドについて Qtのコードを見ていると、NewQMAinWIndowやらSetLayoutといったNew~、Set~という記述をよく見かける。これを理解するためには、構造体の仕組みをおさらいした方がよさそうなので、もう一度構造体について詳しくみていくことにする。 Go言語でQtのQGroupBoxを使ってみる 構造体は、一つの変数にどのような値のセットをもつか厳格に決...
Go言語のパッケージの関数とメソッドについて
Go言語のパッケージについてもう一度みていく。 Go言語でpackage Go言語で構造体のメソッド dir ├── main.go └── pac └── pac.go 上記のようにpacパッケージを作成し、nameとreadingフィールドを持ったPerson構造体を作成する。 この構造体に関連した関数を作成してみる。 pac/pac.go package pac//Person構造体を定義する type Person struct { name...
Go言語でQtのQBoxLayoutを使ってみる
Go言語でQtのQMainWindowを使ってみるに引き続き、 今回はGo言語でQtのQBoxLayoutを使ってみる。 QBoxLayout Class | Qt Widgets 5.11 Qtのレイアウトについては下記の記事に記載してある。 Qtのレイアウトについて package main import ( "os" "github.com/therecipe/qt/widgets" ) func main() { app := widget...
Qtのレイアウトについて
Qtのレイアウトは、主に3つある。 QBOXLayout、QGridLayout、QFormLayoutである。 QBOXLayoutには、QHBOXLayoutとQVBOXLayoutの２つがある。 QHBOXLayoutは、下記の図のようにウィジェットを水平に整列させる。 Layout Management | Qt Widgets 5.11より抜粋 QVBOXLayoutは、下記の図のようにウィジェットを垂直に整列させる。 QGridLayoutは、グリッド...
Go言語でQtのQMainWindowを使ってみる
Qtには、様々なクラス(部品のようなイメージ)がある。 今回はメインウィンドウ(QMainWindow)のフレームワークを作成してみる。 Qtのメインウィンドウのフレームワークは、下記のような構造になっている。 QMainWindow Class | Qt Widgets 5.11より抜粋 今回は、赤枠の部分(枠の内側は空)を作成してみる。 実際のコードを書く前にGo言語で開発環境の構築の記事を載せておく。 Go言語でQtを扱ってみる on Ubuntu Go言語で...
Go言語でQtを扱ってみる on Windows
Go言語でQtを扱ってみる on UbuntuでUbuntuでGo言語とQtの開発環境を用意した。 続いて、Windows10でもGo言語とQtの開発環境を用意してみる。 環境 ASUS TransBook T304U OS : Windows10 64bit Go言語：1.11 linux/amd64 Qt：5.11.1 端末はgit bashを利用しているので、新規でMSYS2をインストールせず、git bashを使用する方向で話を進めます。 git bashは下記の記事...
Go言語でQtを扱ってみる on Ubuntu
Go言語はC言語のようなコンパイルとPython等のLL言語の両方の実行方法を持ちつつ、 言語の仕様を削ぎ落として学習コストを下げつつ実行の高速化を保ち、 更にはクロスコンパイルで一つのコードで様々なOSをサポートする。 シンプルな故に開発の支援ツールも充実している という特徴を持つ言語だが、 デスクトップアプリ(GUI)の開発に弱いというイメージがある。 敢えて弱くしているように見えるので以後は弱点とは言わないが、 洗礼された言語を使っっているとやはりGUIアプリのコードを書...
JavaScriptのAnalyzerNodeで音に反応して動きを変えてみる
JavaScriptのAnalyzerNodeで拾った音の周波数を可視化してみる３までの記事で、 HTML5のWeb Audio APIにあるAnalyzerNodeでマイクから拾った音を周波数データとして取得してみた。 今回はこのデータを使って、 HTML5 Canvasで作成したアニメーションを制御してみる。 はじめに音は関係なく、丸がただ動くだけのアニメーションを作成してみる。 今回は前回のコードのdraw関数のみの修正となるので、 実際に書いたコードもdraw関数のみ...
Go言語とSQLiteでプリペアドステートメント
Go言語でINSERT文を書く時、直接user_idやpriceなどの変数を構文中に入れるとデータを消去されたり改変される危険性がある。 これをSQLインジェクションと呼ぶ。 SQLインジェクション - Wikipedia SQLインジェクションを阻止するための方法にプリペアドステートメントがある。 例として、下記のようなコードを記載する. package main import ( "database/sql" "log" _ "github.com/m...
JavaScriptのAnalyzerNodeで拾った音の周波数を可視化してみる３
JavaScriptのAnalyzerNodeで拾った音の周波数を可視化してみる２ 前回の記事でWeb Audio APIのAnalyzerNodeを使って、マイクで拾った音から周波数データを取得してみた。 実際に取得してみて、ハウリングが発生してという表現が正しいかわからないが、 ファンファンファンという耳が痛くなるような音が鳴り出した。 このハウリング対策として、 マイクから音を拾う際にBiquadFilterというフィルターをかます。 説明の前に実際のコードを書いて...
Go言語とSQLiteでトランザクション
Go言語とSQLiteで下記のコードをトランザクションしてみる。 トランザクションとは、分割不可な一連の処理を意味する。 今回は、user_id=1のpriceから1000円を引き、user_id＝2のpriceに1000円たすという処理を行うが、この時、途中でエラーが起こった場合は、どの処理もされないようにしたい。この時にトランザクションの仕組みを利用する。 package main import ( "database/sql" "log" "strconv" ...
JavaScriptのAnalyzerNodeで拾った音の周波数を可視化してみる２
前回のJavaScriptのAnalyzerNodeで拾った音の周波数を可視化してみる１で、 数学が弱い生物系出身の自分が無謀ながらコンピュータにおける高速フーリエ変換に触れてしまった。 フーリエ変換と言えば、 世の中を劇的に変えたであろう偉大な数式を挙げろと言われたら必ず出てくるようなもので、 身近でフーリエ変換によって出来たものと言えば、 真っ先に挙がるのが音声データが保存されたCDだろう。 オーケストラのCDをイメージしてみたらしい。 円盤がくるくると周り、 ...
Go言語でExcelからデータを取得する。
Go言語でExcelファイルからデータを取得する。 まず、test.xlsxのExcelファイルを作成し、データを入れておく。下記のコードを書いてみる。 package main import ( "fmt" "log" "github.com/tealeg/xlsx" ) func main() { file, err := xlsx.OpenFile("test.xlsx") if err != nil { log.Fatal(err) }...
JavaScriptのAnalyzerNodeで拾った音の周波数を可視化してみる１
JavaScriptのWeb Audio APIで録音してみるでHTML5のAPIを介して、 ブラウザとマイクで音を拾って、wav形式の音声データとして保存してみた。 それを踏まえた上で、 今回はマイクで拾った音を他の処理で使えるように、 音を周波数のデータとして取得してみる。 取得の前に周波数のデータとして取得する為に必要なフーリエ変換について見てみることにする。 といっても生物上がりで数学は得意ではないので、 以後の開発で使える程度の概念程度を自分用のメモとして残す。 ...
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 main import ( "log" "github....
JavaScriptのWeb Audio APIで録音してみる
先日、 パソコンの前で手を叩いたら、その音をキッカケにして動作するアプリは作れないかな？ という意見が挙がった。 というわけで、早速調べてみたところ、 HTML5のAPIでWeb Audio APIをいう仕様を見つけた。 Web Audio API - Web API インターフェイス | MDN というわけで、 早速、上記のURLと下記のURLを参考にして録音アプリを作ってみた。 ユーザーから音声データを取得する | Web | Google Developers...
Go言語とSQLite3でデータを取得する
前回の記事、Go言語とSQLでランダムの顧客10人の注文を10000件登録してみるで作成したtableから10件のデータを取得してみる。 package main import ( "database/sql" "fmt" "log" _ "github.com/mattn/go-sqlite3" ) func main() { db, err := sql.Open("sqlite3", "sample.db") if err != nil { ...
Go言語とSQLでランダムの顧客10人の注文を10000件登録してみる
Go言語とSQLiteでランダムの顧客10人の注文をランダムの金額1000~10000の範囲で10000件登録してみる。 まず下記のコードを記載する。 package main import ( "database/sql" "fmt" "log" "math/rand" "strconv" "time" _ "github.com/mattn/go-sqlite3"(//自動入力されないので、手打ちで入力する） ) func main() { ...
Go言語のSQLiteドライバでデータを挿入してみる
はじめにGo言語でSQLiteを使えるようにするためにSQLiteのドライバーを取得しておく必要があるが、 いつも使用しているGit Bashでは取得できないため、 下記のURLからgit-sdkをダウンロードして、インストールしておく。 https://github.com/git-for-windows/build-extra/releases インストール後に デスクトップ上にMSYS2のアイコンが出来ているので、 今回はmsys2から操作を行う。 MSY...
SQLiteで集計をしてみる
SOY Shopで実際に実稼働しているデータベースから齋藤という名前のつく人の注文回数を調べて一番注文した人をあげてみる。 はじめにSOY Shopのデータベースのスキーマを確認する。スキーマは下記のURLから確認することが出来る。 https://github.com/inunosinsi/soycms/blob/master/cms/soyshop/webapp/src/logic/init/sqlite.sql 今回取得したいのは、注文のテーブル(soyshop_order)の注...
Soil & Geoロガーで現在地の土質と地質を調べよう
スマホのAndroid端末で現在地の土質と地質を簡単に知ることが出来ないか？ とAndroidアプリの開発に挑戦してみた。 Go MobileでAndroidアプリの実行までを見てみる 最初はGo Mobileで開発しようとしたけれども、 Go Mobileはアニメーションが主体で、ボタンを設置するという簡単なアプリには今のところ不向きということで、 HTML5のService WorkerとIndexed Databaseを組み合わせて、 オフラインでも動作するWebアプリにし...
SQLiteのALTER文で新たなフィールドを追加してみる
まずsql構文で、category Tableを作成して、情報を追加する。 CREATE TABLE category( id INTERGER PRIMARY KEY AUTOINCREMENT, name VARCHAR(8) ); sqlite INSERT INTO category(name) VALUES('tanpopo'); sqlite INSERT INTO category(name) VALUES('asagao'); sqlite INSERT INT...
Go MobileでAndroidアプリの実行までを見てみる
Go言語のGo MobileでAndroidアプリを開発してみるの記事で、 Go言語でAndroidアプリの環境を整え、 UbuntuでAndroid Debug Bridgeを使ってみるまでの記事で、 Go言語で書いたAndroidアプリを実機かエミュレータで確認出来るところまで準備した。 それを踏まえた上で、 実際のコードを書いてみることにする。 今回は開発環境で動作の確認時にgo run main.goでウィンドウが立ち上がるところまで書いてみる。 コードは慣れの意味...
UbuntuでAndroid Debug Bridgeを使ってみる
Android Debug Bridge(通称：adb)は開発機とAndroid機(エミュレータ)間で通信できる便利なコマンドラインツールで、 開発機からAndroid機に開発したスマホアプリをデプロイ出来たりする。 Android Debug Bridge | Android Developers というわけで、ADBのインストールからAndroid機にアプリのデプロイまでやってみた。 開発機 Lenovo Ideapad 720S プラチナ CPU : AMD Ryz...
SQLiteでWHER句を使ってみる
前回の記事SQLiteでデータを入れて取り出してみるで、TABLEを作成した。 今回は、TABLEの中で、sql構文で部分的なデータを取得する。 まずは、名前だけを取得したい時は、 sqlite SELECT name FROM users;ryokokumausapaopomdorachan 名前と苗字の両方を取得したい時は、nameとfnameの間に','を入れる。 sqlite SELECT name, fname FROM users;ryoko|saitokuma|kumas...