こんにちは！
最近6年ぶりに会った友人と、10年前の話をしました。
過去は色あせないなと嬉しい半分、流れた歳月へのしみじみが半分の
ハイブリッド古関です。

本日は英語学習で使用していた、オンライン英会話BizMatesを使用した個人の感想をお伝えします！

Bizmateの概要

レベルにあった教材選択

Bizmatesで受講を開始する前に、無料体験レッスンでレベル診断が行われます。30段階のレベル別レッスンが用意されており、自分の状況にあった教材が用意されています。他レベルの教材を使用するには、1つのコースを終わらせる必要があります。

実際に受講し良かったこと、残念だったこと

実際の現場での英語を教えてもらえる

Bizmatesの先生方は全員ビジネス経験があります。そのため、自分と同じキャリアや業種の先生を選択する事が出来、実際の現場ではどういったコミュニケーションをとっていたかなど、実体験を教えていただくことができました。

私の場合は、先生のキャリアに IT depertment, programmer, system engineer という職歴がある方に絞って探しました。

自分にあった先生に出会うことができた

これは本当に個人の感想ですが、自分が信頼できる先生に会うことができました。その先生とは教材を指定して授業を進めるのではなく、想定されるシチュエーションで必要な英会話を教えて頂きました。

経験がある方なので、困ったときの対応や、先生の失敗談から学んだ対応方法など教えてくださり、本当にすてきな先生でした。

先生の予約が取りにくい

これは私が退会する原因になった部分なのですが、お気に入りの先生の予約が取りにくい点です。

先生方は副業として私たちに英語を教えてくださる方も多く、なかなか予約が取れませんでした。これはBizmatesに限ったことではないと思います。ですが、自分に合った先生を探す作業はなかなかに困難なため、他の英語学習を探すことにしました。

感想

Bizmatesの先生方は、たくさんアドバイスをくださる優しい先生方が多かったです！

いろんなサービスを利用して、自分に合った英会話学習を行っていきたいと思います！

やりたかったこと

ある選択肢の選択内容によって、一つのセレクトボックス内のoption要素を出し分けできるように実装したい件がありました。
非表示にするだけであればCSSをあてなくてもコメントアウトや削除で十分なのですが、今回は別の選択内容と連動する仕様だったため、jQueryを使用して選択内容の条件に対し動的にCSSをあて、セレクトボックスの中身が変わるよう実装しました。

デベロッパーツールでは気づけない問題

ステージングの段階で実機確認ができない環境下だったため、PCブラウザ(chrome/Edge/FireFox)のデベロッパーツールよりスマホの表示確認を行いました。この段階ではコンソールエラーもなく、セレクトボックスの中身は問題なく出し分けができていました。
しかし、実際にiPhone上で確認してみると、option要素へのCSS「display:none;」が効いておらず、すべての選択肢が表示されている状態で出し分けができていませんでした。

まず最初にjsファイル自体の読み込み問題を疑いましたが、同一ファイル内で実行している選択肢変更によるセレクトボックスの選択初期化は問題なく動作確認ができていました。
またsafariの拡張機能デベロッパーツール「Web Inspector」上でコンソールエラーもなかったので問題に気づきにくく、原因究明と解決に少々手間取りました。
これはsafari特有の現象かと思いましたが、アプリ版chromeでも同様の現象が起きていたので、どうやらiPhoneではブラウザ問わず起こる問題のようでした。

今回は、この問題に対して、試してみたことや解決した方法を備忘としてまとめたいと思います。

前提

・HTML、CSS、jQueryの使用で実装
・一つのselect要素で行う

クラスで「select-a＝条件aを選択した場合に表示する選択肢(a-1, a-2)」「select-b＝条件bを選択した場合に表示する選択肢(b-1, b-2)」と分けています。

試したこと (うまくいかなかった例)

● jQueryでCSS「display:none;」を付与

ブール値「selectedA＝条件a」がtrueの場合、「select-a」のみ表示したいので、セレクタ「.select-a」を指定しcssメソッドで「display:inline;」とします(非表示(条件b)→表示(条件a)へ切り替わるパターンも要考慮)。
「select-b」は非表示にするので「display:none;」を付与します。
else内(条件b)では、逆の内容でCSSを付与。

こちらはPC上の確認では問題はありませんでしたが、下の画像のようにiPhone実機では適応されず「select-a」「select-b」どちらの選択肢も表示されてしまいます。

● jQueryメソッド「.show()」「.hide()」を使う

jQueryメソッドを使った方法です。パラメーターを指定せず「.show()」を実行すると前述の「.css("display", "inline")」と同じ挙動ではあるので、こちらも同様にiPhone実機では適応されませんでした。

● CSSでデフォルトスタイルを初期化

ブラウザ特有のスタイルが影響している可能性も考え、appearanceプロパティで標準スタイルを解除してみました。select要素、option要素それぞれにあててみましたが、期待した変化はありませんでした。

解決した方法

● CSS有効のspan側で「display:none;」を付与し、非表示にするoptionを囲む ( .wrap() )

optionにCSSが効かないのであれば、iPhone上でもきちんとCSSが効く要素を使う必要があると思い、試しにspanタグを使ってみたところ、うまくいきました。

↑ まずは非表示用クラスを準備します。クラス「selector-hide」にはCSS「display:none;」を付与して非表示となるようにします。

↑ 条件aのとき、非表示にしたい「select-b」に対し「.wrap()」を使用して、非表示用クラス「selector-hide」のspan要素を付与します。

↑ これにより、条件aのときは、非表示用クラス「selector-hide」のspan要素がセレクタ「.select-b」を囲います。

また、条件b→条件aになったときは「select-a」の再表示が必要なため、付与前にすべての「selector-hide」のspan要素を「.unwrap()」でリセットします。

「.unwrap()」は指定したセレクタの親要素を削除します。
単純に「select-a」のwrapを解除するので「$('.select-a').unwrap();」とすればいいように思いますが、「select-a」が「selector-hide」にwrapされていない場合の親要素はselect要素になるため、select要素が削除対象となってしまいます。
これを回避するために、「.contents()」で「selector-hide」の子要素を指定し、その親要素である「selector-hide」をunwrapするようにしています。
この方法であれば、「selector-hide」にwrapされていない状態のoptionについてはunwrapの対象外となり、select要素を削除することはありません。

結果

span要素「selector-hide」にCSSが効いて、中身のoptionまるごと非表示が成功しました。
条件a ↔ 条件b の切り替えも、iPhone上で正常に実装できました。
もちろんPCのブラウザ上でも問題はありません。

まとめ

デベロッパーツールでの表示確認はあくまでも疑似的再現であり、当然ですが完璧ではありません。いろんなデバイスでの表示が一つの画面で可能で、ついついその便利さに、さも正常に表示されているかのように錯覚してしまいますが、実際は気づかないところで意図しない挙動になってしまっているという落とし穴がひそんでいるものですね。
もとよりiPhoneでの表示のクセや違いなどについての知識があれば、今回の件も事前に把握できていたかもしれませんが、めまぐるしいスピードでアップデートされてゆく日々のなかでは、既存の知識や常識も突如として通用しなくなることも多々あり、知識は知識で蓄えつつ、可能であるならやはり事前に実機で検証するに越したことはないと改めて感じました。

とはいえ、デベロッパーツールが万能であることはいうまでもなく、これからもデバッグできるところはきちんと確認しつつ、過信しすぎず実機の動作確認とあわせてうまく活用していきたいです。

あっ・・・・。
という間に2022年も年末が近づいてきましたね。
個人的には、　　年末＝【ふるさと納税　締切間近】　という感覚になります。
計画的ではないので、毎年年末にふるさと納税サイトを見てバタバタして購入しています。
仕事上関わることもあり少し、ふるさと納税について少し調べてみました。
ふるさと納税は、非常に伸びているマーケットだと思います。
ふるさと納税の寄付額は2020年は6800億円（前年対比140%）で、22021年度は寄附額8,300億円（前年対比120％超）寄附者は740万人で過去最多となっています。
弊社でも ふるさと納税を運営している店舗（自治体）さんとのお付き合いが 増えてきていますね。

ふるさと納税の仕組み

寄付者目線でいくと、自分が選んだ地域に寄付をすることで、実質2,000円で好きな返礼品がもらえる仕組みですね。事業者目線でいくと、まず自社の製品や産品を該当する自治体に出品し寄付が入ると、予め自治体に伝えていた金額が自治体から支払われる仕組み。

例えば、3,000円の商品を販売している事業者がその商品をふるさと納税に出品したとすると、自治体は返礼品の調達額を30%にする決まりがあるので、掲載金額は10,000円となります。

寄付が入ると、3,000円を事業者に支払い、販売手数料などの諸経費を20%にあたる2,000円以内で納め、50％の5,000円を自治体の歳入にしているようです。つまり、事業者側では、3,000円で出品し、寄付が入ると3,000円自治体から支払われるというシンプルな構造になっています。
また寄付者への送料については、自治体が負担しているようです。
したがって、出品時に関しては自治体との書類のやり取りなどが発生しますが、それ以外はにスピーディーに販売（寄付）に進むことができます。

寄付額　1位から20位（市の部）

寄付額ランキングを見ると、北海道強いですね。
TOP5に３つ入ってますね。　弊社のお付き合いある店舗様もランクインしています。
個人的に気になったのは2位の宮崎県です。都城市ではないのですが、宮崎県で食べた餃子が美味しかったので、ふるさと納税で探してみたらありました。
餃子の印象は、宇都宮や、浜松という方もいるかもしれませんが、実は、なんと、
2021年 の　餃子消費 額日本一は　宮崎市なんですね。宮崎は餃子の激戦区ですね。

旅行で宮崎に行ったときにお勧めされた高鍋町にある馬渡の餃子　は食べた時衝撃をうけました。
外はカリッ　中はモッチモチとして、美味しいです。こちらお勧めです。
餃子とビア~　🍺　最強説あります。無限に食べられます。
ふるさと納税もあります！　是非 機会があれば食べてみてください~。

店舗さんも、自社の商品を伸ばしていくためにふるさと納税を活用してみるのも1つだと思います。

いろいろなふるさと納税サイトありますが、個人的には購入は、楽天ふるさと納税を多く使ってます！
買い回りや、イベントでポイントもゲット！できるのでお勧めですね。
いろいろな地域のいろいろな商品、イベント等、発見できる、そんな目線でもふるさと納税を利用してみるのも良いと思います！

皆さま、初めまして。
10月から中途で入社させていただきました。古屋と申します。

私はこれまで農業協同組合から機械のフィールドエンジニア、ソフトウェアの開発エンジニアと業界を渡り歩いてきました。
前職のソフトウェア開発ではECサイトの構築、改修に１年ほど携わらせていただいたということもあり、今回ご縁があり入社させていただく運びとなりました。
まだまだエンジニアとしての歴は浅いので、一日でも早く皆様のお役に立てるよう日々精進して参ります。

個人的なお話になりますが
今年31歳を迎えまして、30歳を過ぎてからお腹周りにお肉が付き始めました。
もともと食べる量は多い方だったのですがそれまではいくら食べても太ることはなく、「私はいくら食べても太らない人間なんだ」と思っていました。
ええ…もちろん30を迎えてもそう思っておりました。
いつからでしょう…
夜眠れない時にはペヤング焼きそばの超大盛を掻き込んで満腹中枢を刺激し直後眠くなったタイミングで朝までぐっすりという習慣ができあがってしまったんですね。

そんな習慣が続きまして、2ヶ月ほど経った時に気づいてしまったんです。
んー？なんか筋トレしてないのに胸筋付いてきた？

はい、その程度の認識だったわけです。
この習慣は続きました。食事も炭水化物がメインです。
そしてさらに1ヶ月が経った頃、久しぶりに会った友人に言われたんですね。

「太った？」

乗りましたね、体重計に
衝撃でしたね、かなり

なんとこの3ヶ月間で10kg増えておりました。

でもですよ
この10kg増えた体重が私の身長では平均体重とされているのです。
痩せ型で割とガリガリ寄りな体型が見事平均に乗ったわけです。

まいっかってなりそうじゃないですか？
実際なったんですよね、まいっかって。2秒くらい。

でも鏡を見ると腹回りは見事に出ており、胸も胸筋ではなく脂肪だったんです。ぶるんぶるんしてたんです。
すぐに運動を始めました。

今も続けてはいるのですがあまり効果が見えてきません。
運動のほかにも食事にも少し気を使い始めました。

以下痩せるためにやっていることです。
・平日の夕飯は白飯抜き
・月曜～木曜はウォーキング（3 ～ 4kmほど）
・金曜・日曜は水泳（平均2500mほど）
・基本的に飲み物は水とコーヒー（無糖）

ですが、あまり効果が目に見えないです。
ただこれ以上やるとしたら毎日夕飯の白飯を抜くことくらいです。
それはちょっとキツいので
この方法でもうしばらく様子を見てみようと思っております。

続報をお待ちください。

個人的なお話を失礼いたしました。
今回は以上でご挨拶とさせていただきます。

これからどうぞよろしくお願いいたします。

前回、投稿IDを入力すると、入力したIDのタイトル、サムネイル、リンクを取得して表示するものを作成しました。
しかし、実際の表示を確認するには、プレビューを開くか、保存をしてページを開かないと確認ができませんでした。

もう少し使いやすくするために、ブロックにプレビュー機能を付けたいと思います。
プレビュー機能を付けることにより、編集画面上でも実際の表示を確認できます。
※ソースは前回のものを使用します。

ServerSideRenderコンポーネント

ServerSideRenderコンポーネントを使用すると、編集画面でrender_callback関数に基づいたレンダリングを確認できます。

ServerSideRender コンポーネントを@wordpress/editor パッケージからインポートします。

ServerSideRenderコンポーネントは、ブロックの名前（識別子）をblockプロパティに指定する必要があります。
これはprops.nameで取得ができます

レンダリングに必要な情報（ここでは、投稿ID）をattributeプロパティに指定します。

src/edit.js

//SeverSideRenderコンポーネントをインポート
import { ServerSideRender } from '@wordpress/editor';

export default function Edit(props) {
	//props経由でプロパティを変数に分割代入
	const {attributes: {postID}, setAttributes, className} = props;
	
	return (
		<div className={className} { ...useBlockProps() }>
			{/* プレビューと分けるため編集部分を div class="editMode" で囲む */}
			<div class="editMode">
				<div>sample dynamic block</div>
				<TextControl
					label='投稿IDを入力' //ラベルの表記を設定
					type='number' //inputタグのtypeを設定
					value={postID} //保存されている属性（投稿ID）を表示
					//入力された値を属性に登録する
					onChange={ ( newId ) => setAttributes({ postID: parseInt(newId) })}
				/>
			</div>

			{/* ServerSideRenderコンポーネントを追加 */}
			<div class="previewMode">
				<div>プレビュー</div>
				<ServerSideRender
					block={props.name} //ブロックの名前（識別子）を設定
					attributes={{
						postID: postID //保存されている属性（投稿ID）を表示
					}}
				/>
			</div>
		</div>
	);
}

プレビュー部分が見ずらいので、少し出力するHTMLとCSSを編集します。

sample-dynamic-block.php

本文の冒頭部分を表示するように編集します。

function sample_dynamic_block_render($attr, $content) {
	if($attr['postID'] > 0) {

		    //省略

			//本文の一部を取得
			$postContent = strip_tags($selectPost->post_content);
			$postContent = trim($postContent);
			$excerpt = mb_substr($postContent, 0, 75);

			//出力されるHTMLを編集
			ob_start();
			?>
			<div>
				<a class="postWrap" href="<?php print $link; ?>">
					<img src="<?php print $thumbUrl; ?>">
					<div class="postDetail">
						<div class=postTitle>
							<?php print $title; ?>
						</div>
						<p class="excerpt"><?php print $excerpt ?></p>
					</div>
				</a>
			</div>
			<?php
			$output = ob_get_contents();
			ob_end_clean();

			return $output;
		}
	}
}

src/editor.scss

編集画面のみ適用されるので、実際のページも同じデザインにする場合は、
src/sytle.scss を編集する必要があります。

.wp-block-create-block-sample-dynamic-block {
	border: 1px dotted #f00;

	/* 追加 */
	.previewMode {
		background: #fff;

		.previewTitle {
			color: #000;
		}

		img {
			width: 200px;
		}

		.postWrap  {
			display: flex;
			align-items: center;

			.postDetail {
				padding: 10px;

				.postTitle {
					margin-bottom: 8px;
				}
			}
		}

		a {
			display: inline-block;
		}
	}
}

投稿IDの入力の下にプレビューが表示されました。
※CSSは、実際に表示するデザインになる様に編集してください。

プレビューボタンの追加

プレビュー画面が常に表示されていると編集画面が見づらくなるので、
ツールバーにプレビューボタンを追加して、プレビュー表示と編集画面を切り替えられるようにします。

sample-dynamic-block.php

「attributes」に「isEditMode」（編集画面）を追加します。
現在の画面の状態（編集画面 or プレビュー）を表す属性になります。

function create_block_sample_dynamic_block_block_init() {
	register_block_type( __DIR__ . '/build', array(
		//レンダリング用のコールバック関数を設定
		'render_callback' => 'sample_dynamic_block_render',
		//入力された値（投稿ID）を保存するための属性を追記
		'attributes' => [
			'postID' => [
				'type' => 'number',
				'default' => 0
			],
			//表示画面の状態を管理する属性を追加
			'isEditMode' => [
				'type' => 'boolean',
				'default' => true
			]
		]
	));
}

src/edit.js

ツールバーにプレビューボタンを追加するので、
BlockControls、Button、Toolbar コンポーネントをインポートします。

//BlockControlsコンポーネントをインポート
import { BlockControls } from '@wordpress/block-editor';
//Button、Toolbarコンポーネントを追加
import { Button, Toolbar } from '@wordpress/components';

propsのisEditModeプロパティを変数に代入。

const {attributes: {postID, isEditMode}, setAttributes, className} = props;

ツールバーにプレビューボタンを追加して表示する関数（getBlockControls）を追加します。
ボタンの表示切替は、isEditModeの値により切り替わるようにします。

const getBlockControls = () => {
		return (
			<BlockControls>
				<Toolbar>
					<Button
						label={ isEditMode ? 'Preview' : 'Edit'} //isEditModeの値によって、ラベルを切り替える
						icon={ isEditMode ? 'format-image' : 'edit' } //isEditModeの値によって、アイコンを切替る
						className='read-together-btn'
						onClick={() => {
							//clickされると値が反転
							setAttributes({ isEditMode: !isEditMode })}
						}
					/>
				</Toolbar>
			</BlockControls>
		);
	}

出力内容部分もisEditModeの値によって、切り替わるように編集します。

return (
		[
			getBlockControls(),
			<div className={className} { ...useBlockProps() }>

				{/* trueの場合、編集画面を表示 */}
				{ isEditMode && 
					//プレビューと分けるため編集部分を div class="editMode" で囲む
					<div class="editMode">
						<div>sample dynamic block</div>
						<TextControl
							label='投稿IDを入力' //ラベルの表記を設定
							type='number' //inputタグのtypeを設定
							value={postID} //保存されている属性（投稿ID）を表示
							//入力された値を属性に登録する
							onChange={ ( newId ) => setAttributes({ postID: parseInt(newId) })}
						/>
					</div>
				}
				{/* falseの場合、プレビュー画面を表示 */}
				{ !isEditMode &&
					//ServerSideRenderコンポーネントを追加
					<div class="previewMode">
						<div class="previewTitle">プレビュー</div>
						<ServerSideRender
							block={props.name} //ブロックの名前（識別子）を設定
							attributes={{
								postID: postID //保存されている属性（投稿ID）を表示
							}}
						/>
					</div>
				}

			</div>
		]
	);

編集モード

プレビューモード

まとめ

今回、プレビュー機能を追加することで、編集画面上でも実際の表示を確認ができるようになり、
使いやすくなったと思います。

ツールバーへのボタン追加もいろいろと応用できるかと思いますので、
ぜひ、参考にしていただければと思います。

こんにちは、グリニッジのホアンです。
久しぶりにブログを更新しました。 
8月に約3年半ぶりのベトナムへ帰省しました。
今回はベトナム帰省での印象について共有させていただきます。

まずベトナムに入国する時、新型コロナウイルスのPCR検査やワクチン接種証明書などが不要なのでスムーズに入国できて、良かったです。
第一印象はコロナ前のように正常な生活が戻ってきて、町中でマスクをしていない人が多かったです。
ちなみに9月26日にはベトナム国内で感染者1432人が新たに確認されて、死者はいませんでした。

次に驚いたことは物価が上昇していることです。
ベトナムの通貨ドン（ベトナムドン、VNDとも言う）の為替レートは、1円＝170ドンとなっています。（2022年9月26日現在）
下記は参考の値段です。
フォー(ベトナムの代表的な食べ物)（1杯）185～433円
ガソリン（1L）　148～155円
タバコ（マルボロ：1箱）　185～247円
卵（1個）19～31円
数年前ベトナムの物価はだいたい日本の物価の1/3だと思いましたが、段々日本に近づいてきました。
もちろん熱帯の国なので、野菜や果物などまだ安い物も沢山あります。

成長するGrab（グラブ）

一方、生活面で、Grabのサービスに大きな展開がありました。
Grab（グラブ）とは、元々はマレーシアを拠点にサービスを開始し、東南アジア各国に拡大した自動車配車アプリですが、現在ベトナム生活に不可欠のサービスとなってきました。
当初は自動車配車サービスだけでしたが、現在バイク「Grab Bike」や食事の配達「Grab Food」やバイクで荷物を送る（Grab Delivery）など、様々な便利なサービスが出来てきました。
私も数回Grab Deliveryを利用してみましたが、距離はだいたい5kmぐらいで約250円。
すぐ荷物を送ってくれて、助かりました。

そして、3年半ぶりのホーチミン市も、新しい高いビルや橋などが出来ていて、経済が発展していることを感じました。

ちなみに、英系ファンド運用会社ビナキャピタルにより、ベトナムの経済展望に対する楽観的な見方と、株価が今後上昇していくとの見通しを示し、2020年代のベトナム経済は、その後数十年にわたるグローバルバリューチェーンへのつながりを始めた1970年代日本経済との相似性があると評価しました。
なお、ベトナムの国内総生産(GDP)成長予測を大幅に上方修正しており、ベトナムは今年+8％の成長をすると期待する経済専門家も多いです。

ベトナムのオンラインショッピング

経済が発展しているし、若いものが多いし、インターネット利用者も多いため、オンラインショッピングの利用率が伸びています。
EC市場の22年売上高は+20％増の2.35兆円に達する見通しです。
調査により、ベトナムのインターネット利用者は人口の75％、インターネット利用者のうち74.8％がオンラインショッピングを利用しているそうです。
購入が最も多いのは、衣料品・履物・化粧品、家庭用品、IT・電子機器、書籍・花・ギフト、食品などで、注文に使用するデバイスは携帯電話が91％で最も多いです。

市場調査各社は、ベトナムのECは今後も引き続き成長し、2025年に390億USD(約5兆5800億円)規模に到達し、シンガポールと並んで、インドネシアの1040億USD(14兆8700億円)に次ぐASEAN2位になると予想しています。
今回、ベトナムに滞在した時、ベトナム大手通販サイトShopeeでオンラインショッピングを試してみて、スムーズに物を購入できました。

以上が今回のベトナム帰省で、私が感じた変化していることでした。
今後、ベトナムの発展を期待し、いつか弊社のサービスもインドネシアやベトナムなど東南アジア市場へ進出できたら良いなと思っています。