ブログ内検索

micro:bitページ
とにかく速いブログサイトを目指す

カテゴリー : プログラミング/page-4

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

SOY CMSの開発秘話を投稿しました。→SOY CMSの開発秘話
 

Go言語で変数

変数を使ってみる。ここでは変数に5を代入して表示してみる。package mainfunc main() {var suji intsuji = 5print(suji)}varは変数をつくる前に入力するコード、sujiは値が入る箱のようなものにつける名前、intは整数を意味する。なので、sujiの部分には、いろんな数字を入れることができる。ここでは変数数字に5を代入して、printで出力する(実行は、ctrl+alt+b)。すると、5と表示される。※作った変数は必

 

php-webdriverでセレクトボックスの値を選択する2

<select name="Customer[area]" id="" class="input-pref"><option value="">都道府県名</option><option value="1">北海道</option><option value="2">青森県</option><option value="3">岩手県</option>&

 

Go言語でHello World

Go言語の環境の準備は下記の記事よりWindowsでGo言語workspace内にgoフォルダ(プログラミングの世界ではディレクトリと呼ぶ)を作る。Atomを開くと、Enter the path for the new file という文字が表示されるので、そこにmain.goと入力する。これで、goディレクトリの中に、main.goというファイルが出来上がった。main.goに下記のコードを記述。package mainfunc main() {}go言語のお約束で

 

妻にプログラミングを教えることにした-後編

妻にプログラミングを教えることにした-前編前回、妻にプログラミングを教えることにした背景を記載した。プログラミングを体験することによって、人に伝える前に内容を整理する習慣が付いて、整理するということが結果として様々な人達の業務改善に繋がると信じている。そして前回記載しなかった内容だけれども、もう一つ教えたい背景がある。それは、中学生向けのプログラミング教室で感じたことで、中学生にプログラミングを教えてみて。その1教えるということは、伝える前に対象を深く

 

妻にプログラミングを教えることにした-前編

パソコンを使う作業員のイラスト(女性) | かわいいフリー素材集 いらすとや前々からやりたいことに一つに女性向けのプログラミング教室がある。何故女性向けに話をしたいかというと、一時、市場調査を兼ねてハローワークに頻繁に立ち寄っていた時のこと事務職になりたい人が非常に多くいて、その割に求人募集がなく、事務職の倍率が3倍を越えていた事を知った。運良く事務職をやりたい人と出会うことが出来たので、何故様々な職種があるのに事務職になりたいのですか?と質問すると、私には特技が

 

php-webdriverでiframe内のリダイレクトに対応する

SOY CMSでは、ラベルブロックの設定あたりでiframeを開いて、iframe内でリダイレクトしながら設定を進める画面がある。iframeは以前にTinyMCEのところで操作方法を調べたので、iframe一ページ分であればなんとかなったけれども、php-webdriverでTinyMCEに値を挿入するiframe内でリダイレクトがあると、2枚目のページで指定した要素が見つからないというエラーに遭遇する。なんでだろうと試行錯誤試し

 

php-webdriverで現在開いているページのURLを取得する

php-webdriverで現在開いているページのURLを取得する必要が出てきた。SOY CMSの管理画面では、記事やラベルの詳細ページを開くとURLの末尾に各々のIDが付与されているため、URLから指定の記事、もしくはラベルのIDを取得するためにはURLを取得しなければならない。SOY CMSで標準ページでも任意のブログページのb_blockを使用できるようにしたというわけで、php-webdriverの公式Wikiを調べてみたところ、WebDriver

 

php-webdriverでTinyMCEに値を挿入する

php-webdriverでSOY CMSの記事作成画面のテストコードを作成する時に苦戦した。php-webdriverでconfirmダイアログをクリックするどこで苦戦したか?というと、記事作成画面の本文に値を入力するところで、SOY CMSの記事作成画面ではTinyMCEというWYSIWYGエディタを利用していて、SOY CMSの記事投稿画面でYouTubeの動画の挿入ボタンを追加しましたTinyMCE | The Most Advanced WYSI

 

SOY CMSの開発秘話前編

SOY CMSとは何ですか?WordPressとは何が違うのですか?と聞かれたのでまとめてみる。SOY CMS 公式サイト - 簡単便利で自由自在なオープンソースマーケティングプラットフォーム、無料で公開中[ソイ]日本語 — WordPressざっくりと言うと、SOY CMSはコンテンツマネージメントシステムなので、自身のサイトを持ったり、ブログページを作成したり、お問い合わせフォームを設置したりと、機能だけ見たら、WordPressと大差ないどころか

 

社会人・学生向けプログラミング教室でHTML Serviceの勉強会を行いました

社会人・学生向けプログラミング教室でGoogleスプレットシートの拡張の勉強会を行いましたの続きで、HTML ServiceとGoogleドキュメントとの連携でできる事を行いました。Google Apps ScriptのHTML Serviceを試してみたGoogle ドキュメント - オンラインでドキュメントを作成、編集できる無料サービスGoogleドキュメントでUIをどこまでカスタマイズできるのか?可能性を確認した上で業務改善の検討会等で新たなアイディ

 

WindowsでGo言語

Windows 10の環境でGo言語を使用することになったので、Windows 10でのGo言語の環境をメモとして残しておく。※今回の手順はGo言語で記載されたスクリプトの実行が確認できるまで。細かい設定は端折る環境Windows 10Go 1.9.4Git 2.16.1Atom 1.23.3はじめに使用しているWindows 10が64bitか調べておく。デスクトップ左下にあるウィンドウのアイコンにカーソルを合わせ、右クリックでメニュ

 

COMODO Internet Securityを利用しながらGoで書かれたプログラムを実行する

前回のWindowsでGo言語で64ビット版のWindows 10でGo言語の最小限の開発環境の構築方法をまとめた。残念なことにまとめた手順では私が利用しているパソコンでは動作することができなかった。動作しなかった要因は、利用しているアンチウィルスソフトのCOMODO Internet Security 10(以後COMODO)がGoで書いたスクリプトの実行をブロックすることによる。Free Internet Security | Why Comodo Interne

 

働きたくないイタチと言葉がわかるロボット

小中学生、大学生や社会人の方に向けてプログラミングの話をしているのですが、それに合わせて良い教材がないか?と本屋に行く度に楽しく読める本を探しています。中学生にプログラミングを教えてみて。その4社会人・学生向けプログラミング教室でGoogleスプレットシートの拡張の勉強会を行いましたそんな中でとても素晴らしい本に出会い、どうしても紹介したかったので、今回の記事を書き始めた。一つ目は、朝日出版社から出版された働きたくないイタチと言葉がわかるロボット(

 

Google Apps ScriptのHTML Serviceでファイルアップロードを行う

今まで、Google Apps Script(以後、GAS)で他のWebサービスと連携したり、OCRで画像から文字列を取得してみた。Google Apps ScriptのHTML ServiceでGoogle Calendarの予定を取得してみるGoogle Apps ScriptでJPEGの画像からOCRで画像内の文字列を取得してみたあと、Webアプリ開発として把握しておきたいことと言えば、ファイルのアップロード等を行うためのフォームだろう。というわけでマニュアルを

 

Google Apps ScriptでJPEGの画像からOCRで画像内の文字列を取得してみた

表題の通り、Google Apps Script(以後GAS)で、指定の画像から文字列を取得できるか?試してみた。Google Apps ScriptのHTML ServiceでGoogle Calendarの予定を取得してみる先に画像から文字列を取得あたりだけど、以前、Googleドキュメントで画像ファイルから文字列を抜き取ってみるの記事でGoogleドキュメントを活用して、画像から文字列を取得してみた。この技術を光学文字認識(Optical character r

 

Google Apps ScriptのHTML ServiceでGoogle Calendarの予定を取得してみる

Google Apps ScriptのHTML Serviceで自作した関数の結果を出力してみるで自作した関数の実行結果をHTML Serviceから出力されたページに表示してみた。これを踏まえた上で、Google Calendarの予定の表示を試してみる。コード.gsfunction doGet() {var html = HtmlService.createTemplateFromFile('index');return html.evalua

 

Google Apps ScriptのHTML Serviceで自作した関数の結果を出力してみる

詳解! Google Apps Script完全入門 ~Google Apps & G Suiteの最新プログラミングガイド~ - 秀和システム前回のGoogle Apps ScriptのHTML Serviceを試してみたでGoogle Apps Script(以後、GAS)のスクリプトエディタで作成したHTMLを出力したことを記載した。今回はGoogle Apps Scriptの可能性を知るために、HTMLを読み込み実行しているコード.gsの方で作成した自

 

Google Apps ScriptのHTML Serviceを試してみた

昨年末に出版された詳解! Google Apps Script完全入門 ~Google Apps & G Suiteの最新プログラミングガイド~ - 秀和システムが素晴らしいということで早速読んでみた。Google Apps Script(以後、GAS)は社会人・学生向けプログラミング教室でGoogleスプレットシートの拡張の勉強会を行いましたにあるようにプログラマでない人が大幅な業務改善を行う上で重要な技術となると確信している言語である。GASはJavaScri

 

社会人・学生向けプログラミング教室でGoogleスプレットシートの拡張の勉強会を行いました

社会人・学生向けプログラミング教室でGoogleフォームの拡張の勉強会を行いましたの続きで、Google DriveのGoogleスプレットシートを活用して、備品の管理と足りなければ調達の指示をメールで送信するといった業務アプリのようなものを作成してみました。Google ドライブ - 写真やドキュメントなど、ファイルのクラウド ストレージとバックアップGoogle スプレッドシート - オンラインでスプレッドシートを作成、編集できる無料サービスGoogleス

 

Node.js、Socket.IOとLet's Encryptでチャットアプリの常時SSL化

Node.jsSocket.IO以前、Node.jsとSocket.IOでリアルタイムのチャットアプリを作ってみた。チャットアプリを常時SSL化する必要が出てきたので、その時行った対応を記載する。Node.jsとSocket.IOでリアルタイムのチャットアプリを作ってみる常時SSL化はSEO上効果はあるか?常時SSL化をするにあたって、Let's Encrypt - Free SSL/TLS Certificatesいつもの通り、Let's Encryptを利用し

 

php-webdriverでconfirmダイアログをクリックする

php-webdriverでセレクトボックスの値を選択するから引き続きメモブラウザ上で何らかのボタンをクリックすると、上の画像のように確認用のダイアログが表示されて、このダイアログ上のボタンをクリックすることがあります。このダイアログのボタンをphp-webdriverでクリックするためには下記のようなコードを書けば良い。※今回は「退会する」リンクをクリックした時にconfirmのダイアログが表示される$driver->findElement(WebDr

 

php-webdriverでセレクトボックスの値を選択する

php-webdriverでtarget="_blank"付きのアンカータグ対策から引き続きメモ今回はセレクトボックスの値を選択してみる。セレクトボックスは今までのinputタグと異なり、セレクトボックスの場所を指定して、キーボード操作で値を選択するという形で、値の指定の際の操作が増える。該当する箇所のHTMLは<select name="Customer[area]" id="" class="input-pref"><optio

 

さくらVPSにJenkinsを入れて、Selenium + php-webdriverを動かせるようにする

さくらVPS上でSeleniumとphp-webdriverを利用する前回、さくらのVPSにSeleniumとphp-webdriverを実行するための環境を設けた。あとはJenkinsを入れるだけだ。環境さくらVPS 512Ubuntu 16.04Java 1.8.0_151Jenkins 2.76Selenium 3.7.1Xvfb バージョンの調べ方わからずChromeドライバ 2.33.506092Chromium 62.0

 

さくらVPS上でSeleniumとphp-webdriverを利用する

Selenium - Web Browser Automation最近の記事でSOY CMS / ShopのUIテストをSeleniumのGUI(Firefoxのアドオン)からFacebook製のphp-webdriverへと作り変えた。facebook/php-webdriver: A php client for webdriver.テストを作ったのは良いけれど、ローカル環境だとテスト中に他の作業ができなくなるので、さくらのVPSを借りてSeleniumを動かせる

 

php-webdriverでtarget="_blank"付きのアンカータグ対策

php-webdriverで任意のラジオボタンをチェックする前回より引き続き、Seleniumとphp-webdriverのメモ例えば、<a href="sample.html" id="link">リンク</a>というコードがあったとします。このリンクをクリックして他のページに遷移したい場合は、php-webdriverでは、$driver->getElement(WebDriverBy::linkText("リンク")

 

php-webdriverで任意のラジオボタンをチェックする

php-webdriverでSOY CMSにログインしてみる前回、任意の入力フォームを選んで値を入力して、任意のボタンを押すという動作をSeleniumとphp-webdriverで自動化してみた。UIテストの大体の動作は前々回のフォームの内容を取得すると合わせれば対応できるが、これでは対応できないものがあった。それは、性別などで使われるラジオボタンです。ラジオボタンのHTMLを抜き出してみると、<input type="radi

 

php-webdriverでSOY CMSにログインしてみる

php-webdriverで指定のフォームに値を入力してみる前回、Selenium + php-webdriverでSOY CMSのログイン画面でログインIDのフォームに値を入れ、フォームの値を取り出して端末上に書き出すという処理を書いてみた。今回はログインIDとパスワードを入力して、ログインボタンを押してログインを試してみる。実際のコードは下記の通り、※管理画面へログインできるアカウントをID、Pw共に「soycms」とします<?php

 

php-webdriverで指定のフォームに値を入力してみる

Seleniumとphp-webdriverでUIテストの自動化でSelenium、Chromeドライバとphp-webdriverをインストールした。今回は基本的な動作分を確認ワークスペースが~/workspace/soycms/で、テストコードはsoycmsディレクトリ以下にtestというディレクトリを作成して、テストコードを~/workspace/soycms/test/test.phpにしてファイルを作成してみる。※soycmsディレクトリ内にSOY CMSを

 

Seleniumとphp-webdriverでUIテストの自動化

アプリ開発において自動化しておきたいものにテストの自動化がある。今までSOY CMS / ShopはSeleniumのFirefoxプラグインでGUIで一つずつ動作を登録しながらUIのテストコードを作成していたけれども、Selenium - Web Browser AutomationJenkinsさんのお力を借りて、JenkinsさんにSeleniumを実行してもらうべく、PHPのコードでSeleniumのUIテストのコードを書き直すことにした。Jenk

 

社会人・学生向けプログラミング教室でGoogleフォームの拡張の勉強会を行いました

社会人・学生向けプログラミング教室でGASで業務改善の勉強会を行いましたの続きで、Google DriveのGoogleフォームをGAS(Google Apps Script)で自分好みにカスタマイズするという勉強会を行いました。Google ドライブ - 写真やドキュメントなど、ファイルのクラウド ストレージとバックアップGoogle フォーム - アンケートを作成、分析できる無料サービスGoogleフォームでお問い合わせフォームを設置すると、お問い

 

Node.js製のアプリをforeverで永続化する

UbuntuサーバでNode.jsのアプリの再起動に苦戦した時のメモ前回、Node.js製のアプリをVPSのサーバに置いて、サーバを再起動後にアプリも自動起動するように設定してみた。しかし、Node.jsというのは仕様上、何かのエラーがあるとアプリが止まってしまう。これは困るということで色々と調べてみたら、アプリを永続化するforeverというライブラリがあった。foreverjs/forever: A simple CLI tool for ensuring

 

UbuntuサーバでNode.jsのアプリの再起動に苦戦した時のメモ

Socket.IOのチャットアプリでXSS対策まででNode.jsでリアルタイムなチャットアプリの開発を見てきた。ある程度動作するようになったので、VPSサーバで実際に動かす段階になったので設置した。前回の記事以降、メッセージを投稿して、他のブラウザ宛にプッシュする直前でデータベースに保存し、表示しているブラウザをリロードしたらデータベースに保存しているやりとりを表示するという機能を付けている。chatdemo├── README.md├── _m

 

社会人・学生向けプログラミング教室でGASで業務改善の勉強会を行いました

社会人・学生向けプログラミング教室でコードレビューをしてみましたにも記載したとおり、以前からTera schoolで中学生向けのプログラミング教室と平行して、大学生・社会人向けにプログラミングの勉強会を行っています。今までJavaScriptで色々と触れてきたので、そろそろ日々の業務改善のためにGAS(Google Apps Script)に触れてみました。Apps Script | Google DevelopersGASを簡単に説明すると、

 

土壌分析アプリSoil3 on SOY Shop

以前から開発していた土壌分析アプリSoil2ですが、調査を兼ねて大幅に改修してSoil3を開発しました。※Soil3はSOY Shopのマイページの拡張として動作します土壌分析アプリsoil2 by GoSoil3でできることをまとめると、事業所や各ほ場を登録し、住所、面積やGoogle Mapsと連動して、位置情報とストリートビューの向きを設定する。これによりアプリを介して畑の土の色や周囲の情報を現地に行かずともある程度把握することができ

 

Socket.IOのチャットアプリでXSS対策

Socket.IOで個別チャットを作りたい後編今までSocket.IOでチャットアプリを作ってきたけれども、誰かが気軽に入力できて、他のブラウザで誰かから送信されたメッセージを表示できる。送信時にHTMLタグを入れたらどうなるのだろう?そこらへんはSocket.IOはどういう対応になるのだろう?と気になったので、<strong>で囲った文字列を投稿してみた。※<strong>で囲まれた文字列は強調文字(太文字)で表示され

 

Socket.IOで個別チャットを作りたい後編

Socket.IOで個別チャットを作りたい前編で、Socket.IOのnamespacesとroomsに触れた。namespacesを活用すれば個別チャットの仕組みを作れるのではないか?ということで下記の内容を試してみた。・hogeとhugaというnamespaceを作成・フロント側でランダムでhogeかhugaのどちらかでサーバに接続する。というわけでこれらを満たすコードを追加してみた。server.js/** serverの接続周りは省略 **/

 

Socket.IOで個別チャットを作りたい前編

Socket.IOのチャットアプリで誰が入力中なのかを出力したい前回までで簡易的なチャットアプリを作成することができた。この時点ではチャットのページを知っている人は誰でも参加することができてしまうため、AさんとBさんのみといったユーザを限定したチャットではない。直近の目標はLineやChatWorkのようにユーザを限定したメッセージのやりとりなので、ユーザを限定する方法というものを模索してみる。Socket.IOにはNamespacesとRooms

 

Socket.IOのチャットアプリで誰が入力中なのかを出力したい

Node.jsとSocket.IOでリアルタイムのチャットアプリを作ってみる前回、Node.jsとSocket.IOでリアルタイムでやりとりができるチャットアプリを作ってみた。Socket.IOのおかげで少ないコードでチャットアプリを作ることが出来たけれども、これだと世間で見られるチャットアプリとは程遠い。というわけで、前回の簡易版に追加でカスタマイズしていく形で、Socket.IOにより触れていくことにする。チャットアプリで欲しい機能といえば、

 

Node.jsとSocket.IOでリアルタイムのチャットアプリを作ってみる

先日、LineのようなチャットアプリをSOY Shopのマイページに組み込めませんか?と質問があったため、チャットアプリのことを調べてみた。最初に書いておくと、リアルタイムでやりとりを行えるチャットアプリの開発はSOY Shopで使用されているPHPという言語では面倒らしく、PHP - WikipediaNode.jsリアルタイムが得意なサーバサイドのJavaScriptであるNode.jsが得意らしい。よって、今回開発したチャットアプリを標準実装するのは

 

PHPでPythonの機械学習のライブラリを利用してみる

基肥について考えてみるまでの記事で基肥のデータをどのように持てば良いか?という話を書いてきた。答えはまだ出ていない。土地によっての例外が多すぎて混乱する。砂丘農業の土では腐植が溜まりにくいのか?それはさておき、自動計算を行うにあたって必要になってくるのが線形代数とその周辺の数学で、それらも今までの記事で書いてきた。中学生向けのプログラミング教室に関わり始めてから、数学力のなさを改善するため、数学の勉強を続けており、それと並行して計算機科学の勉強

 

PHPExcelを使ってみた2 ファイルアップロード編

前回、PHPExcelというライブラリを介してPHPでエクセルファイルを読み込んでみた。読み込みはファイルのパスを直打ちで指定しての対応で、これでは汎用性に欠けるということで今回はファイルのアップロードにも対応できるように改変してみた。先に改変したコードを載せると、<?php//ファイルがアップロードされた場合にエクセルファイルの読み込みを開始するif(count($_FILES)){//Classesディレクトリを配置したパスを指定$p

 

PHPExcelを使ってみた

大量にあるエクセルファイルからデータを抽出しなければならなくなって、PHPExcelというライブラリを使ってデータを取り出してみた。https://github.com/PHPOffice/PHPExcelとりあえず最初は簡単にファイルのパスがわかっているところから開発環境はUbuntu 17.04PHP 7.1.5準備として、XML、GDとArchive::Zipを入れる必要がある。端末を開き、下記のコマンドを実行sudo apt-get insta

 

BracketsのBeautifyでXMLファイルの自動整形を行わないようにする

SOY CMS/Shopの開発を今まではEclipseを使っていたけど、最近、Bracketsに移行することにした。理由は中学生向けのプログラミング教室でBracketsを勧めたからで、中学生にプログラミングを教えてみて。その1Eclipseが使いにくいというわけではなく、Eclipseでよく使用していた機能がBracketsにはなくて苦戦していることも多いです。乗り換えをした時のジレンマだと思って、苦戦は勉強の機会だと思い楽しむことにします。

 

Ubuntu版BracketsのBeautifyの設定

Brackets - A modern, open source code editor that understands web design.WebサイトやWebアプリのエディタでBracketsというものがあります。軽量且つ様々なプラグインでプログラミングが捗ります。Brackets(エディタ) - おすすめ - SOY CMSを使ってみようこのBracketsのプラグインの一つにBeautifyというファイルの保存時にコードを整形してくれるナイスな

 

基肥について考えてみる

集合と関数でベクトルが関数であり、プログラミングではリストであることがわかった。これを踏まえた上で各肥料を$fertilizer = array("in" => 0, "on" => 0, "wp" => 0, "cp" => 0, "wk" => 0, "price" => 800);こんな感じで保証成分をベクトルで持たせて予算に合わせて最適解をもたせれば良いということになる。肥料成分としての窒素(N)だけどちょっと待てよと凄腕栽

 

集合と関数

基肥の自動計算を考える前にでベクトルは関数であるという解釈を一度受け入れてしまえれば、応用の世界が目の前に開けると記載した。PHPでベクトルを作成して、関数として解釈してみようとしたけど、そもそも関数は何なの?ということでまとめてみる。数学の授業で関数を習った時、f(x) = x + 2で線形グラフを描写だった。これだと前回のベクトルを関数として捉えたり、プログラミングで関数を作成するといった時に迷う。というわけで、数学の概念としての関数とは何なのか?

 

基肥の自動計算を考える前に

基肥の自動計算に挑戦してみるで各肥料の構成をベクトルで持たせるということを記載した。各肥料の構成を決める前にベクトルについて触れておくことにしよう。ベクトルというのは要素が1つ以上の添数付きである集合の型で一次元配列のものを指す。マグロウヒル大学演習 離散数学 コンピュータサイエンスの基礎数学 | 理工学専門書,理学,数学 | Ohmsha p72ページより引用PHPで書いたら、$vec = array(2, 3, 5, 9);こんな感じですかね。添数は左から

 

基肥の自動計算に挑戦してみる

タイトルで自動計算に挑戦してみると記載していますが、全く出来ていません。これから考えます。そこのところはご了承下さい。ある日の会話で土壌分析の結果を継続的に保管するなら、基肥の自動計算もできるのではないか?という話題が挙がった。土壌分析アプリsoil2 by Go基肥で使用する各肥料の成分をベクトルで持たせ、線形計画法で最適な解を探し、その解と実際に施した量の差で教師ありの機械学習させ続ければ出来るのでは?なんてその時は思った。線形計画

 

社会人・学生向けプログラミング教室でコードレビューをしてみました

社会人・学生向けにプログラミング教室をはじめました以前からTera schoolで中学生向けのプログラミング教室と平行して、大学生・社会人向けにプログラミングの話をしています。プログラミングというのは、基本的な文法は難しくなく、文法自体の習得は難なくできる。だけどプログラミングが書けないという人が多いのはなぜなのだろう?と考えて、100行程度で簡単な名簿の登録と検索のコードをこちらで作成して、そのコードをみんなで見ながら1行ずつ何をしているか?を言

 

自由を求めてオープンソースのネットショップパッケージへ。軌道に乗った頃に遭遇する問題について

オープンソースのネットショップのCMSの開発に関わっていると、売上を青天井化したいから自由度の高いネットショップパッケージを利用したいという方の導入に関わることが時々あります。ネットショップの開発に関わっていて一番すごいと感じたサイトについて青天井化の方法を持っている方と仕事をするためにネットショップの開発をしている程ですから。私にとっての農業とSOY Shopネットで物販をするのであれば、楽天やYahooといったショッピングモール型サイトに出店したりとか、0円で


Powered by SOY CMS  ↑トップへ