Webimpactでは、関東IT健保組合(以下ITS)に加入しています。
ITSは様々な補助が充実していて、その中の一つに保養施設があります。
要するに、ITS健保の加入者だと格安で利用できるホテルです。
先日、直営保養施設の一つである、トスラブ湯沢に泊まる機会があったのですが、想像以上に素晴らしかったので報告します。
なお、気になるお値段ですが1泊2食付きで、一人5500円。幼児は添い寝利用で無料でした。
この値段で、後述の設備。満足感が半端ないですよ。
Excelで開くためのCSVファイルに機種依存文字を入れる方法
こんにちは東京Kです。
システムの開発では「CSVファイル出力機能」と言う要望はかなりあります。
しかし、うっかりするとCSVファイルの出力は、日本語しか使えない文字コードであるShiftJISで作ってしまい、中国文字や機種依存文字などを扱うことが出来ないシステムが出来てしまいます。
またShiftJISだと、絵文字や、珍しい人名漢字も結構使えません。
かといって、世界中の文字を表すことが出来る文字コードであるUNICODE(例えばUTF-8)のCSVファイルを作ったとしても、CSVダブルクリックでExcelが起動すると文字化けします。
では、どうすればいいか？
実は意外と簡単で「BOM」を付ければ良いです。
BOMとはByte Order Markの略で、その昔エンディアンが云々・・・
と言う細かい話は置いておいて、かなり雑な説明をすると、UNICODEと一口に言っても数種類あり、それを区別するための情報をファイルの先頭に付けることが出来ます。その情報がBOMです。
日本語のExcelは、BOM無しCSVファイルはShiftJISとして読み込もうとしますが、BOM付きファイルであれば、BOMに従って文字コードを決定してファイルを開きます。
そのため、CSVファイル出力機能を実装する際にBOM付きのUNICODEファイルを生成するようにすると良いです。
一般的にはBOM付きのUTF-8のファイルを作ることになると思いますので、UTF-8のファイルを出力する際に、ファイルの先頭に「0xEF 0xBB 0xBF」の3バイトを付加すればOKです。
「Windows10でシャットダウン前にプログラムを実行」が動かない時
こんにちは東京Kです。
こんなニッチな記事、誰が読むんだろう？と思いつつ・・・
Windows10で、毎回、シャットダウン時にどうしても何かのプログラムを動かしたいことがあります。ものすごくニッチな状況ですが。
そういうときは、グループポリシーエディタで設定すれば、Windowsのシャットダウン時にプログラムを実行することが可能です。
その辺の詳しいやり方は、ネットで調べてもらうとして、今回は、
「グループポリシーで、シャットダウン時のプログラム実行を設定し、
シャットダウンしてみたけど、実行されない」
という場合についてです。
これについては、Windowsのスタートメニューからのシャットダウンは「完全なシャットダウン」では無い場合があるため、シャットダウンとして認識されてないという問題かもしれません。
※前回の記事参照。
これが原因ならば「完全なシャットダウン」をやれば動くはずですので、手っ取り早くは、シャットダウンコマンドを実行してみれば分かります。
shutdown /s /t 0
グループポリシーでシャットダウン時にプログラムを実行するなんてニッチな状況ならば、完全なシャットダウンをしても問題ないかと思いますので、参考にしてください。
なお、自作プログラムからexecなどでshutdownコマンドを叩きたくないならば、Win32APIのExitWindowsExで「EWX_POWEROFF」を渡しても同じ効果があります。
WindowsUpdateを回避して電源を切る方法（今はできないらしい）
「今日も業務終了だ！パソコンの電源を切って、ロッカーにしまうだけだ」
ぽちっとな・・・
ｷﾞｬｱｧｧｧｧ━━━━━━(|||ﾟДﾟ)━━━━━━!!!!!!
「WindowsUpdateが入ったーーーー」
と言う経験は、誰しも1度はあるかと思います。
今回はそれを回避する方法です。
・・・と書いていましたが、
どうやら最近はこれでは回避できなくなったようです。
なので、あまり以下は参考になりません。
残念・・・orz
AWSのリザーブドインスタンスのススメ
みなさんAWSのEC2を使ってますか？
最近、AWSばかり触っている気がしないでもない東京Kです。
いろいろとAWSでのネタの種はあるのですが、今日のお話は・・・
「EC2を使っていてリザーブドインスタンスを使ってない人は今すぐ使うことを検討しましょう。」
クラウドサービスからのメールを迷惑メールにしづらくする方法
こんにちは、東京Kです。
早速本題ですが、インターネットのクラウドサービスを利用している際に、そのサービスからのメールを送ることがあるかと思います。
その際、メールの差出人を、自社のメールアドレスに設定すると迷惑メールになることが比較的よく発生します。
今回は、それを軽減するためのお話です。
なお、今回は、技術者ではない方向けに、多少かみ砕いて説明しており、細かい枝葉の話は入れておりませんので、多少用語の使い方が不正確ですが、その点はご容赦ください。
また、今回の話の後半は、当社のクラウドサービスの話になっておりますが、世の中にあるクラウドサービス全般に言える話ですので参考にしてください。
リモートワークに必要なVPNをクラウドで用意してみた
ご無沙汰しております。
ネットワークエンジニアのsaitoです。
今回こちらの記事を見たことが発端でこの記事を書いてみました。
https://www.nikkei.com/article/DGXMZO58449120U0A420C2TJ3000/
コロナウィルスの影響で、多くの会社がテレワークを急速に始めることになりましたが、
そのために必要なVPN機器が入手できない、という内容です。
マスクも去ることながら、そんなところにも影響があるのか！と驚いたのと同時に、今でも物理装置としてのVPN機器が求められているという事にも驚きました。
当社はIT前提経営のもと2012年よりノマドワーキング・リモートワーク制度を実施しているため、今回のコロナウィルスを発端とした全社的なリモートワークへの移行もスムーズに行えました。
現在はバックオフィスも含め、全員がリモートワークで業務にあたっています。
またVPN装置をはじめ、サーバーや電話などほぼクラウド化しているため、急激な処理能力増にも対応できます。
今回はエンジニアにとっては当たり前の事でも、非エンジニアの方々にこんな方法が使えるというご紹介ができればと思います。
電話
当社は2017年の時点で電話をクラウドPBXによりIP電話化しました。
導入記はこちらをご覧いただければ幸いです。
https://www.webimpact.co.jp/banchoblog/?p=1670
当社ではslack等のチャットツールをメインに利用しており電話の利用は最小限にしていますが、どうしても業務上必要なシーンもあります。
従来の電話はどうしても場所に固定されたツールでしたが、IP電話化したことにより、リモートワークにおいてオフィスにいなくても問題なく業務を遂行できています。
VPN
こちらが今回の本題となります。
ノマド・リモートワーク前提の当社としては、VPNは業務遂行のため大変重要なインフラです。
VPNの終端機能はAWS上に構築しています。
当社の場合、多くの社員がリモートワークに移行しても問題無いようVPN性能設計に余裕を持っており、特に性能の逼迫などは発生していませんが、仮に性能が不足してもクラウドのため処理性能をすぐに上げる事が可能です。
また、これから新規でVPN環境が必要になったとしても、例えばAWS環境上でVPN用の環境を作成すれば、素早く利用開始することができます。
専用のVPN機材の調達などは必要ありません。
当社の場合、Pマークの要件のため、VPN装置としてFortiGateのクラウド版を利用しています。
現在は元々アプライアンスとして有名なネットワーク機材のクラウド版も各種出ていますため、慣れ親しんだUIそのままクラウド化ができます。
https://aws.amazon.com/marketplace/pp/Fortinet-Inc-Fortinet-FortiGate-Next-Generation-Fi/B00PCZSWDA
また、現在はAWSマネージドのVPNサービスも登場していますので、こちらを使うのも良いかもしれません。
https://docs.aws.amazon.com/ja_jp/vpn/latest/clientvpn-admin/what-is.html
PC環境
元々エンジニアは全員ノートパソコンで業務を行っていましたため、どこにいてもVPNへ接続すれば業務ができる環境になっていました。
バックオフィスに関しては一部デスクトップPCでの業務もありましたが、多くはDaaS(Desktop as a Service)へ移行していました。
DaaSはクラウド上にあるパソコンをリモートで利用できる仕組みです。
そのため社外からでもDaaSへ接続すれば社内と同じ環境が使えますので、こちらも比較的スムーズにリモートワークへ移行できました。
当社ではAmazon WorkSpaceを利用してDaaSを実現しています。
https://aws.amazon.com/jp/workspaces/
如何でしたでしょうか。
まだ暫くリモートワーク体勢が続くでしょうし、これを機に平時においてもリモートワークが定着していくものと考えられます。一足先にノマドワーク、リモートワークを導入した当社のノウハウが、少しでも参考になれば幸いです。
WelCart用LINE PAYプラグインを公開しました。
たいとるおんりー
・・・では寂しいのですが、それ以外に言うことがない。
大体のことはREADMEに書いてありますし。
https://github.com/webimpact-dev/usc-e-shop-line
経緯としてはREADMEに書いてあるとおり、公開を目標として、社内での勉強の時間を使ってWordpressとWelcartのプラグイン開発を一部の社員が開発したものです。ちなみに、オリジナルの開発者は私ではありません。
で、それなりに有用そうなものが出来たため、公開がためらわれた時期もありますが、そうこうしているうちに、昨年末にWelcartの公式でLINE PAYのプラグインが販売されたので、非公式として公開することになりました。
ぶっちゃけ、公式版の方が機能は多いですので、そちらを使うことをお勧めします。
前述のように公開がためらわれた時期があったせいで、年明けの公開予定となり、さらにコロナの影響で公開作業をする余裕も無く、こんなタイミングで公開です。
それではまた、何かの機会にー
【新雲堂】React Native 開発日記
自己紹介
東京コアののムンと申します。
マレーシアクアラルンプール出身です、現在東京に在住しております。
当ブログは自分が担当した当社のアプリ開発の記事を述べています。
宜しくお願い致します。
新雲堂
入社後に初めて上司に任せて頂いた作業は「雲堂」というアプリのiOS版を開発することになりました。 その後、お客様から、新しいバージョンのご依頼があり「新雲堂」プロジェクトが開始しました。今回、アプリを着手するにあたり、どのようなモバイルアプリフレームワークがよいかを、上司やエンジニアたちで検討がされました。その結果、「React Native」を採用することにしました。
React Native
Facebookが開発したiOSとAndroidのアプリが作られるJavaScriptのフレームワークです。JavaScript言語一つだけで、OSに関わらず両方のプラットフォームで動くものが作れます。私は当社のReactJSを使っている別の案件をやったことがありましたので、Reactの経験がある人にとって勉強しやすく長い時間が必要ありません。また、JavaScriptはWeb界隈ではよく使う言語なので、他の言語と比べると開発メンバーが集めやすく学習コストも低いです。
開発環境構築
React Nativeの公式サイトによるとプロジェクトの作成は「Expo」と「Building Projects with Native Code」の二つの方法があります。最初は「Expo」の方法を使いましたが、仕組と使い方の勉強はかなり時間がかかりますので、「Building Projects with Native Code」の方式でプロジェクトを始めました。
プロジェクトの作成手順は基本的に以下の通りです（macOS端末向け）。
- npmでreact-native-cliをインストール
npm install -g react-native-cli
＊「Building Projects with Native Code」の場合は予めXcodeとAndroid Studioのインストールが必要です。
- ターミナルでプロジェクトを作成
react-native init New_Undo
- 実行＆デバッグ
react-native run-ios
react-native run-androidこの二つコマンドどちらを入力しても動くはず、または各プラットフォームのIDEでネイティブ方式のように実行することも可能です。
＊Androidの場合はアプリ起動する前、エミュレータが起動中の状態が必要です。
React Nativeはアプリ起動中でもリロードする機能があります。
- Xcodeのシミュレータで、Command+Rで実行します。
- Android Studioのエミュレータで、Control+M（macOSの場合はCommand+R）で設定を呼び出して「Enable Hot Reloading」を選択し、ホットリロードを有効にします。
開発体験
React Nativeは基本的にフロントエンドの技術ですが、一部のライブラリを使う時に少しネイティブコードを書くこと場合もあります。ネイティブのコードと言っても、GitHubでそれらのライブラリを作られていた開発者のREADMEに記載があるのでそれに従えば問題ないと思います。
JavaScript開発者が今まで使っていたライブラリはReact Native開発でも適用可能なので、これはJavaScript開発経験がある私にとって優しく親しみがある環境です。この点はReact Native開発において、かなり楽な点だと思います。さらに、Viewのコードを少しだけ変更した場合は再ビルドせず、React NativeのHot reloadingを使うと、コードの変更はシミュレータに伝達され、直ぐ変更後の結果が確認できます。海外だけでなく、日本国内にもReact Nativeのコミュニティが拡がっています。国内は勉強会が常に行っていて、問題に直面し悩む時に、世界中の開発者と意見を交換したり手伝って貰ったりできます。
意外にReact Nativeのアプリを開発する時に足りない部分が多いです。iOSは充実していますが、Android側の方が少なく、コンポーネントが両方でも対応できるライブラリを追加しなければいけないです。例えば、各プラットフォームのUIを補助したければ、UIコンポーネントがまとまった「Native Base」を使います。但し、開発中はライブラリを入れすぎましたら、将来的にどのライブラリがメンテナンスするか、結構大変だと思います。
元々React Nativeは生JavaScript用に開発されましたが、今回は型付きのTypeScriptを使うことにしました。TypeScriptでコードを書くと、当社の他のエンジニアにとってコードを読みやすくなり、良くないコードを未然に防げます。これは将来のプロジェクトメンテナンスに対して、非常に便利で有利です。今回は、TypeScriptを導入する方法として「react-native-typescript-transformer」というライブラリを使いました。
「雲堂」の開発で使っている主なライブラリは以下の通りです：
- Native Base – UI補助
- React Native Safe Area View – iPhoneX端末対応
- React Native Sound – 音声を流す
- React Native Splash Screen – スプラッシュ画面
- React Native TypeScript Transformer – TypeScript対応
- React Navigation – 画面遷移
- Redux – 状態管理
注意点
React Nativeを使う時に注意しなければいけないこともあります。個人の開発体験によって簡単に説明します。
慎重にライブラリを選ぶ
相応しい高質なライブラリを選ぶことは検討が必要です。例えば、不具合の発生が多かったり頻繁にメンテナンスしていないライブラリは開発者にとって少し不安があります。他の開発者が勧める人気があるライブラリを採用した方がいいです。その上、ライブラリの使い方がドキュメントではっきり書いてあることも重要です。
各端末のUI対応
端末によって縦横の大きさは違いますので、UIが崩れる場合があります。タブレットとやスマホに関わらず、ユーザに快適なアプリ体験をさせるため、違和感がないUIを表示することは大事です。
画面遷移の設計
XcodeやAndroid Studioを用いたネイティブ開発と違って、Interface Builderや、画面遷移を定義できるツールなどは提供されていません。なので、画面のナビゲーションやデータの渡し方はどういう風に動作するかわかりにくいです。開発を始める前に、予め画面遷移のモックアップを設計した方がいいと思います。それをしなければ、アプリの規模が大きくなると各画面の対応が難しくなってしまいます。
ファイルやディレクトリ構成
プロジェクト作成の最初は垂直分割の構造でしたが、ファイルが散らかっていて、大規模な構成になった時に管理しづらく大変です。水平分割の構造をすると、ファイルがページごとのディレクトリ配下にまとめて管理しやすくなります。ファイルの役割もわかりやすいし、プロジェクトの構造も整理整頓に見えます。
まとめ
近年ではReact Nativeの人気が上がっていますので、経験がある開発者は結構多いです。雲堂の基本実装は二週間程をかかりました。開発完了の時間は思ったより早かったです。自分のフロントエンド能力はあまり得意ではなく、一番難しかったところはReact NativeのLayoutを調整することです。コードから反映した結果は各プラットフォームのUI表示が異なる場合がよく発生します。それだけでなく、アプリの状態管理「Redux」の実装も上手くいかなかったです。公式ドキュメントを読んでも、その仕組をなかなか理解できませんでした。しかし、実際にコードを書くことによって理解することができました。
初めてクロスプラットフォームのアプリを作ったので、開発の過程で色々な知識を身につけました。特にTypeScriptの書き方やデータの状態管理は元々私がやったことがなかったものです。React Nativeを全く触ったことがない私にとっては今回のアプリが作れたことはすごく達成感があります。
【BtoBの企業さま向け】ランディングページを構築するメリットとは？
TV広告に迫る勢いのデジタル広告
ひと昔前までは「広告」と言えば「テレビCM」「新聞・雑誌広告」などが中心でした。
これらマスメディア広告は一度に大勢の方に訴求できる反面、非常に高価で大手企業以外は手を出せないでしょう。
それに対して「Web広告」は、ターゲットを絞って小規模で始めることができるため、マスメディア広告に比べてはるかにリーズナブルです。
また、実際に何人ぐらいの方がホームページを見たのか、そのうちの何％が申し込んだのかなど「効果」を測定しやすく、運用しながらの対策や調整も可能です。
今や多くの企業や店舗がWeb広告で集客し、ダイレクトに売上を上げています。電通の海外本社「電通イージス・ネットワーク」は「世界の広告費成長率予測」で2018年中に「デジタル広告」は「TV広告」を抜いて最大のメディアになる、と予測されています。
（参照：電通イージス・ネットワークが「世界の広告費成長率予測」を発表）
「BtoC」企業では当たり前のWeb広告「ランディングページ」
「ランディングページ（Landing Page、LPと略されます）」をご存知でしょうか。通常のコーポレートサイト（会社概要や沿革などが掲載されている会社の公式ホームページ）とは違い、売りたい商品だけにフォーカスした1枚もの（1ページ）のWeb広告です。
「Web版のちらし」とも言えますが、紙の広告とは下記のような違いがあります。
- Webは紙媒体と違ってスペースに制限がないので、商品の特徴や使用するメリット、商品に対する熱い思いを存分に掲載できる。
- 商品を検索したユーザーだけに広告表示ができるので、ターゲットだけに訴求できる。
- 「お申込みフォーム」「お問い合わせフォーム」を設置することで、ユーザーの気持ちが高まっている間に申し込みまで完了できる。
今や非常に多くのBtoC企業（中小企業や小さな店舗、個人まで！）がこの「ランディングページ」で売上を上げています。
御社の製品を必要としている企業に向けて、Webで訴求しませんか？
「ランディングページ」は「BtoC企業」では既に当たり前の営業ノウハウとなっていますが、「BtoB企業」ではまだまだ取り入れられていないのが現状です。
「企業向けの製品」であっても、従来型の営業、特に業務を妨げられる「突然の電話」や「訪問営業」には皆嫌気がさしているのではないでしょうか。
パソコン・スマートフォン活用が当たり前の時代、自社に必要な製品があれば皆「検索」して探します。
御社の製品がどんなに素晴らしくても、コーポレートサイトの「商品紹介」だけでは必要としているユーザーに情報を届けることは難しいのです。
「会社情報」とは別に「商品訴求」そして「集客・販売」に特化した「ランディングページ」を持つことで、御社の製品の魅力を必要としているユーザーに届けましょう！
ユーザーに見つけてもらうために大切なこと。
せっかく作ったランディングページも、ターゲットユーザーに見てもらえなければ役目は果たせません。
ユーザーはGoogleやYahooなど検索サイトにキーワードを入力し、お目当ての製品を探します。この時ランディングページを「適切に表示」させ、「クリック」してもらうことが重要です。
そこで「検索結果」ページ上部や右側の目に止まりやすい場所に「広告」として表示させる「検索連動型広告（リスティング広告）」という手法を使います。
大量の不特定多数のユーザーに訴えるマスメディア広告のようなインパクトはありませんが、ピンポイントで表示できるのでニーズに対応しやすく、無駄がありません。
また、通常の「検索連動型広告」は1クリックごとに課金されるクリック課金（Pay Per Click、PPCと略されます）なので、「ページを見てもらえた分だけの費用」になります。
1ヶ月の広告費の上限も設定できるため「毎月◯万円分の広告枠掲載」など、計画的な運用が可能です。
「ランディングページ」についてもっと詳しく知りたい方へ
「せっかく良い製品を作っているのだから、もっと必要とされている企業に知ってほしい、情報を届けたい、そして購入に繋げたい」という企業さま、お気軽にご相談ください！
