TokyuRuby会議を振り返る

TokyuRuby会議11も無事に終わりました。ありがとうございました。 今回は司会進行業をやらせて頂きました。

TokyuRuby会議11 - Regional RubyKaigi

今回はTokyuRuby会議について色々思い出してみようと思います。

TokyuRuby会議とは

TokyuRuby会議は、東京で開催される Regional RubyKaigi です。
Ruby に興味を持つエンジニアが集う Tokyu.rb 主催の LT 大会です。
飲み食いしつつ、みんなで LT をして盛り上がろうというイベントです。

第4回目の様子。雰囲気は毎回こんな感じです… ↓ https://www.flickr.com/photos/koichiroo/sets/72157628059770749

基本情報

過去の開催実績

内容

  • 全部飲みながらのLT大会
  • できるだけ多くの人に登壇してもらうのが基本方針
    • 酒でハードル下げる
    • 抽選LTで強制的に喋らせられる(あー抽選で当たっちゃったら仕方がないか -> 実績解除、以降抵抗なくなるといいな)
    • 時間が余ったら、AcceptLTと称して、さらに喋りたい人を募る
    • 結果として、大体40人位は喋ることになる
  • 酒もつまみも基本的には持ち込み
    • 基本は自分が食べたいもの、飲みたいものをお持ち込み下さい。他の人に食べさせたいもの、飲ませたいものも歓迎です。他の人に室内でやるお花見みたいなものです。というのがいつも説明しているコンセプト
  • 第3回からは1回を除き、サントリーさまがザ・プレミアム・モルツを楽しむ会を併設して下さっている
    • 実質ビール飲み放題
  • LT、持ち込み飯、持ち込み酒をしてくださった方々への感謝と敬意を表すため、最多得票の方をLT王 / 飯王 / 酒王として表彰
    • 途中からサントリー様のビールが提供されるようになったため、酒王は休止
    • 持ち込み酒のみの時には復活
  • 午後1時半頃から7時半ごろまでやる
    • 一度だけ、朝10時から始めて54LT実施というのをやった
    • 出勤より早いと嘆いていた人も多かった

開催場所

  • 第1回、第2回は 大盛り森東地域センターで実施
    • http://www.city.ota.tokyo.jp/shisetsu/kumin_center/omorihigashi_c/
    • どうなるかわからなかったので自己責任で実施したく、スタッフの自腹割り勘で借りた
      • 午前午後2部屋貸切で数千円。やすかった
    • 大田区の公共施設管理システムで「使用目的:宴会」というのがあり、それに該当する施設で空いているところから選択
    • いわゆる公民館で、1Fではおじいちゃんたちが将棋か囲碁をやっていた
    • 最寄りは京急平和島駅
      • 「Tokyuじゃないじゃん」「いや!京急は戦前はもともと五島財閥の元で大東急グループの一員で…(以下略(強弁(震え声」
    • 狭い中約50人が酒を飲み、猛烈に空気が酒臭かった
  • 第3回からVoyageGroupさまで実施
    • 素晴らしい会場。ありがたいとしか言いようがない
    • いつもほんとにお世話になっています
    • これからもよろしくお願い致します

開催までの経緯

だいぶ前の話で記憶が曖昧です。誤りや認識違いがあったらこっそりご連絡下さい。

  • 2009年@conceal_rsさん、@jugyoさん、@ginkounoあたりで、twitter TL上で「飲みながらLT大会したいよね」「TokyuRuby会議な〜んちって」とかキャッキャウフフした
  • その後話が本格化し、Tokyu.rbの参加メンバーと相談を始める
  • その頃、↑のキャッキャウフフを日本Rubyの会の方々が捕捉したらしい
    • 後で聞いてたところ、Rubyの会の方面では「あんなの許して良いのか」と、ざわ…ざわ…としていたそうだ
  • そのうち「TokyuRuby会議はどうやったらTokyoRuby会議にしてもらえますか?」という問い合わせが来た
    • 一時混乱
      • その頃東京Ruby会議02の計画があったので、それとMergeして欲しいという話だろうか
      • それとも何か公式フォーマットに沿った方がいいのだろうか
      • 東京Ruby会議01のようにクオリティの高いのを頑張るつもりはなかった
  • 引き続きスタッフで相談
    • 基本的に飲みながらのLT大会にする路線は変更なし
    • 「東京Ruby会議にする」の意味を詳しく聞くためにも、Rubyの会の方に話を一回聞こうかということになった
    • やりたい事を述べ、それが問題ないなら東京Ruby会議化に協力させて頂くが、難しいようならTokyu.rbLT大会と名前を変えてやらせていただこう
      • できるだけご迷惑をかけず、なおかつ好きなことを自由に実施したいというのが結論
  • 地域RubyKaigiKaigi
    • その年の日本Ruby会議に「地域RubyKaigiKaigi」という枠があり、そこでTokyu.rbはどうしたいか話すという機会が設けられた
    • Ruby1年ちょっとの状態でRubyの会の方20人位に半包囲されて一人話すことになった時の率直な感想は「これ何の査問会」
    • 事前想定シナリオ「Tokyuはこんなことやりたいんですー。東京Ruby会議にはふさわしくないですよねHAHAHA!なのでTokyu.rb LT大会と名前変えてやりますよHAHAHA」
    • 実際の展開「Tokyuはこんなことやりたいんですー」「良いのでは。そもそもTokyoとTokyuかけたそのダジャレ的なの好き」「Asakusa.rbとしても敷居が低いのをやってもらえるのは良い」
    • 結果として、スケジュールや開催情報、るびま向けレポートの提供、ネーミングで東京Ruby会議02をサブで付けること、くらいが依頼されたことで、その他は自由に開催してよいという結論になった
  • この頃の話をかくたにさんがRubyKaigiでお話してました(51分頃) [18M03] All About RubyKaigi Ecosystem on Vimeo
    • 「やっかいなコミュニティ」w
  • あとは色々段取りをした後、2009年11月29日に無事第1回を開催

ザ・プレミアムモルツを楽しむ会について

  • 東日本大震災があった年、広報部隊がビールを振る舞うイベントをやりにくくなったらしい
  • 責任者の方のスナック飲み友達のRubyistな方が居て、いいとこないか聞いたら「Tokyuじゃない?」
  • その後そのRubyistの方と知人であるスタッフ五十嵐君にも話が来て「うん、Tokyuじゃない?」
  • その後実際にお会いしてすり合わせを実施
    • こちらのオススメもあったが、ご好意でプレゼンはLTのフォーマットに合わせてくれた
      • ドラ鳴らした方が盛り上がりますよという話などした
  • それ以降、プレゼンは2回を除きその年入った新人の方が実施しているそうだ
  • いつも実施していただいて、メリットがあるのかなと心配していたが、先日実施したTokyuRuby会議11ではハッシュタグがトレンド入りしたらしい。とても喜んでもらえたので良かった

運営体制について

  • 打ち合わせでMTGするのは、第一回以降はキックオフと当日のMTGだけ
  • あとはオンラインで済ませている
  • 悩んだら「無理をしない」「楽をする」方に振るのが基本
  • 実行委員長は7回以降は毎回変えている
    • おかげで全体を理解している人が増え、より円滑な運営になっている
    • 持続性が高まって良い
  • 運営費はスタッフで割り勘の自腹
    • 会場費、ビール、Tシャツはスポンサーよりご提供
    • 食べ物はみんなで持ち込み
    • ゴミ袋とか紙皿とかHeroku代とかが対象
  • MTGがすごく少なく済むのは、スタッフの熟練度がとても高いから
    • とってもすばらしい
    • 皆Tokyuって何?という意見を持っていて、その意識が結構合っている
    • ほんとみんな最高

自分との関係

  • 01〜06、08で実行委員長をやらせてもらった
    • 段取りとか色々
    • 6回やったらだいぶ疲労した
      • 基本的に心配性なので、酒席で何か起こらないか心配したり、あるいは飲みすぎて自分が失言しないか緊張したり
        • それでも失言があって色々後悔がある
  • 07、09、11はスタッフ
  • 第10回、ほぼスタッフ業から離れて、一般参加させてもらった
    • 持ち込み飯として、近所のイタ飯屋さんに譲ってもらった渾身の美味生ハムを一本持ち込んだ
      • 小遣いからの分割払い
      • 飯王取った
      • だがカネ王と呼ばれた
    • LTもやった
      • 生ハムのアピールに使った
      • 「笑えて最後はイイ話」も目指した。大好きな落語家、柳家喬太郎師匠の手法を勝手に取り入れた
      • 確かLT投票3位だった気がする
    • ちょう楽しかったし、このイベントは存続するべきだと思った

Tokyu.rbとTokyuRuby会議をやって感じたこと

  • 友人知人がすごく増えた
    • 純粋にRuby生活が楽しい
    • RubyKaigiに行ってもぼっちになることもない
    • お仕事にも繋がったりする
  • 行く度に、業務上で悩んでいることに対する何らかの学びが出て良い
    • 大体みんな悩んでいて、それをどう解決するか人それぞれ工夫していたりとか
  • 大体自分の時間を使って業界人の集まりに出てくる人ばかりなわけで、技術的に優れた人が多く、接していると常に危機感を得られる
  • コミュニテイ作り良い
    • 継続する意志がある人が自分ともう一人いれば、地域コミュニティ作りはなんとかなると思った

Tokyu.rbの活動を振り返る

Tokyu.rbという地域Rubyコミュニティがありまして、基本的に飲んだり食べたりばかりだったのですが、飲んだり食べたりし続けている間に、だいぶ前からあるコミュニティと称されることが度々出てきました。 自分でも「あーいつからやってたんだっけ」とすぐさま答えられないことが多いので、一旦まとめてみました。

設立

私は2008年頃に東急線緑が丘駅の会社に転職し、Rubyを書き始めたのですが、しばらくしておがわさん https://blog.stnard.jp/ という方が同じ会社に転職してきました。

その頃Seattle.rbの話題が出てきていたため、自分たちもあーいうのやりたいよねと、社内やRubyKaigiの帰りの電車とかで話していたのですが、場所についておがわさんも私も東急沿線に住んでいたため、Tokyu.rbでいこう!という話になりました。

沿線単位なら皆来やすいかな〜とかうっすら感じていた記憶はありますが、ちゃんと考えていたかどうかは定かではありません。

個人的な目的としては、組込系からWeb系に転職し、WebもRubyもこれから学ぶ必要があったため、「金持ちになりたければ金持ちの中に居るべし」という格言?に従い、「RubyistになりたければRubyistの中に身をおくべし」という状況を作りたかったというのがあります。 そのために当時ぽつぽつでき始めた地域コミュニティにJoinしたいと思ったのですが、近場に無かったので、それなら作ってしまえーと思ったのでした。

ginkounoの役割

  • 日程調整と店の予約
    • 第一回から全て
  • 徴収とか支払いとか幹事業
    • 遅刻1回、不参加1回以外
    • 不参加の1回は震災の後の週末で、電車の運行が不安定な中、嫁さんが会社近くのホテルに宿泊して仕事しなければならないという事態になり、開催日がようやく帰れる日だったので

基本情報

  • 2008年7月24日(木) が第一回だった http://qwik.jp/tokyurb/
    • とりあえず大岡山で8人で飲んだ
  • 2回目からは自由が丘のアイリッシュパブで、開発しながら飲んだ
    • でも店内では浮き気味だった
    • 3回目でさわださんと2人だけになってしまったので、この路線はやめた
  • 4〜7回目は自由が丘での飲み会だった
    • 7回目が9名で、それまででは最多
  • 8回目から大和路目黒店になった
    • 2009年5月29日(金)、なんの因果か肉の日であった
    • いきなり過去最大人数の14人になった
    • https://atnd.org/events/667
  • 2013年の新年会まではATNDで管理していた
  • 2013年以降、2017年2月の新年会まで、14〜33人位の参加者で推移

大和路目黒店について

  • 当時よく来てくださっていたよしみさんが、以前昼飯で毎日のように行っていたとのことだった
  • その紹介を受けて行くことになった
  • 常連クラスを継承し、色々なmethodが使えた
    • 当日になっての参加者数の微調整
      • いらっしゃった人数分だけ頂ければいいですよとのありがたいお言葉
      • 甘えすぎはアカンので、2,3人少なめに用意しておいてもらって、それより多かったらその場で追加してもらう運用とか調整はした
    • すき焼きの生卵は追加時100円だったが、最初から座卓のカゴの上に山盛り
    • タレもおかわりし放題
    • 幹事としては大変ありがたかった
  • Tokyu.rb参加者が店内に入った途端、誰の名前で予約とか口にする前に案内されるという、熟練度が高い店員さん
  • 2017年3月に閉店
    • 大庄グループのお店だったが、全ての大和路がなくなったようだった

例外的活動

もくもく会的なもの

RubyKaigi特別回

  • https://tokyurb.doorkeeper.jp/events/4104
  • 2013年のRubyKaigiの2日目、公式アフターパーティが無かったので、Tokyu.rbのいつものやつをやった
  • ほぼ貸切の45人位の参加だった
  • なんだかよくわからないけどあたふたしていた気がする

特別編

なんだか長くなってきた…

TokyuRubyKaigiの話とか感想とかはまたのちほど…

「ソフトウェア品質の経済的側面」

ソフトウェア品質の経済的側面

読みました。

日々品質の良いソフトウェアを書こうと心がけて過ごしてはいますが、「スタートアップでは品質ではなくスピード重視だ」とかいう言葉もちらほら聞きますし、そもそも何のために品質を求めているの?そもそも品質って何なの?という辺りから改めて視野を広げるべく購入しました。

ざっくりとした概要

ソフトウェアの品質による経済的価値

  • どう品質が高いと、どんな経済的価値が得られるのか
  • あるいはどう品質が低いと、どんな経済的影響があるのか
  • 社内向け/社外向け/組み込みなど分野別に記載
    • 「高品質で手戻りが少ない」と、「再実装の工数が減る」
    • 「高品質で顧客満足度が高い」と、「プロジェクトをキャンセルされる確率が減る」
    • 「高品質で顧客がUIを理解し易い」と、「サポートによるコストが減る」
    • 「高品質で他社よりも顧客信頼度が高い」と、「売上が上昇する」など

どうやって品質を計測するのか

  • 基本、FP法を用いる
  • 筆者の会社は13,000のプロジェクトを調査したそうな

開発のどのフェーズのどのような活動が、どれくらいの割合でソフトウェアの品質に影響を与えるのか

  • 例えば要件の誤りが一番大きな影響を与え、次いでDBやモジュール設計などの影響が大きく、コードの記述方法などはさらにその次などになる

品質を向上させるための各種活動について

  • 正規のインスペクションが良い、とか
  • アジャイルプロセスは1,000FP位の規模までは有効、とか

感想

  • 要するに「品質が低いと結局お金かかるよ」ということだった
  • 色々な分野について、数値で色々語られており、なるほど感はあった
    • しかし、表の合計値が異なることがあり(原著がそのままであるとの注付き)、どう読んでいいのか悩ましい数値もあった
    • ただ自分の経験上の感覚とそう外れた感じではなかった気はする
  • FP法がどこまで信頼に値するのかについてはよくわからないなぁ
    • ただ本書のように、一人の人なり一つの会社が統一した基準で計測を実施できているのなら、比較指標としては有効なのかな
  • 要求仕様と出来上がりが違ったら、そりゃ一番痛いことになるよなぁ
    • 自分はアジャイルプロセスをやってみたくてWeb業界に入ってきたが、その点アジャイルプロセスはそこをちゃんとケアしようという意志はあるのではないかと思っている
  • 「スタートアップは品質ではなくスピード重視だ」という言葉の中には、「品質」という多面的な意味を持つ言葉が含まれているので、読んだ人によって色々は反応が起こるのだろうなぁ
    • 「複雑クソコード / 行き当たりばったり設計による品質の低さ」 => 結局はスピードも出ず金もかかるので不幸になる
    • 「拡張可能な設計 / 読みやすいコードを保ちつつ、要件を絞ったことによる品質の低さ」 => 必要な時に必要なものを足せば良いので無問題
      • だから、「スタートアップだからエンジニアのスキルが低くてもいいや」は適切ではない
  • もうちょっと読み込んで、非ソフトウェアエンジニアに品質の意味を説明するための語彙を錬成したい

「会社のITはエンジニアに任せるな!」

読みました。

自分はITエンジニアそのものなのですが、自分のITスキルをより効果的に世間に活かすため、視点を増やすことができたらいいなぁ…と思って購入しました。

頭に残っている概要

ITには大別して2種類ある

  • その場の課題を業務担当者個人が活用して解決する「ツール型IT」
  • 工場の生産ラインのように、その事業そのものを表現する「プラント型IT」

どこまでプラント型ITを適用できるのかは、事業によって異なる

  • 銀行などの金融業は、プラント型ITそのもの
  • 筆者の属するコンサル業などは個人に大きく依存するので、プラント型ITが適用できない
  • 上記の間のどこに自社が位置するのか

IT施策はエンジニアに丸投げしてはいけない

  • プロジェクトリーダが真ん中位に立ち、経営層、現場、IT部門を巻き込んで引っ張る必要がある
  • 経営層はちゃんとバックアップする必要がある
    • 極端な話、ITなんぞ要らんとか言う役員を飛ばすとかも含む

開発プロジェクトは複雑で予測困難である

  • 部品を使いまわせるビル建築ではなく、一つ一つの部品を作り込むサグラダ・ファミリアに近い
  • 最初に予算ありき、期限ありきでは難しく、失敗する確率は高い
    • 30%のプロジェクトは失敗に終わる
  • 成功確率を上げるためには、経営も現場もITもセットでよくよく考え、調査検討して進むべき

その他

  • プロジェクトリーダの育て方
  • 開発プロジェクトを安くするためには
  • 成功事例的なもの

感じたこと

  • 概ねエンジニアとして伝わって欲しいことが書いてある感じがした
    • ほんと開発って複雑なんですよー
      • 根性と忍耐だけではなんとかしたくてもできないことが多い
  • イテレーション回す開発をしたとしても、そのプロダクトオーナーが業務を広く把握していないと、確かに効果的にはならないよね
    • 結局目的と外れた開発をしてしまった時の損害が一番でかいんだよなぁ
    • ↑についてはソフトウェア品質の経済的側面にも書いてあったことだなそういえば
      • こっちも後でブログにメモっておこう
  • 関係者が多くなると、どうしても声の大きい人対策とか男の嫉妬対策とかが必要になってくるんだよなぁ
    • 先日食事でご一緒させて頂いたコンサルな方も言っていたな

私はいちエンジニアとしては、技術を磨いて開発し、それが業務の改善に生き、そのヨロコビを得てMPを回復し、また開発にあたる…というサイクルが健全に回る環境に生きていたいと思うものですが。

その環境を作るための様々な努力も必要だなぁと改めて思ったのでありました。

これからも精進してまいりましょう。

過去最高の作業環境が出来上がった話

開発に集中していると、すぐに首が痛くなります。右側だけいつも痛くなり、そのまま頭痛につながって辛いのです。 何度か椅子やら机やらを変えてみたのですが、この度過去最高の作業環境が出来上がりました。

ここに至るまでの経緯を記したいと思います。

初期状態

イス

www.ikea.com

モニタアーム

サンコー 3軸式くねくねモニターアーム MARMGUS191B

サンコー 3軸式くねくねモニターアーム MARMGUS191B

椅子は前傾姿勢を保てるものでして、作りも丈夫で今でもオススメできるものです。 ただ、自分の場合は趣味で運動をした翌日は疲労のため姿勢の維持が難しく、また腰が痛い時などには前傾はできないので普通に座る -> 痛い なのでした。

電動リクライニングベッド導入

ベッド

アテックス 収納電動リクライニングベッド AX-BE556 0027

アテックス 収納電動リクライニングベッド AX-BE556 0027

モニタアーム

サンコー 3軸式くねくねモニターアーム MARMGUS191B

サンコー 3軸式くねくねモニターアーム MARMGUS191B

こちらの記事を拝見し、首に負担をかけなければいいじゃないか!と思って真似してみました。

私はいかにして怠惰な寝正月を過ごしたか – 介護ベッドと壁掛TVを使ったプログラミング環境の構築 | 株式会社インフィニットループ技術ブログ

しかし残念ながら、ベッドが自分の体に合わなかったのか、長時間使っていると体重がかかる背中〜尻の下の方が痛くなる始末。 膝の下に座布団を折って、膝を常時曲げておくことで改善したのですが、最初から膝下が持ち上がるタイプを買えばよかったなと後悔したのでした。 また買ったベッドはあまりに低すぎて、立ち上がるのに時間がかかるため、トイレもめんどくさくなって我慢してしまい、とても体に悪いようです。

更に引き続き使っていたお安めのモニタアームは、細かい位置調整が苦手で、首の負担ゼロにするのがなかなか難しく、つい首を上げてモニタを眺めて疲労が蓄積。 3ヶ月位で止めてしまいました。

ただ、ディププレイアームやベッドにもう少しお金をかければ(高さがちゃんとあり、膝下も持ち上がるタイプのものを買うなど)、快適な環境を作ることも可能かなとは思います。

スタンディングデスク導入

www.ikea.com

椅子 www.ikea.com

今度は立ってみたのでした。このころ流行っていたスタンディングデスクです。 (極端な方向に走りがち…)

椅子は以前のオーバルチェアとの併用です。 その時の自分の体調に合わせて微妙に高さを調整できることは、なかなかに快適でした。 リフレッシュするにはいいですね。

ただ体調が優れない時には当然座ることになりますし、ずっと立ち続けるわけにもいかないので、最初の首痛の完全な解決には至らないのでした。

電動リクライニングソファー

www.ikea.com

椅子 www.nitori-net.jp

キーボード

ディスプレイアーム

エルゴトロン LX デスクマウント モニターアーム 長身ポール 45-295-026

エルゴトロン LX デスクマウント モニターアーム 長身ポール 45-295-026

いやー、控えめに言って最高ですね。何が良いかというと、

  • 首や腰の負担がほぼ無くなる感じ
  • 電動で立ち上がるのが楽
    • トイレもすぐ行ける
  • 分割キーボードで猫背の悪化防止、空気たくさん吸える
  • エルゴトロンのアームだけでなく、スタンディングデスクが微妙な高さ調整をサポート。ディスプレイをベストの位置に
  • 椅子も新品で買っても5万程度、アーロンの一番安い椅子程度
    • リサイクルショップに偶然にも同型があったので16000円

もともとはコチラを読んで試してみようと思ったのですが、

ニトリさんで色々試したところ、今回選択した椅子が大変よろしく、しかも中古で売っていたため、エイヤと買ってしまったのであります。

f:id:ginkouno:20170515194737j:plainf:id:ginkouno:20170515194757j:plain

全国のニトリさんに行くと試用できます。 人それぞれ体型や症状などで合う合わないはあるとは思いますが、肩こりや首こりの肩は一度試してみて頂きたいですねー。

番外編

f:id:ginkouno:20150812203852j:plain

時間は前後しますが、ある日ぎっくり腰をやった時に急遽作ったのがコレ。 100円ショップで400円位で揃えた部材でその場を凌ぎました。 強度が無く、キーを叩くたびにビヨ~ンとしなるのもご愛嬌…

三が日にタスク選択用slack botを作った話

年始になると、今年やりたいことを書き出したりするわけですが、毎年いろいろなことを思いつき、それが多すぎて、どれをやろうかと考えているうちに、時間を浪費してしまうのであります。

そこで、何をやるのかを自分で考えなくてもいいしくみを考えて、酒飲みながら雑に作りました。

こんな感じに、trello上にジャンル別にタスクを並べておいて、 f:id:ginkouno:20170103174348p:plain

slackで神頼みすると、おみくじっぽく各ジャンルの1番上のcardを取ってくれます。 f:id:ginkouno:20170103174441p:plain

ついでに「そのタスクをやると、いいことがあるよ〜」的なメッセージも付いてきます。なんだかやる気が出てきますね! 決まったらあとはバリバリやるのみ。目の前の事に集中できます。

ふとこれを書きながら考えたんですが、リファクタリング的タスクとかも均等にとっていきたい時とか、こうやってタスクをサンプリングしていくと、技術的負債を一定額返していくことができるかもしれません。リボ払い。

コードはこちら(雑です) ginkouno/lucky_task

おまけ。 f:id:ginkouno:20170103174929p:plain

デバッグ中の画面ですが、typoも含め、縋っている感じが泣けてくる感じですね > 自分

ScrollViewとStackViewを組み合わせて使ってみる

最近、SwiftiOSアプリを作ろうと色々しています。

ScrollViewの上にStackViewを貼って、constraintを適切に設定しておいてあげると、中のviewのhiddenをtrueにしたりfalseにしたりするのに従って、ScrollViewの高さも調整してくれるんですなぁ。

f:id:ginkouno:20160506191429g:plain

便利便利。

なおconstraintは全てStoryBoard上で設定しています。

サンプルコードはこちら。

GitHub - ginkouno/ScrollViewTest1: ScrollViewとStackViewのサンプル