Categories

Latest comments

ChatGPTやCopilotを活用したペルソナ作成

wakairo @wakairo
Last edited

Copilotを利用したペルソナの作成例

ペルソナ作成用プロンプトとその実行結果

入力プロンプト:

あなたはプロのUXデザイナーです。 以下のサービスのペルソナを作成してください。
#背景、#課題、#課題への対応策、#想定ターゲット顧客
を読み込んで、ペルソナを作成してください。
#フォーマットに沿って出力すること。

#背景:"""
サービス開始から20年が経過したSNSのデザインについてメジャーアップデートを行う。
"""

#課題:"""
時間経過と共にメインユーザーの年代も上がってしまい、若い年代のユーザーが入りにくくなってしまっている。
"""

#課題への対応策:"""
若い年代のターゲット顧客が魅力を感じるUXにする。
ただし、現在のメインターゲットにとって支障が無いUX変更の範囲内に収める。
"""

#想定ターゲット顧客:"""
30歳前後の働き盛り。
趣味でも仕事でも交友関係が広い。
友人や知人にSNSを勧誘できる人。
"""

#フォーマット:"""
名前:
年齢:
性別:
趣味:
勤務先の企業風土:
役職:
職務内容:
特徴的な行動・活動:
"""

Coplilotの回答:

ペルソナの作成をお手伝いします。
以下に、ご指定のフォーマットに沿ったペルソナを提示します。

名前:佐藤 明美 (さとう あけみ)
年齢:29歳
性別:女性
趣味:旅行、写真撮影、ソーシャルメディアでの活動
勤務先の企業風土:革新的で、社員の自由な発想を奨励するIT企業
役職:マーケティングマネージャー
職務内容:新しいマーケティング戦略の開発、チームのリード、プロジェクトの管理
特徴的な行動・活動:仕事の成果をSNSで共有し、業界内外のネットワークを広げる。趣味の旅行中に撮影した写真をSNSで共有し、フォロワーとの交流を楽しむ。

このペルソナは、SNSのデザインを若い世代にも魅力的に感じさせるための参考になるでしょう。
また、現在のメインターゲットにとっても支障がないようなUX変更を考慮する際に役立つ情報を含んでいます。
ご要望に沿った内容でしょうか?

続けてペルソナに関して質問をする例

入力プロンプト:

この佐藤さんは既にSNSで盛んに活動しています。
この佐藤さんが年代が高めのSNSを新たに始めるとしたら、どのような考えの結果でしょうか?

Coplilotの回答:

佐藤さんが新たに年代が高めのSNSを始めるとしたら、以下のような考えがあるかもしれません。

- **プロフェッショナルなネットワーキング**: 佐藤さんは仕事での成果をSNSで共有し、業界内外のネットワークを広げることを重視しています。年代が高めのユーザーが多いSNSは、より経験豊富な専門家や業界リーダーとのつながりを築くための新たな機会を提供するかもしれません。

- **多様な視点の獲得**: 年齢層が広いSNSでは、異なる世代の意見や視点に触れることができます。これにより、佐藤さんはマーケティング戦略を考える際に、より幅広い顧客層のニーズを理解することができるでしょう。

- **影響力の拡大**: 若い世代だけでなく、年配のユーザーにも影響を与えることで、佐藤さんのSNS上での影響力をさらに拡大することができます。これは、彼女の職務内容やキャリアにとって有利に働く可能性があります。

- **個人的な成長**: 新しいSNSを通じて、佐藤さんは自身の趣味や興味を共有し、異なる年代の人々と交流することで、個人的な成長を遂げることができるでしょう。

これらの考えは、佐藤さんが新しいSNSを始める際の動機として考えられるものです。
彼女の活動的な性格とプロフェッショナルな目標に合致していると言えるでしょう。
どう思われますか?
1
Raw
https://www.techtips.page/en/comments/279
😄1
🔧1

ChatGPTやCopilotを活用したペルソナ作成

wakairo @wakairo
0
Raw
https://www.techtips.page/en/comments/278
💡1
❤️1

importmap-railsは、2.x系でiOS 16.3以前のサポートを打ち切りました。

wakairo @wakairo
Last edited

問題

importmap-railsはv2.0.0で、「ネイティブでImport mapsに対応していないブラウザでImport mapsを機能させるためのshims」の利用を打ち切りました。 一方で、iOS 16.3以前に搭載されているSafariブラウザは、ネイティブではImport mapsに対応していません。 したがって、importmap-railsを1.x系から2.x系にバージョンアップすると、iOS 16.3以前のデバイスではJavaScriptを利用したRailsアプリが動かなくなります。 このことは、この打ち切りのプルリクエスト #216で議論されているように、開発陣に既に認識されており、認識した上での打ち切りとなっています。

なお、特にiOS 15は、2024-01-22にセキュリティアップデートが出ているAppleがサポートをまだ続けているOSであるにもかかわらず、最新の15.8.1へアップデートしたデバイスであってもRailsアプリが動かなくなるため要注意です。

(参考)iOS 15とiOS 16の状況

以上から、iOS 15とiOS 16のデバイスは、2024年2月現在まだまだ利用されていると言えます。

回避策

importmap-railsを用いたRails 7アプリで、iOS 16.3以前をサポートするには、 以下のようにjavascript_importmap_tagsの前にes-module-shimsを入れます。 詳細は、GitHubの公式リポジトリのREADMEの該当部分(Supporting legacy browsers such as Safari on iOS 15)を参照してください。

<script async src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js" data-turbo-track="reload"></script>
<%= javascript_importmap_tags %>

参考情報

0
Raw
https://www.techtips.page/en/comments/277
😄1
🔄1
😿1
💯1

Windows上でPlaywrightを使ってWebKitブラウザを実行する方法

wakairo @wakairo

Windows PCでWebアプリなどを開発しているときに、iPhoneなどのAppleデバイスでの動作確認をしたいときがあります。 しかしながら、Appleデバイスの標準ブラウザであるSafariのWindows版は2012年頃にサポートが終了しています。 その一方で、SafariのHTMLレンダリングエンジンであるWebKitをWindows上で走らせることは現在でも可能です。

Playwrightを利用するとWebKitブラウザをWindowsにインストールして実行することが比較的簡単に出来ますので、 このコメントではその方法を以下に示します。

NodeJSのインストール

Windowsの公式パッケージマネージャであるwingetを利用すれば、以下のコマンドでNodeJSをインストール出来ます。

winget install -e --id OpenJS.NodeJS.LTS

Playwrightのインストール

まず、適当な作業フォルダを作成します。次にそのフォルダでコマンドプロンプトかPowerShellを開き、以下のコマンドを実行します。

npm init playwright@latest

このコマンドを実行すると出てくる「Install Playwright browsers」の質問項目でYesつまりtrueを選択します。 (ここでYesを選択できなかった場合には、このコマンドに続いてnpx playwright install webkitを実行して下さい。)

WebKitブラウザの起動

以下のフォルダを開き、Playwright.exeを実行すると、WebKitブラウザが起動します。

C:\Users\<ユーザ名>\AppData\Local\ms-playwright\webkit-<バージョン>
1
Raw
https://www.techtips.page/en/comments/276
😄4
🙋4
🔄2
🔧2
💡2
😿1
💯1
🎉1
❤️1

WSL2上にてrails serverで立ち上げたサーバに別デバイスからのアクセスを可能にする方法

wakairo @wakairo
Last edited

背景

WindowsのWSL2環境でRailsアプリを開発しています。開発しているWebアプリに関してAppleのSafariブラウザでの動作確認が必要になりました。そこで、同一LAN内にあるiPhoneやiPadといった別デバイスから、WSL2環境においてrails serverコマンドで走らせたサーバへ、アクセスできるようにしました。

手順

LAN接続の設定

後述のファイアウォールの設定にて、プライベートネットワークに限定する設定をする場合には、Railsサーバを走らせているPCのLAN設定で、ネットワーク プロファイルをプライベートにしておきます。

WSL2で走っているLinuxのIPアドレスの確認

ifconfigの出力のinetのところなどで、WSL2で走っているUbuntuなどのLinux OS側のIPアドレスを確認し、転送先アドレスとして控えます。

LinuxのIPアドレスが正しいことの確認

まず、bin/rails server -b 0.0.0.0でWSL2上でRailsサーバを起動します。
次に、このRailsサーバに、WSL2環境ではなくWindows上で普通に走っているブラウザから、先ほど調べたWSL2で走っているLinuxのIPアドレスに対し http://(LinuxのIPアドレス):3000/ というようなアドレス(ここではポート番号を3000としていますが、別のポートをRailsサーバに用いている場合はそのポート番号に変更して下さい)でアクセス出来ることを確認します。
ここでアクセスに失敗するようでは何かしらが間違っていますので、まずはこのようにアクセス出来るようにしましょう。

ホストOSであるWindowsのIPアドレスの確認

ipconfigなどで、Windows側、つまり、ホストOS側のLAN上でのIPアドレスを確認し、転送元アドレスとして控えます。

ポートフォワーディングの設定

管理者権限で以下のコマンドを実行します。なお、特に理由が無ければ、転送元ポートは転送先ポートと同じ(3000)で大丈夫です。

netsh interface portproxy add v4tov4 listenaddress=<転送元(Windows)のIPアドレス> listenport=<転送元ポート> connectaddress=<転送先(Linux)のIPアドレス> connectport=<転送先ポート>
ファイアウォールの設定

Windowsのファイアウォールの設定にて、「受信の規則」として以下の設定を追加します。

  • プロトコルの種類:「TCP」
  • ローカルポート: 「特定のポート」「3000(転送元ポート)」
  • リモートポート: 「すべてのポート」

なお、ファイアウォールの設定にて、プライベートネットワークに限定したり、テスト時以外は無効にしたりするなど、セキュリティには十分に配慮をして下さい。

接続確認

同一LAN内の別デバイスから、 http://(WindowsのIPアドレス):(転送元ポート)/ というようなアドレスでアクセス出来ることを確認します。

参考情報

0
Raw
https://www.techtips.page/en/comments/274
😄2
🔧1
💡1
❤️1

Windowsでのnetshを用いたポートフォワーディングの設定

wakairo @wakairo
Last edited

ポートフォワーディングを設定する

管理者権限で以下のコマンドを実行する。

netsh interface portproxy add v4tov4 listenaddress=<転送元(ホストOS)のipアドレス> listenport=<転送元ポート> connectaddress=<転送先ipアドレス> connectport=<転送先ポート>

注意事項:ポートフォワーディングの実用ケースでは、ファイアウォールの設定も追加で必用な場合が多いです。参考情報: https://gunmagisgeek.com/blog/other/7171

ポートフォワーディングの設定を確認する

netsh interface portproxy show all

ポートフォワーディングを削除する

netsh interface portproxy delete v4tov4 listenaddress=<転送元(ホストOS)のipアドレス> listenport=<転送元ポート>

参考情報

0
Raw
https://www.techtips.page/en/comments/273
😄3
🔧2
🔄1
❤️1

リアクション機能をリリースしました!

TechTips TechTips運営 @TechTips

本日(2024/01/26)リアクション機能をリリースしました。
それぞれのコメントの右下にあるアイコンをクリックすることで、リアクションの種類を選んでリアクションを付けることが出来ます。
なお、ログインをしていなくてもリアクション出来ます!
お気軽にご利用下さい!

0
Raw
https://www.techtips.page/en/comments/272
🎉3
❤️2

JSONのobject name (hash key)は文字列限定

wakairo @wakairo
Last edited

JSONのobject name(辞書やハッシュ、連想配列におけるキーに相当するもの)の型は文字列のみに限定されています。 規格書のObjectsのセクションには、"A name is a string"と明記されています。

Rubyでの検証例

RubyでJSONライブラリを利用した場合でも、当然ですが、以下のようにキーは全て文字列になります。 また、その結果、JSON文字列からRubyのハッシュを再構築すると、元のハッシュと異なったものになってしまいます。

require "json"

data = {"string" => "String", :symbol => "Symbol", 1 => "Integer"}
str = JSON.dump(data)
# => "{\"string\":\"String\",\"symbol\":\"Symbol\",\"1\":\"Integer\"}"
JSON.parse(str)
# => {"string"=>"String", "symbol"=>"Symbol", "1"=>"Integer"}

したがって、キーに文字列以外を用いるときには、プログラム側で適宜キャストするなどの対応が必要となります。 その中の対応方法としては、JSONではなく、以下のようにYAMLを使うという手もあります。

require "yaml"

data = {"string" => "String", :symbol => "Symbol", 1 => "Integer"}
str = YAML.dump(data)
# => "---\nstring: String\n:symbol: Symbol\n1: Integer\n"
YAML.load(str)
# => {"string"=>"String", :symbol=>"Symbol", 1=>"Integer"}

ただし対応方法の選択においては、セキュリティの観点での注意が必要です。 一般に、JSONよりもYAMLの方が高度な記述が可能であるため、YAMLの方がセキュリティの問題が起きやすいと考えられます。 実際にYAMLを悪用した攻撃手法が知られています。 ですので、ユーザーが任意の記述を送り込めるような場面では、JSONにするかYAMLにするか、はたまたXMLなどの第三の規格にするかの選択において特に慎重な判断が求められます。

0
Raw
https://www.techtips.page/en/comments/270
😄2
🔧1
💯1

meta-tags側のtruncateでは、スペース文字のところで切り詰めが行われます

wakairo @wakairo
Last edited

問題

meta-tagsはtitleやdescriptionをSEOに適切な長さまでに切り詰めますが、titleなどの中にスペース文字が含まれていると、スペース文字のところで切り詰めてしまいます。そのため、文章の先頭付近のみにスペース文字がある文章は大幅に切り詰めが行われてしまいます。
例えば、次の文章にあるスペース文字は10文字目のところのみです。

Microsoft Copilotは、あなたの言葉をパワフルなコンテンツに変えるAIアシスタントです。あなたのニーズに合わせて、文章を生成、要約、編集、変換したり、コードや詩などの創造的なコンテンツを作成したりします。

したがって、80文字に切り詰める設定であっても、この10文字目のところで切り詰められて「Microsoft」となり、80文字に比べ大幅に短い文字数に切り詰められることになってしまいます。

回避策

回避策はいくつかあります。

v2.21.0で追加された'truncate_on_natural_separator'の設定を利用する

設定ファイルであるmeta_tags.rbの中で、以下の記述を行うことで、スペース文字のところで切り詰めなくなります。詳細はmeta-tagsの設定truncate_on_natural_separatorの説明をご覧ください。

config.truncate_on_natural_separator = nil

アプリケーション側で切り詰めを行う

meta-tagsに渡す前に、あらかじめアプリケーション側で切り詰めを行うことでも、この問題は回避できます。なお、meta-tagsの設定によっては、meta-tags側での切り詰めをオフにすることも出来ます。設定方法についてはmeta-tagsのREADMEを参照してください。

(参考)内部的な原因

meta-tagsはRuby on Railsのtruncateヘルパーメソッドを最終的に呼び出しますが、このヘルパーメソッドをラップするメソッドを内部に持っています。このラッパーメソッドの引数であるnatural_separatorを省略してのメソッド呼び出しがmeta-tags内に存在し、v2.19.0までは、この省略時のnatural_separatorのデフォルト値がスペース文字であるため、スペース文字のところでの切り詰めが発生しています。

v2.21.0からは、前述の引数natural_separatorが廃止され、ラッパーメソッド内で前述の'truncate_on_natural_separator'の設定値が与えられるようになっています。ですのでこの設定値を変えることで、スペース文字のところで切り詰めなくしたり、任意の文字での切り詰めたりすることが可能になりました。

0
Raw
https://www.techtips.page/en/comments/269
😄1
🔄1
🔧1
😿1