x dev 20121106
TRANSCRIPT
![Page 1: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/1.jpg)
デバイス時代における生産性とUX~今後のエンタープライズ開発における両立のポイントとは~
インフラジスティックス・ジャパン株式会社東 賢
株式会社セカンドファクトリー 有馬 正人
![Page 2: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/2.jpg)
INFRAGISTICS 【名】
ɪnfrədʒɪˈstɪks : インフラジスティックス
1. ニュージャージーに本社を置く UI コントロールを中心としたソフトウェア製品を開発・販売するグローバルカンパニー
2. Infrastructure(基礎構造)+ logistics(後方支援)
3. バイク乗りが社長の東京・原宿の会社【日本】
4. インフラさん【俗称】
![Page 3: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/3.jpg)
Ken Azuma
東 賢(Ken Azuma)インフラジスティックス・ジャパン株式会社
代表取締役/シニアUXアーキテクト
「全ての状況における生産性の向上」と
「優れた UI / UX をお届けすること」の二つを
コアバリューとして、様々な形で
アプリケーションにかかわる皆様が、
優れたユーザーインターフェイスを通じ、
満足度の高いサービスを展開されるための
様々なお手伝いをさせていただいております。
インフラジスティックス・ジャパン株式会社
fMicrosoft MVP
Windows Touch & Tablet PC
Blog
![Page 4: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/4.jpg)
![Page 5: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/5.jpg)
NETADVANTAGE
![Page 6: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/6.jpg)
ANDROID HTML5 iOS
![Page 7: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/7.jpg)
インフラジスティックス・ジャパン株式会社
Windows ストアアプリケーション用UIコントロール (Beta)
![Page 8: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/8.jpg)
避けることのできないモノ:Consumerization of IT
これまで以上に短いサイクルで細やかな要求に応えられる開発プロセスが求められるようになる
![Page 9: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/9.jpg)
デバイスフォームファクターの変化
利用シナリオ/スクリーンサイズ/インプットデバイス/OS/ブラウザなど様々な要素の多様化に対応する必要が出てきている
![Page 10: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/10.jpg)
Consumerization of IT が期待値を引き上げる
ユーザーは普段の生活の中で高度なIT活用体験を当たり前に享受している
ユーザーがエンタープライズITにおいても同様の体験を求める傾向が加速する
![Page 11: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/11.jpg)
Touch = More Speed!
タッチインターフェイスであることによって、アプリケーションにこれまで以上のレスポンススピードを求めることになる。
![Page 12: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/12.jpg)
“App” = more update! Less cost!
デプロイメントコスト
メンテナンスサイクル
グローバルマーケット
低価格化
これまでの開発/リリースサイクルでは追いつけ
なくなる。
![Page 13: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/13.jpg)
身近に接する IT が一貫性を持ち、直感的である
Forrester Research, Inc.、『The Hour Of The Vendor Strategist: Three Mega Business Trends Will Reshape The Tech Sector』
ユーザーは普段の生活の中で高度なIT活用体験を当たり前に享受している
![Page 14: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/14.jpg)
デバイスの時代は...
AGEDEVICE
![Page 15: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/15.jpg)
DEVICE AGE
AGEDEVICE
開発者にとって「氷河期」のような危機的状況にある
![Page 16: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/16.jpg)
DEV-ICE-AGE
「恐竜」のような組織・体制では生き残れない。俊敏に変化に適応できる必要がある。
![Page 17: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/17.jpg)
DEV-ICE-AGE
この変革の時代を生き残るための2つのキーポイントとは:
開発スピードを加速させる生産性
ユーザー体験のデザイン
![Page 18: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/18.jpg)
UIコントロールを使った生産性の向上
できるだけ部品をそのまま利用することによって、できるだけ「作らない」ことを検討する。
そのために、標準コントロールだけでなく、多くのUIコントロールをカードとして持っておく。
既に顧客の頭の中にあるUIのイメージは標準コントロールの範囲を大幅に超えている。
![Page 19: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/19.jpg)
UIコントロールを使った生産性の向上
他のどの産業も生産工程で「開発」をしていない。
優れたプロトタイプを繰り返し「開発」し、最終的な生産工程でスムーズに組み立てていく。
![Page 20: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/20.jpg)
アセットベクターやビットマップによるアイコンなど、
UI 上でそのまま表示されるもの
スタイル UI コントロールに適用される外観
モーション 状態内/状態間のアニメーション
レイアウトネスト構造を持ったグループ化されたレイアウトコ
ントロール
UI コントロール多くはデータバインドの対象となる UI コントロー
ル
スクリーン 複数のレイアウトを管理する画面の集合
組み立てるのは何か?
これらの項目はUIガイドラインの項目として書かれるようなポイントとして押さえるべき大項目となる
![Page 21: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/21.jpg)
UIコントロールを活用した開発
重要なポイント設計にコンポーネントを合わせるのではなく、
コンポーネントを設計時点の選択肢として検討することで最大の効率化が実現
フェーズ 標準コントロール使用 UIコントロールを使用
設計 • 標準のコントロールでカバーできない仕様は、追加開発の為の設計が必要
• 多機能なコンポーネントを前提とすることで、多くの仕様を吸収することが可能
• 早期に多くの機能を備えたプロトタイプの実装が可能
実装(拡張) • 標準コントロールの拡張• 単体テスト
• コンポーネントの機能の範囲で仕様が決定している場合、拡張は不要
本実装 • コーディング等負荷大
• 機能が増えればその分テストの負荷大
• プロパティベースの効率的な開発
• 製品でテスト済みなので単体テストの負荷小
結合テスト • Bugfixの負荷大
• パフォーマンスチューニングの負荷大
• Bugfixの負荷小
• パフォーマンスチューニングの負荷小
![Page 22: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/22.jpg)
単体テスト
コンサルティング会社A様のケースチャートコンポーネント(ローソク足)をご活用
21
30人日
13人日
開発効率に2倍以上の差!
「テスト工数が圧倒的に変わってくる」
実工数比較
![Page 23: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/23.jpg)
お客様導入事例
カブドットコム証券株式会社様
• NetAdvantage(WindowsForms)を採用し、大幅に開発効率を向上(通常3~4ヶ月→1ヶ月に短縮)
• Gridのソートや列の並び替え機能やツリー、ツールバー機能等を活用→開発工数の削減
• デザインツールAppStylistにより、アプリの外観を一元的に設定・管理→デザイン工数の削減
※詳細は弊社サイトをご参照下さい
http://jp.infragistics.com/jirei/kabudotcom.aspx
株価情報の一覧表示画面
発注パネル
![Page 24: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/24.jpg)
NetAdvantageのメリット
開発工数の大幅な削減
高度なパフォーマンスチューニング
ビジュアルデザインを独立して設定可能プリセットのスタイルも多数用意
![Page 25: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/25.jpg)
パフォーマンス検証例
• 業界最速のデータグリッド– 対象コントロール:XamGrid
– テスト内容:xamGrid をさまざまな ItemSource へバインドし、LayoutUpdated イベントの描画にかかった時間を測定
– 想定操作:データの読み込み時のエンドユーザーの待ち時間を測定
■表1:描画に要した時間 ※IList へバインド - 10 列、1,000,000 行のデータ
弊社製品 競合製品 I 競合製品 II
所要時間 (ms) 1,028 2,050 99% 遅い 1,962 90% 遅い
メモリ使用量- テスト前(KB)
91,852 88,964 0.3% 尐ない 90,683 0.1% 多い
メモリ使用量- テスト後(KB)
91,762 144,394 57% 多い 128,511 40% 多い
■表2:描画に要した時間 ※ObservableCollection へバインド - 10 列、1,000,000 行のデータ
弊社製品 競合製品 I 競合製品 II
所要時間 (ms) 1,028 2,025 96% 遅い 1,962 90% 遅い
メモリ使用量 - テスト前(Kb)
91,852 91,360 等しい 90,660 1% 尐ない
メモリ使用量 - テスト後(Kb)
91,762 113,795 24% 多い 128,207 39% 多い
※詳しくは、パフォーマンスホワイトペーパーをご参照下さい。http://jp.infragistics.com/innovations/performance-whitepapers.aspx#13967
![Page 26: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/26.jpg)
ビジュアルスタイルの適用
例:リソースウォッシング機能
基本色を1色選択するだけでアプリケーションの外観をキレイにスタイリング
![Page 27: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/27.jpg)
2nd FACTORY CO.,Ltd. CONFIDENTIAL 26
株式会社セカンドファクトリー
自社プロダクト(Office365向けアプリ、電子書籍)
UI・CLOUDに関するコンサルティング及びトレーニング
設計/開発及び開発支援、R&D代行業務
UI&CLOUD Professional Services
![Page 28: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/28.jpg)
2nd FACTORY CO.,Ltd. CONFIDENTIAL 27
エンタープライズシステムに求められる要素
快適なユーザーインターフェース
快適なインタラクション コンシューマー向けサービスと操作感に大きな違和感を感じさせな
いこと
差別化されたユーザー体験(UX) ユーザーが本当にやりたいこと(ユーザーが気が付いていないことも
含めて)を提供できるか?
短時間で実現する必要がある
![Page 29: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/29.jpg)
2nd FACTORY CO.,Ltd. CONFIDENTIAL 28
ユーザーインターフェース/インタラクション
タッチアプリケーション(モバイル/タブレットPC)に必要なボタンサイズとは?
![Page 30: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/30.jpg)
2nd FACTORY CO.,Ltd. CONFIDENTIAL 29
ユーザーインターフェース/インタラクション
出展:www.meti.go.jp/press/20071001007/004_bessi.pdf (主要寸法項目の年代別平均値(2007.10) 経済産業省)
![Page 31: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/31.jpg)
2nd FACTORY CO.,Ltd. CONFIDENTIAL 30
ユーザーインターフェース/インタラクション
ボタンサイズは44×44pxを基準とする。
ボタン間には最低8pxの余白を設ける。
タッチさせるオブジェクトの表現は7mm/26px以上、オブジェクトの反応範囲9mm/34px以上を推奨。
オブジェクトサイズを並べる場合は、最低でも2mm/8pxの マージンが必要。
iOS
デザインガイドライン
Windows Phone7
UIガイドライン
![Page 32: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/32.jpg)
2nd FACTORY CO.,Ltd. CONFIDENTIAL 31
デザインガイドライン/コントロール
デザインガイドラインをベースにカスタマイズの必要性を検討コントロール開発のメリットが発揮されるポイント
各プラットフォームが提供するデザインガイドライン
![Page 33: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/33.jpg)
2nd FACTORY CO.,Ltd. CONFIDENTIAL 32
ユーザー体験=UXとは ??
• UX = 見た目 ?
• UX = デザイナーの仕事 ?
• UX = ユーザビリティ ?
• UX = クリック数が尐ないこと?
![Page 34: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/34.jpg)
2nd FACTORY CO.,Ltd. CONFIDENTIAL 33
What is “UX” ??
• ISO9241-210 (国際規格)「製品、システムまたはサービスに対する使用、および/または使用を予想したときの人の知覚と反応」
注釈1:ユーザエクスペリエンスには、使用前、使用中、使用後に生じるユーザの感情、信念、嗜好、知覚、生理学的・心理学的な反応、行動や達成の全てを含む。
注釈2:ユーザエクスペリエンスは、ブランドイメージ、見た目、機能、システム性能、対話行動や対話システムの補助機能、以前の経験から生じるユーザの内的・身体的状態、態度、技能や個性、および利用状況の結果である。
注釈3:ユーザの個人的目標という観点から考えた時には、通常はユーザエクスペリエンスに付随する知覚的・感情的な側面を、ユーザビリティは含むことができる。ユーザビリティの評価基準はユーザエクスペリエンスの諸側面を評価するのに用いることができる。
![Page 35: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/35.jpg)
2nd FACTORY CO.,Ltd. CONFIDENTIAL 34
What is “UX” ??
ユーザーが得られる有意義な体験と行動そのもの
ユーザーが本当にやりたいこと(ユーザーが気が付いていないことも含めて)を、
「楽しく」、「面白く」、「心地よく」できること
![Page 36: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/36.jpg)
2nd FACTORY CO.,Ltd. CONFIDENTIAL 35
UX検討の重要性
2FCで利用している工数入力システムを例に
![Page 37: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/37.jpg)
2nd FACTORY CO.,Ltd. CONFIDENTIAL 36
全機能を盛り込むことがゴールではない
No 機能
1 作業項目(時間)入力機能
2 作業項目(時間)修正機能
3 日付変更(カレンダー)
4 過去日の作業項目コピー機能
5 直近作業表示機能
6 プロジェクト新規追加機能
7 工程新規追加機能
8 プロジェクト削除機能
9 工程削除機能
10 プロジェクト検索機能
No 機能
11 工数集計ダウンロード機能
12 集計データ検索機能
13 マスタ管理機能
14 システム管理機能
15 パスワード変更機能
工数入力ツールの機能一覧
![Page 38: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/38.jpg)
2nd FACTORY CO.,Ltd. CONFIDENTIAL 37
全機能を盛り込むことがゴールではない
業務アプリケーションらしく、メニューを並べてみました
![Page 39: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/39.jpg)
2nd FACTORY CO.,Ltd. CONFIDENTIAL 38
全機能を盛り込むことがゴールではない
そもそも何故工数入力ツールをスマフォに対応させる必要があるのか?
その日の工数入力
メンバーも管理部門も楽に!(Happyに!)
誰に?
何を?
どんなシチュエーションで?
何を行わせる?
結果ユーザーはどうなる?
外出中の2FCメンバー
個人所有のスマフォ(iPhone / Android)
外出先
実は…
外出が多いメンバーの工数入力率が低下していた毎月末に時間を掛けて、一月分の工数を入力していた入力値も曖昧な部分が多い管理部門は月末の締め近くになると、未入力メンバーをチェックしていた
![Page 40: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/40.jpg)
2nd FACTORY CO.,Ltd. CONFIDENTIAL 39
No 機能
1 作業項目(時間)入力機能
2 作業項目(時間)修正機能
3 日付変更(カレンダー)
4 過去日の作業項目コピー機能
5 直近作業表示機能
6 プロジェクト新規追加機能
7 工程新規追加機能
8 プロジェクト削除機能
9 工程削除機能
10 プロジェクト検索機能
No 機能
11 工数集計ダウンロード機能
12 集計データ検索機能
13 マスタ管理機能
14 システム管理機能
15 パスワード変更機能
1日の作業が入力しやすいことに注力する!初期表示は…メニューじゃない!
1日のタイムライン「何時から何時間、何した?」
タッチデバイスで何をさせるのか?どんな価値を提供するのか?
全機能を盛り込むことがゴールではない
![Page 41: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/41.jpg)
2nd FACTORY CO.,Ltd. CONFIDENTIAL 40
優れたUXの事例
Sony ウォークマン
![Page 42: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/42.jpg)
2nd FACTORY CO.,Ltd. CONFIDENTIAL 41
優れたUXの事例
Sony ウォークマンが提供したのは、
音楽を”持ち歩く”ライフスタイル
![Page 43: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/43.jpg)
2nd FACTORY CO.,Ltd. CONFIDENTIAL 42
UXを高めるための専門的手法
プロセスへのアプローチ:HCD(人間中心設計)
使用状況の理解と明示
設計による解決策の作成
ユーザーと組織の要求事項
の明示設計の評価
![Page 44: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/44.jpg)
2nd FACTORY CO.,Ltd. CONFIDENTIAL 43
よりシンプルな手法
ユーザー、課題の理解仮説
インタラクション設計
プロトタイプ開発早期の検証
このフローを踏む(1度でも)ことにより、UXは大きく向上する
![Page 45: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/45.jpg)
2nd FACTORY CO.,Ltd. CONFIDENTIAL 44
簡単に検証できるモックアップを
UIの画像イメージをスマートフォンに
![Page 46: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/46.jpg)
2nd FACTORY CO.,Ltd. CONFIDENTIAL 45
システム開発におけるUXデザインの要素
具体的
抽象的
Strategy:戦略
Scope:要件
Structure:構造
Skeleton:骨格
Surface:表層
出典:Jesse James Garrett’s Elements of User Experience
http://www.jjg.net/elements
![Page 47: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/47.jpg)
2nd FACTORY CO.,Ltd. CONFIDENTIAL 46
システム開発におけるデザインの要素
具体的
抽象的
出典:Jesse James Garrett’s Elements of User Experience
http://www.jjg.net/elements
• 快適なインターフェース
• 快適なインタラクションデザインガイドラインの活用UIコントロールによる生産性向上
• 差別化されたユーザー体験ユーザー、課題の理解
プロトタイプによる早期の検証
![Page 48: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/48.jpg)
要件定義 基本設計 詳細設計 開発単体テスト
結合テスト
システムテスト
従来、導入が検討されたのは開発一歩手前、あるいは開発に着手してからであり、要件が完全に固まった状態であった。そのため、やむを得ずコントロールのカスタマイズをされるケースも多く、あまり効率の良い状態ではない。
要件定義 基本設計 詳細設計 開発単体テスト
結合テスト
システムテスト
有効活用されているお客様では、共通して「設計段階においてUIコンポーネントで要件が満たせるかどうかについて評価」を行い、開発の難易度を決定されている。結果として見積もりが正確になり、手戻りが尐なくなる。
UIコントロールの有効活用
![Page 49: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/49.jpg)
2nd FACTORY CO.,Ltd. CONFIDENTIAL 48
私たちが協業でお届けできるものは:
ユーザー、課題の理解仮説
インタラクション設計
プロトタイプ開発早期の検証
実際に利用できる成果物をお届けしていきます。
触れる、実機で動く、最終に近い、ユーザーの想像力を喚起できる
プロトタイプ
グラフィックアセットテーマ/スタイル
ビジュアルデザイン
コードレベルで再利用可能な実際にコントロールを配置した
レイアウトデザイン
継続的な開発に利用できる練りこまれたUXを表現するための
UI ガイドライン
![Page 50: X dev 20121106](https://reader030.vdocuments.mx/reader030/viewer/2022020307/55991c5c1a28abd4478b47da/html5/thumbnails/50.jpg)