/** Geminiが自動生成した概要 **/
SOY CMSのブログ記事JSON出力プラグインがアップデートされ、記事一覧の出力が容易になりました。
今回のアップデートにより、JSON出力に以下の値を含めることが可能になりました。
* 記事のパーマネントリンク
* 本文の一部または冒頭数文字
* サムネイル画像のパス
* カスタムフィールドの値
これらの値はGETパラメータで出力の有無を指定できます。これにより、JavaScriptでJSONを取得し、記事一覧を動的に生成することが可能になります。
例えば、記事のURL、本文の冒頭50文字、サムネイル画像のパスを含めたJSONを取得する場合は、以下のようなURLでアクセスします。
```
https://example/site/1.json?limit=1&content=50&is_url=1&thumbnail
```
アップデート版のプラグインは、以下のサイトからダウンロードできます。
https://saitodev.co/soycms/
/** Geminiが自動生成した概要 **/
療育施設に通う子供とその保護者を対象に、micro:bitとレゴを使ったプログラミング体験イベントを実施しました。サーボモーターを付けたレゴ作品に、ビジュアル言語でコードを書いてmicro:bitと接続し、回転動作をプログラミングしました。子供たちは馬や車など思い思いの作品を動かし、プログラミングの楽しさに触れました。キーボード操作やコード変更にも挑戦し、笑顔溢れるイベントとなりました。
/** Geminiが自動生成した概要 **/
SOY CMSのファイルアップロード制限をページごとに設定できるようになりました。記事投稿画面とファイルマネージャで許可するMIMEタイプを分けたいという要望に応え、設定ファイルにELFINDER_MODEという定数を追加。これにより、例えば記事投稿画面では画像ファイルのみ、ファイルマネージャではCSSやJSファイルのみ許可するといった設定が可能になりました。設定は /CMSインストールディレクトリ/common/config/upload.config.php 内でELFINDER_MODEの条件分岐を用いて$mimetypes配列を定義することで行います。最新のパッケージは公式サイトからダウンロードできます。
/** Geminiが自動生成した概要 **/
SOY ShopのSign In With Googleプラグインのボタンカスタマイズ方法について解説。Googleが提供するジェネレータを使用し、クライアントID、Data Context、ID token nonce、Callback functionを設定。Nextボタンをクリック後、Enable Sign in with Google buttonをチェックし、ボタンデザインを設定後、Get codeボタンを押下。生成されたHTMLをプラグイン詳細画面に貼り付けて更新することでカスタマイズ完了。
/** Geminiが自動生成した概要 **/
SOY ShopのGoogleログインプラグインが、Google Sign-In for WebsitesからSign In With Googleにアップデートされました。変更に伴い、HTMLタグやスクリプトを修正する必要があります。 以前は`googleUser.getBasicProfile()`でユーザー情報が取得できていましたが、現在はJWTが返却されるため、Base64デコードが必要です。`parseJwt`関数でJWTをデコードし、`json.email`でメールアドレスを取得します。 詳細はプラグイン詳細画面とサイト(saitodev.co/soycms/soyshop/)を参照してください。
/** Geminiが自動生成した概要 **/
Micro:bitとサーボモーターを用いて環境制御学習の第一歩を踏み出した著者は、サーボモーターの動作原理を学ぶため、LEGOブロックとミニフィグを使った回転実験を行った。MakeCodeで作成したコードでMicro:bitからサーボモーターに角度指令を送ると、90度を基準に、大きい値では反時計回り、小さい値では時計回りに回転する。しかし、指定角度で停止せず、一回転し続けるという問題に直面。これは、指令値が目標角度ではなく、一定時間内の回転角度を表すためであった。 著者は、サーボモーターの停止方法について疑問を抱いている。
/** Geminiが自動生成した概要 **/
SOY CMS/SOY Shopで、ファイルアップロード時のMIMEタイプ制限設定が追加されました。ユーザー要望に応え、記事作成、テンプレート、elFinderからのアップロード時に、JavaScriptファイルの許可やPDFの禁止等が可能になります。従来のバージョンアップでカスタマイズが消える問題も解消。設定は、`/CMSインストールディレクトリ/common/config/upload.config.php.sample`を`upload.config.php`にリネームし、許可するMIMEタイプを`$mimetypes`配列に追加するだけです。最新パッケージはサイト(https://saitodev.co/soycms/)からダウンロード可能です。
/** Geminiが自動生成した概要 **/
ChromebookでPythonの数学ライブラリNumPyと可視化ライブラリmatplotlibの動作検証を行いました。ASUS Chromebook Detachable CM3で、Linux環境を利用し、`sudo apt install`コマンドで必要なパッケージをインストールしました。TkinterのGUI表示、及び以前作成したmatplotlibを使ったコードの実行に成功。Windows10のWSL2環境ではGUI表示ができなかった一方で、Chromebookでは問題なく動作しました。今後はデータサイエンス向けプラットフォームAnacondaのChromebookでの動作検証も検討しています。
/** Geminiが自動生成した概要 **/
SOY CMSとSOY ShopにJavaScript製のコードエディタ「Ace」が導入されました。導入箇所は両CMSのテンプレート、HTMLモジュール、PHPモジュールの編集画面です。以前の色付きエディタはブラウザの進化への対応と動作の不安定さを理由に廃止されましたが、block:idタグの視認性向上のため、Aceが採用されました。現在はHTML/PHPモードのみですが、今後便利な機能の有効化を検討中です。最新版はsaitodev.co/soycms/からダウンロード可能です。
/** Geminiが自動生成した概要 **/
`executeScript`は、ChromeDriverでJavaScriptを実行するメソッドです。第一引数に実行するスクリプト、第二引数にオプションの引数配列を取ります。このメソッドは、ブラウザコンテキストでJavaScriptを実行し、その結果を返します。Aceエディタへの入力は、エディタオブジェクトの`setValue`メソッドをJavaScript経由で呼び出すことで実現できます。上記例では、`$script`に`setValue`呼び出しを定義し、`$html`をエディタに設定しています。`executeScript`の第二引数配列は、`$script`内の`arguments`オブジェクトにマッピングされます。これにより、PHPからJavaScript関数をパラメータ付きで実行できます。
/** Geminiが自動生成した概要 **/
使い捨てURLのQRコードをBootstrapのモーダル内に表示する際、QRCode.jsで生成したQRコードのセンタリングに苦労した。QRCode.jsは簡単にQRコードを生成できるが、出力される<div>内の<img>タグの幅が100%になるため、`text-center`クラスが効かない。DOMで出力された<canvas>タグのサイズに合わせて、<div id="qrcode">に`style="width:128px;margin:0 auto;"`を指定することで、QRコードをモーダル中央に表示できた。
/** Geminiが自動生成した概要 **/
OpenStreetMapとLeafletを使って地図上にカスタムアイコンを表示する方法を紹介しています。 シンプルなマーカー設置では、L.icon()でアイコンオブジェクトを作成し、L.marker()のオプションで指定します。 L.geoJSONを使う場合は、GeoJSONデータのpropertiesにiconオブジェクトを追加し、pointToLayerオプションで条件分岐することで、特定のマーカーのみカスタムアイコンに変更できます。 記事では、摂津峡のマーカーにnature.pngというカスタムアイコンを設定する例を示しています。
/** Geminiが自動生成した概要 **/
SOY CMSのブログとOpenStreetMapで地図アプリを作る手順は以下の通り。カスタムサーチフィールドで緯度(lat)・経度(lng)フィールドを作成し、地図ラベルを設定。地図出力ページを作成し、OpenStreetMap + LeafletのHTMLを貼り付ける。JavaScript内のマーカー情報をSOY CMSのタグに置き換え、記事タイトル、URL、緯度経度を動的に表示。標準ページに地図ラベルの記事一覧を表示する設定を行い、緯度経度情報付きの記事を投稿すれば、記事の位置にマーカーが設置された地図が自動的に生成される。
/** Geminiが自動生成した概要 **/
OpenStreetMapとLeafletを用いて地図上にマーカーを設置し、クリックイベントを追加する方法について解説しています。
まず、Leafletで地図上にマーカーを設置する基本的なコードを示し、クリックイベントを追加するために`L.geoJSON`を使用する方法を説明しています。`L.geoJSON`の第二引数に`onEachFeature`オプションを渡すことで、マーカーごとにクリックイベントを設定できます。
記事では、クリックイベント発生時に任意のURLへ遷移する例を挙げており、PCとスマホそれぞれでクリックとタップイベントに対応するコードを記述しています。
/** Geminiが自動生成した概要 **/
この記事では、Google Maps JavaScript APIの代わりにOpenStreetMapとLeafletを使って地図を表示する方法を紹介しています。OpenStreetMapは無料で利用でき、Leafletは簡単に地図を表示できるJavaScriptライブラリです。
記事では、大阪府高槻市の摂津峡を例に、緯度経度を指定して地図を表示し、マーカーを設置する手順をコード付きで解説しています。結果として、少ないコードで簡単に地図上にマーカーを表示することができました。
/** Geminiが自動生成した概要 **/
SOY2では、XSS対策としてhtmlspecialcharsを簡便に利用できるHTMLLabelを提供している。記事では、HTMLLabelの基本的な使い方と、soy:idを用いた動的な値の表示方法を解説。HTMLLabelはHTMLタグを自動的にエスケープし、安全に値を表示。例として、ブログ記事のタイトルを表示するコードを紹介し、HTMLLabelを用いることで、タイトルに含まれるHTMLタグがエスケープされ、XSS脆弱性を防ぐ様子を示している。また、HTMLLabelの子要素としてHTMLタグを記述することで、特定のタグを許可することも可能。記事は、HTMLLabelがSOY2でのXSS対策に効果的であることを示唆。
/** Geminiが自動生成した概要 **/
SOY Shop 2にHTMLキャッシュプラグインが追加され、高速化が可能になった。カートウィジェットの問題は非同期通信で解決し、カート内商品数と合計金額をJSONで取得できる。ヤマトリップショップではこの機能とLazyLoadプラグイン、jpegoptimにより、ページ表示速度が3.3秒から1秒以下になり、PageSpeed InsightsのスコアもPCで90を超えた。スマホは90に届かなかったが、Gueztliによる画像最適化で改善が見込まれる。SOY Shop 2正式版は近日公開予定。
/** Geminiが自動生成した概要 **/
SeleniumとJenkins、php-webdriver、ヘッドレスChromiumでテスト自動化中に、メモウィジェットが原因でelement click interceptedエラーが発生。ヘッドレスモードで画面サイズが不足し、対象ボタンが隠れていたのが原因。ウィンドウサイズを`1024x2048`に設定することで一時的に解決したが、ページサイズに依存するこの方法は最適ではない。スクロールによる解決策も検討されたが、最終的にはCSSを修正し、メモウィジェットが他のボタンと重ならないように調整することで根本解決した。
/** Geminiが自動生成した概要 **/
SheetJSは、ブラウザ上でHTMLテーブルから簡単にExcelファイルを生成できるJavaScriptライブラリです。デモを改修し、テーブル要素を指定して`XLSX.utils.table_to_book`でブックオブジェクトを生成、`XLSX.writeFile`でExcelファイル(xlsx)として出力する簡単なコードで実装できます。 表示されたHTMLテーブルのダウンロードボタンをクリックするだけで、テーブル構造を保持したExcelファイルがダウンロードされます。著者は従来PHPのPhpSpreadSheetを使用していましたが、SheetJSも選択肢に加えるとのことです。
/** Geminiが自動生成した概要 **/
PageSpeed Insightsのスコア向上のため、公式SNSボタンを自作のものに置き換えた。公式ボタンはJavaScriptを使用し、ページ速度に悪影響を与えていた。記事詳細ページのTwitterボタンを例に、自作方法を紹介。HTMLでは`<a>`タグでツイートリンクを作成し、記事タイトルとURLを動的に設定。CSSでボタンのスタイルを定義。SOY CMSでは`cms:id="title_plain"`と`cms:id="entry_url"`を用いて記事タイトルとURLを取得し、JavaScriptを使わずにツイートボタンを実装。これにより、ページ読み込み速度が向上し、PageSpeed Insightsのスコアも改善された。
/** Geminiが自動生成した概要 **/
SEO対策として、データ転送量削減のためブラウザキャッシュを活用する方法を解説。HTML以外のファイルは一度取得すれば再取得不要なため、ApacheのExpiresモジュールでブラウザにキャッシュさせる。Ubuntu環境でApache2.4を前提に、a2enmod expiresコマンドでモジュールを有効化し、.htaccessにファイルタイプごとにキャッシュ期間を設定する記述を追加すれば完了。HTMLは即時、CSS/JavaScriptは10日間、画像は15日間キャッシュされるようになる。
/** Geminiが自動生成した概要 **/
SOY InquiryにParsley.jsを組み込むと、見栄えの良い入力内容チェックが利用できます。フォームテンプレートにParsley.jsのスクリプトを挿入し、SOY Inquiryのフォーム設定画面で各項目にdata-parsely-triggerとrequired属性を設定します。さらに、data-parsely-required-message属性を追加すると、エラーメッセージをカスタマイズできます。これにより、各項目に合わせたエラーメッセージが表示され、ユーザーフレンドリーなフォームが作成できます。
/** Geminiが自動生成した概要 **/
SOY2HTMLでセキュアなフォームを設置するには、csrf_tokenを利用する。HTMLFormクラスでformタグを出力すると自動的にトークンが埋め込まれる。トークンはセッションに保存され、送信時に検証されるため、クロスサイトリクエストフォージェリを防げる。 独自にformタグを作成する場合は、soy:id="csrf"でトークンを埋め込む必要がある。また、JavaScriptで非同期通信を行う場合も、トークンをヘッダーやパラメータに含める必要がある。トークンの有効期限は短いため、フォームの送信に時間がかかる場合は注意が必要。これらの対策により、安全なフォームを実現できる。
/** Geminiが自動生成した概要 **/
SOY InquiryがGoogle reCAPTCHA v3に対応しました。reCAPTCHA v3は、ユーザーの行動を分析してボットを判別する仕組みで、従来の文字入力やチェックボックス操作は不要です。SOY CMSのプラグインとして提供され、有効化するとサイト右下にreCAPTCHAロゴが表示されます。v3は学習ベースで精度が向上するため、初期は精度が低い可能性があります. 現時点ではJavaScript無効環境への対策は未対応です。最新版は公式サイトからダウンロード可能です。関連記事では、同一IPからの連続問い合わせをブロックする方法を紹介しています。
/** Geminiが自動生成した概要 **/
SOY ShopのGoogle Sign-In for Websitesプラグインにボタン拡張設定が追加されました。従来のシンプルなログインボタンに加え、JavaScriptでカスタマイズ可能なボタンを実装できます。管理画面のサンプルコードを元に、大きさやデザインを自由に調整可能です。この拡張により、カートページ等のデザインとの調和が容易になり、より柔軟なサイト構築が可能になります。更新版プラグインはsaitodev.co/soycms/soyshop/からダウンロードできます。
/** Geminiが自動生成した概要 **/
SOY CMS/Shopのバージョンアップ後、キャッシュ削除忘れによる不具合報告が相次いだため、自動削除機能が追加されました。バージョンアップで外部ファイルの読み込み箇所などが変更されると、古いキャッシュが残っているとJavaScriptが実行されないなどの問題が発生します。新機能では、管理画面を開いた際に古いキャッシュを自動で削除します。この機能を含む最新パッケージはsaitodev.co/soycms/からダウンロードできます。
/** Geminiが自動生成した概要 **/
Go言語でJSONを扱う方法について解説されています。 `sample.json`ファイルにID、名前、読み仮名などのデータを保存し、`main.go`でそのデータを読み込んで利用する方法が示されています。 `ioutil.ReadFile`でJSONファイルを読み込み、`json.Unmarshal`でGoの構造体`Sample`に変換します。`Sample`構造体はJSONデータのキーに対応するフィールドを持ちます。変換後、`sample.Name`のようにアクセスすることで、JSONデータの値を取得できます。
/** Geminiが自動生成した概要 **/
妻にプログラミングを教えた動機は、事務職希望の女性こそプログラミングスキルを身につけるべきだという考えに基づいている。事務作業はルーティン化しやすい反面、変化への対応が求められる。プログラミングは論理的思考力や問題解決能力を養い、変化への対応力を高める。これらは事務職で役立つだけでなく、キャリアの幅を広げる可能性も秘めている。妻は最初の実験台であり、私自身にとっても新たな言語を教える貴重な経験となった。将来的には、プログラミング教育の普及を通じて、女性がより活躍できる社会を目指したいと考えている。
/** Geminiが自動生成した概要 **/
SOY CMSのブログで、長年の運用による月別アーカイブの増加でデザインが崩れる問題を解決するブログブロックが追加されました。従来の縦に長いアーカイブ表示を、年毎に折りたたみ可能な形式で出力します。 新しいブロック`b_block:id="archive_every_year"`は、`cms:id="year"`で年を、`cms:id="archive"`で各月のアーカイブリンクを生成し、年毎に異なるIDを割り当てます。これにより、jQuery等で年毎の折りたたみ表示を実装可能になります。表示例では2018年、2017年、2016年と年ごとに月別アーカイブをまとめて表示しています。新機能はパッケージに含まれ、サイト（https://saitodev.co/soycms/）からダウンロードできます。ただし、古いバージョンからのアップデートでは、ブログページ毎のブロック使用設定でarchive_every_yearを有効にする必要があります。
/** Geminiが自動生成した概要 **/
Web Audio APIのAnalyzerNodeを用いて、音声でアニメーションを制御する方法を紹介しています。 円が画面端で跳ね返る単純なアニメーションに、音声の周波数データ解析を組み込みました。 周波数データが一定閾値を超えると、円の進行方向がランダムに変化します。 音が途切れてもデータが残るため、setTimeoutを用いて一定時間反応しないように制御しています。 具体的には、`analyser.getByteFrequencyData(data)`で周波数データを取得し、`data[20]`の値が閾値を超えた場合に円の移動方向を反転させています。
/** Geminiが自動生成した概要 **/
BiquadFilterNodeは、2次セクションを持つデジタルフィルターで、オーディオ信号の変更に使用されます。`type`プロパティでフィルターの種類を指定し、`frequency`でカットオフ周波数または中心周波数を設定します。`Q`プロパティはフィルターの帯域幅を制御します。`gain`は特定のフィルタータイプでのみ使用されます。主なフィルタータイプは、ローパス、ハイパス、バンドパス、バンドストップ、ローシェルフ、ハイシェルフ、ノッチ、オールパスです。ローパスは指定周波数以下の周波数を通過させ、ハイパスは指定周波数以上の周波数を通過させます。バンドパスは特定の周波数帯域を通過させ、バンドストップはその帯域を減衰させます。シェルフフィルターは特定の周波数以上または以下のゲインを調整し、ノッチフィルターは特定の周波数を除去します。オールパスフィルターはすべての周波数を通過させますが、位相を変化させます。
/** Geminiが自動生成した概要 **/
Web Audio APIを用いてマイク入力の音声の周波数を可視化するJavaScriptコード例を紹介している。AnalyzerNodeでFFTを行い、得られた周波数データをcanvasにグラフとして描画する。コードでは、マイクへのアクセス、AudioContextとAnalyserNodeの作成、周波数データの取得と描画処理を解説。実行すると音声入力に応じてリアルタイムに周波数グラフが変化するが、ハウリングが発生しやすい点についても言及している。
/** Geminiが自動生成した概要 **/
この記事は、JavaScriptで音の周波数を可視化する方法を学ぶための導入部分です。音のデジタル化に不可欠なフーリエ変換の概念を、三角関数のグラフを用いて分かりやすく解説しています。sin波、cos波、そしてそれらの合成波のグラフを示し、複雑な波形も三角関数の組み合わせで表現できることを説明。式の係数を配列データとして取り出すことで、音をデジタルデータとして扱えるようになることを示しています。最後に、高速フーリエ変換(FFT)に触れ、次回JavaScriptでの実装を示唆しています。記事には、HTML5 Canvasを使ったsin波を描画するコード例も掲載されています。
/** Geminiが自動生成した概要 **/
Web Audio APIを用いて録音機能を実装した。navigator.getUserMediaでマイクアクセス権を取得し、MediaRecorderで録音、10秒後に停止しsample.wavとしてダウンロードさせる。 現状は問答無用で録音開始・停止する仕様だが、将来的には取得した音の周波数を解析し、音に合わせた処理を実現したい。
/** Geminiが自動生成した概要 **/
Android端末で現在地の土壌と地質を調べるWebアプリをHTML5、Service Worker、IndexedDBを用いて開発。GPSで緯度経度を取得し、オフラインでも動作。取得した情報は農研機構の土壌図、産総研の地質図、Googleマップへのリンク生成に利用。現在Android Chromeのみ対応で、ログは10件保持。Service Worker使用による位置情報取得の不具合調査中。開発中のロガー機能の一部公開で、正式版は非公開。機能追加要望や不具合報告は受け付けていない。Githubでソースコード公開中。
/** Geminiが自動生成した概要 **/
kintoneとチャットワークを連携し、タスクを自動登録するアプリをGo言語で開発する過程を説明。kintoneにアプリを作成し、Go言語でkintoneのREST APIを使用してデータを取得するコードを紹介。APIキー、ID、パスワードを用いて認証し、JSON形式のデータを取得することに成功。今後の課題として、取得したJSONデータをGo言語で扱うための構造体の作成が挙げられている。
/** Geminiが自動生成した概要 **/
kintoneで特定の領域だけを印刷範囲にする方法を紹介しています。kintoneの標準機能では印刷範囲の指定が難しいため、JavaScriptカスタマイズで対応します。具体的には、印刷時に特定の要素に"print-area"というクラスを追加し、CSSでこのクラスに`page-break-inside: avoid;`を指定することで、意図しない改ページを防ぎます。また、印刷ボタンのクリックイベントでJavaScriptを実行し、印刷後にクラスを削除する処理を追加することで、通常の画面表示への影響をなくします。この記事では、カレンダーの印刷を例に、日付行と予定行が分割されないように印刷範囲を制御する具体的なコードを解説しています。
/** Geminiが自動生成した概要 **/
kintoneでカレンダーアプリを印刷する際、標準機能ではカレンダー部分のみを選択できない問題を、jQueryプラグイン「printElement」を用いて解決する方法を紹介。kintoneアプリにカレンダー形式の一覧ページを作成し、printElementとjQueryを読み込むよう設定。カスタマイズ用JavaScriptで印刷ボタンを配置し、クリックイベントにprintElementでカレンダー部分(id="view-list-data-gaia")を指定。これにより、ヘッダー/フッターを除くカレンダー部分のみが印刷範囲となる。kintoneのカスタマイズ性の高さとjQueryプラグインの活用例を示している。
/** Geminiが自動生成した概要 **/
妻にGo言語を教えることにした。プログラミングを教えることで、教える側も理解を深め、学習効率が上がるためだ。Go言語を選んだ理由は、初心者にも扱いやすい点が多いからである。go runでLL言語のように手軽に実行でき、go buildでコンパイルもできる。システムプログラミングにも触れられるため、コンピュータの仕組み理解に役立つ。go fmtやgo importによる自動整形・補完でコードの書き方に迷うことも少ない。また、オブジェクト指向がないため学習コストが低い。冗長になりやすい、他言語学習時に混乱する可能性があるという欠点はあるものの、プログラミング入門には最適だと考える。妻の変化が楽しみだ。
/** Geminiが自動生成した概要 **/
HTMLTextAreaクラスは、テキストエリア要素を生成します。name属性とテキストの内容を指定し、その内容をinnerTextとしてレンダリングします。getTextメソッドはテキストの内容を取得し、オブジェクトを取得するオブジェクトメソッドはHTMLエスケープされたテキストを改行で囲んで返します。
/** Geminiが自動生成した概要 **/
HTMLFormクラスは、HTMLのフォーム要素を生成するためのコンポーネントです。formタグを生成し、メソッド(デフォルトはPOST)やアクション、ターゲットなどの属性を設定できます。POSTメソッドの場合、CSRF対策としてsoy2_tokenという隠しフィールドを自動的に追加します。アクションが指定されていない場合は、現在のリクエストURIがアクションとして設定されます。また、JavaScriptのonSubmitイベントを設定することも可能です。disabled属性の設定も可能です。
/** Geminiが自動生成した概要 **/
Google Apps Script (GAS)のHTML Serviceでファイルアップロード機能を実装する方法を紹介。サンプルコードでは、HTMLフォームでファイルを選択・送信し、GAS側でGoogleドライブに保存、生成されたURLをHTMLに返す非同期処理を行っている。`google.script.run.withSuccessHandler()`でGAS側の関数を実行し、成功時の処理をHTML側で記述。フォーム送信イベント`onsubmit`でこの処理を呼び出し、アップロード後のURL表示を実現。この仕組みにOCR処理を組み合わせることで、画像アップロードと文字列抽出を同一画面で行うWebアプリ開発が可能になる。
/** Geminiが自動生成した概要 **/
Google Apps Script (GAS) のHTML Serviceを利用して、HTMLファイルとGASのコードを連携させる方法を紹介しています。 具体的な手順として、Googleドライブ上にGASプロジェクトを作成し、index.htmlファイルに"Hello, World!"と記述、コード.gsファイルにはdoGet関数でHTMLファイルを読み込むコードを記述します。 その後、ウェブアプリケーションとして公開することで、ブラウザでHTMLの内容が表示されることを確認しています。 さらに、GASを学ぶ上でJavaScriptの知識が重要であることを補足し、関連技術としてNode.js、NW.js、GoogleドキュメントのOCR機能についても言及しています。
/** Geminiが自動生成した概要 **/
Tera schoolで開催している社会人・学生向けプログラミング勉強会で、業務改善を目的としたGAS(Google Apps Script)入門講座を実施しました。今回はGoogle Driveの共有フォルダのアクセス権限者一覧をスプレッドシートに自動出力するスクリプトを作成。JavaScriptの知識を活かし、数行のコードで名簿作成を自動化し、大幅な生産性向上を体感しました。次回は、作成した名簿を活用し、スプレッドシートとGmailを連携させた定期通知メール送信機能の実装を予定しています。
/** Geminiが自動生成した概要 **/
Node.jsとSocket.IOを用いたチャットアプリ構築後、Let's Encryptで常時SSL化する方法を解説。自己署名証明書ではブラウザ警告が出るため、無料のLet's Encryptを利用。Certbotによる証明書取得手順、Nginxの設定変更（SSL設定追加、httpトラフィックのhttpsリダイレクト）を説明。 Socket.IOのサーバー側コード修正では、httpsオプションを追加し、取得した証明書と秘密鍵を指定。これにより、チャットアプリがセキュアなhttps接続で利用可能になる。
/** Geminiが自動生成した概要 **/
黒ボク土は、水はけが良い反面、保水力・保肥力が低い。リン酸固定も多く、肥料効率が悪い。窒素過剰吸収による生育障害のリスクもある。団粒構造の発達が悪く、乾燥すると微細な土粒子となり、風食や土埃の原因となる。物理性が悪いため、耕耘の抵抗が大きく、過剰な耕耘は土壌構造を破壊し、悪化させる。保水性・保肥力の向上には、有機物添加が有効。土壌改良資材や被覆栽培も有効策となる。適切な管理を行うことで、黒ボク土の弱点を克服し、生産性を高めることができる。
/** Geminiが自動生成した概要 **/
常時SSL化はSEO上効果がある。GoogleはHTTPSをランキングシグナルとして使用しており、サイトのセキュリティ向上はユーザー体験の向上に繋がるため、間接的にSEO効果が見込める。ただし、HTTPS化自体が劇的なランキング上昇をもたらすわけではない。相対的にHTTPサイトより優位になる程度の影響と考えられる。また、サイト表示速度の向上も期待できるが、適切な設定が必要。常時SSL化は必須事項となりつつあり、SEO対策としてだけでなく、セキュリティ向上とユーザーへの信頼感醸成という観点からも重要である。
/** Geminiが自動生成した概要 **/
SOY CMSを古いバージョンから最新版にバージョンアップするには、0.1ずつ段階的にバージョンアップし、公式サイトのバッチファイルを適用します。1.5系以降は一気にバージョンアップできますが、初期管理者でログインしてキャッシュをクリアしてください。1.11系以降のSOY Shopは自動バージョンアップに対応しています。
/** Geminiが自動生成した概要 **/
BracketsのBeautifyによるXMLファイルの自動整形を無効化する方法について解説されています。SOY CMS/Shop開発において、build.xmlがBeautifyによって整形され、Antビルドでエラーが発生する問題が発生しました。解決策として、brackets.jsonに`"language":{"xml":{"bb.beautify.onSave":false}}`を追加し、XMLファイルの自動整形を無効化することで、Antビルドが正常に動作するようになりました。
/** Geminiが自動生成した概要 **/
オープンソースのネットショップパッケージは初期費用を抑え、自由にカスタマイズできるメリットがある一方、運用に伴う問題も存在する。軌道に乗り始めると、トラフィック増加への対応、セキュリティ対策、機能追加など、システムの拡張性と保守性が重要になる。これらの課題解決には専門知識が必要となる場合が多く、結果的にコスト増加につながる可能性もある。さらに、コミュニティベースのサポートは情報収集に役立つものの、迅速な問題解決には不向きな場合も。オープンソースは自由度と低コストで始められる魅力があるが、将来的な拡張性と運用コストを考慮した選択が必要となる。
/** Geminiが自動生成した概要 **/
D3.jsを3系から4系にバージョンアップして折れ線グラフを作成した際の変更点についての記事です。4系ではscale関連の記述方法が変わり、`d3.scale.linear()`が`d3.scaleLinear()`に、`d3.scale.ordinal().rangePoints()`が`d3.scalePoint()`に変更されました。特に`scalePoint()`を見つけるのに苦労したようです。また、`d3.axis.svg.axis()`が`d3.axisBottom()`のようにシンプルになりました。これらの変更点に苦労しつつも、無事にグラフ作成できたことが記述されています。
/** Geminiが自動生成した概要 **/
中学生向けプログラミング教室で、JavaScriptでアプリ制作をする生徒が出てきたため、デスクトップアプリ作成の選択肢としてNW.jsをUbuntuで試した。npmでnw.jsをインストール後、index.htmlとpackage.jsonを作成し、`npm start`で実行した結果、"Hello World!"とNode.jsのバージョンが表示された。ランチャーに登録したNW.jsアイコンからも同じ画面が起動できた。しかし、端末操作が必要なため、中学生には敷居が高いと判断し、他の方法を検討することにした。
/** Geminiが自動生成した概要 **/
SOY CMSの記事編集中にブラウザを閉じると、入力内容が失われるのを防ぐため、確認アラートを表示するプラグインが開発されました。フォーラムで要望があり、記事タイトル編集中に限られますが「本当に閉じますか？」とアラートを表示します。下書き自動保存と併用すると効果的です。プラグインはフォーラム、またはGitHubで配布されています。改良版はGitHubにあり、`alert.js`を修正すれば他の箇所にも対応可能。修正後はフォーラムで共有が推奨されています。
/** Geminiが自動生成した概要 **/
Google Maps APIを用いてSOY CMSのブログに地図アプリを作成する手順の第一段階を解説した記事です。まずGoogle API ConsoleでAPIキーを取得し、SOY CMSにカスタムフィールド「lat（緯度）」と「lng（経度）」を追加します。ブログページを作成し、提供されたHTMLテンプレートを貼り付け、地図の中心座標とズームレベルを調整します。座標はGoogle Mapsで場所を検索し、右クリックメニューの「この場所について」から取得できます。最後に、ブログ記事を作成し、タイトルと本文に加え、カスタムフィールドに取得した緯度経度を入力して公開します。これにより、ブログトップの地図上にマーカーが追加され、訪問場所を視覚的に表示できます。次記事ではマーカーに詳細情報を表示する機能を追加する予定です。
/** Geminiが自動生成した概要 **/
プログラミング教育の一環として、中学生にエラトステネスの篩を使わずに素数を求める課題を与えた。5が素数である理由を問うことで、生徒に思考過程を明確に説明させることを促した。生徒たちは、与えられた自然数以下の既知の素数で割り切れないことを確認することで素数判定ができることに気づき、JavaScriptでプログラムを実装した。2を初期素数として配列に格納し、3以上の自然数について、配列内の素数で割り切れるか確認し、割り切れなければ配列に追加していくことで、指定範囲内の素数を全て出力することに成功した。この経験を通して、プログラミング教育における論理的思考の重要性を再認識した。
/** Geminiが自動生成した概要 **/
SOY CMSのファイルマネージャelFinderでJSファイルのアップロードを許可する方法。`/CMSのインストールディレクトリ/soycms/js/elfinder/php/connector.php`内の`uploadAllow`配列にJSファイルのMIMEタイプ `text/javascript` を追加することで実現できる。デフォルトではセキュリティのためJSファイルのアップロードは禁止されているが、この設定変更によりアップロードと編集が可能になる。ただし、不正ログイン時に悪意あるコード実行のリスクも高まるため、注意が必要。
/** Geminiが自動生成した概要 **/
SOY CMSのキャッシュモードを利用することで表示速度を大幅に向上させることができます。キャッシュモードには、「出力キャッシュ」「ブロックキャッシュ」「データキャッシュ」の3種類があります。出力キャッシュはページ全体をキャッシュし、ブロックキャッシュはページの一部のブロックをキャッシュ、データキャッシュはデータベースへのアクセス結果をキャッシュします。それぞれのキャッシュモードは管理画面から簡単に設定でき、サイトのアクセス状況や更新頻度に合わせて最適な設定を選択することで、サーバー負荷を軽減し、表示速度を向上させることができます。特に、頻繁に更新されない静的なページやアクセス数の多いページでは、出力キャッシュが効果的です。キャッシュのクリアも管理画面から簡単に行えます。
/** Geminiが自動生成した概要 **/
SOY Shopで商品を非同期にカートに追加するJavaScriptのカスタマイズ方法。カートの表示部分にIDを付与し、JavaScriptで非同期通信(XMLHttpRequest)を使ってカート情報を更新する。非同期通信に対応していないブラウザのために同期処理へのフォールバックと、タイムアウト時の処理も追加。さらに、ボタンの連打防止策として実行中フラグを用いて多重リクエストを防いでいる。これらの機能をプラグイン化することも検討中。
/** Geminiが自動生成した概要 **/
SOY Shopで非同期に商品をカートに入れる方法を解説。Ajaxを用いて、カートボタンクリック時にページ遷移なしでカートに追加する。まず、JavaScriptでカート操作URLへの非同期通信を行う関数を定義。次に、カートボタンのHTMLを書き換え、この関数を実行するように変更する。これによりカートへの追加自体は非同期で行われるが、画面上のカート情報は更新されない。次回、この点を改善し、カート追加をユーザーに分かりやすく表示する方法を解説予定。
/** Geminiが自動生成した概要 **/
小中学生向けに続き、社会人・学生向けプログラミング教室を開講しました。業務でHTMLやメール設定ができないことで損をしている人を多く見てきたため、その改善を支援したいと考えています。まずは、GoogleスプレッドシートのJavaScriptによる効率化、HTMLとJavaScriptを用いたLPページ改善を目標に指導を行います。内容が固まったら本格的に展開予定です。
/** Geminiが自動生成した概要 **/
中学生にプログラミングを教える中で、整数の割り算による正解率計算で予期せぬ結果になる例を紹介。C言語で整数の4割る5に100を掛けても、結果は0.000000%と表示される。これは整数演算で切り捨てが発生するため。また、0.2 + 0.12 の計算でも、結果は0.3200001と微妙にずれる。これはコンピュータが2進数で小数を表現する際の誤差によるもの。これらの例は、プログラミングを通して数学の理解を深める機会となるが、詳細な説明には数学的知識が必要となる。
/** Geminiが自動生成した概要 **/
中学生にJavaScriptでプログラミングを教えるにあたり、canvasを使ったゲーム作成に興味を持つ生徒が多い一方、基礎習得の必要性を感じた筆者は、canvasの練習を通して、メソッドの活用、オブジェクトの理解、配列の利用という３つの重要項目を特定した。
これらの概念を「おまじない」として片付けず、生徒に楽しく理解してもらう方法を模索し、計算機、名簿、タイピングソフトの作成を通して、実践的にコードに触れさせながら習熟させる方針を立てた。
/** Geminiが自動生成した概要 **/
プログラミング未経験者がNPOで小中学生にプログラミングを教えることになった。教材選びでは、Scratchは力技での解決を招きやすく、PHPは環境構築が面倒、Javaは難易度が高いため却下。JavaScriptは環境構築が容易で、様々な可能性を秘めていることから採用。ただし、柔軟すぎるが故のコードの煩雑さを懸念し、自身もJavaScriptを改めて学び直すことにした。
