All Posts By

Takeshi

インストール不要。ブラウザーで見れるWebARの作り方。

By | 未分類

WebブラウザーだけでARを実現する WebAR。以前からこの¥WebARを行うために提供されているAR.js。
今出ているバージョンでは、マーカの扱いや機能も安定してきているようで昔あったARプラットフォームのjunaioで提供されていた機能もブラウザーで再現できるようになってきたようです。簡単にARを楽しめるので使い方を紹介したいと思います。

まず実際に試してみるのはとても簡単。提供されているページに書いてあるコードをコピーして貼り付けた、HTMLファイルをサーバーにアップロードするだけです。

<!doctype HTML>
<html>
<!-- WebVRフレームワークA-Frameを読み込む-->
<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
<!-- WebARフレームワークAR.jsを読み込む—>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js"> </script>
<body style='margin : 0px; overflow: hidden;'>
<a-scene embedded arjs>
<a-marker preset="hiro">
<a-box position='0 0.5 0' material='color: black;'></a-box>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>

サンプルコードで使用されてるマーカーこれになります。HRO.js

アップロードしたHTMLファイルをスマホやパソコンのカメラで開くと、カメラの利用の許可を聞いてくるので許可します。
すると、カメラに映った映像がブラウザーに表示されるので、カメラでマーカを映します。

問題なければ、黒い四角が表示されると思います。

簡単に説明すると「a-marker」タグで囲まれているコンテンツがマーカーを認識すると表示されます。「preset」がマーカーの指定でサンプルでは「hiro」が指定されていてこれはデフォルトで入っているマーカーになります。

a-marker タグで囲まれている「a-box 」がマーカを認識されると表示されるコンテンツになり、「a-sphere」で球。「a-cylinder」で円柱。「a-plane」で平面のオブジェクトが生成されます。これらの記述方法は「A-Frame」になるので、a-frameのサイトを見るとよくわかると思います。

一点注意することは、カメラを使用するためhttps(SSL)の環境が必要になります。通常のhttpのアクセスではカメラ利用できないと警告が表示されます。

Apple、Google共にARライブラリが提供され、再度話題に上がることの多くなったARですが、従来のマーカーを認識させ何かを見せるだけであればブラウザーだけで十分でアプリケーションの場合は、表現の一部として利用されるよようになってきているように思います。

Cloudflareを使って共有型レンタルサーバーのSSL対応

By | WEBサーバー

フォームなど個人情報やクレッジトカードなどの重要なデータを扱うところでは、非httpsページでは警告が表示されていましたが、最近ではサイト全体がhttps化されていない全てのサイトに対して警告が表示されるようになりました。

httpsは、具体的には認証局により署名されたSSLサーバー証明書を使ってデータのやり取りが行われます。SSL証明書を使ってSSL通信を行うことで情報が暗号化されるため、盗聴、改ざん、なりすましを防止することができ、パスワードやその他の個人情報を送信しても安全におこなえます。

今までは、年数万円の費用でSSL証明書を取得、設定し対応していたのですが、共有型レンタルサーバーではこの流れに合わせ低価格または無料のSSLが提供されるようにんなってきました。しかし無料のSSLは、制約がある場合があるので用途や運営には注意が必要なことがあります。

ですので、個人のブログなどの場合は費用をかけにくいと思うので、無料のSSLで良いと思うのですが企業などの場合は有料のSSLを利用されることをお勧めします。

使い勝手がいいので、よくCPIの共用型レンタルサーバーACE01を利用するのですが、残念ながらCPIの共用型レンタルサーバーACE01には無料のSSLが用意されていません。先ほども書いたようにテストやサンプルまたは個人的なものでSSLが必要な際に有料のSSLを用意するのは辛いので、何かないかと探して見たところ対応方法がみつかったので試してみました。

CloudFlareを使ってSSL
Cloudflareというインターネットセキュリティサービス、分散型ドメイン名サーバシステムなどユーザーとサーバーの間に入って色々なサービスを提供するサービス。利用するサービスによっていくつかの料金プランが用意されているのですが、この中にSSLがあり無料プランでも利用できるようです。

設定は簡単です。まずCloudFlareでアカウントを作成します。

次にプランを選択、今回は無料のものを選びます。

次にSSLを設定したい、ドメインを入力します。

その後、DNSレコードと通信方式の設定が表示されるので、必要な設定をしていきます。デフォルトで必要な設定はされていると思います。

ネームサーバーの情報が表示されるので、これをメモしてドメインを管理しているサービスのネームサーバーの情報を書き換えます。
お名前だとこんな感じ。

しばらく待つとDNS情報が反映され、設定完了。httpsでサイトが表示できるようになったことが確認できます。

ただこれはあくまで見せかけだけです。CloudFlareにはSSLの設定がいくつか用意されています。本来と同じような使い方をするには有料版にプランを切り替える必要があるようです。また、WordPressなどを使う場合にもいくつか手を加える必要があったりするようです。CPIではGet a Fileというファイル転送サービスが利用できるのですが、CloudFlareの設定をするとうまく機能しなくなりました。解決策はあるかもしれませんが、このようにいつもとは違うことが起きる可能性があります。

癖はありそうですが、CPI以外でもCloudFlareを利用してSSL化することは可能のようなので、テストや個人的な何かでSSLが必要で費用をかけれない場合には良いのではないかと思います。

DJI カメラ付きスタビライザー Osmoでパノラマ撮影

By | お役立ち・知識

DJI カメラ付きスタビライザーはOsmoは、なんの調整もせずに搭載された3軸スタビライズシステムで、三方向の振動を制御し、 滑らかな4K映像を撮影することができます。またそのほかにも一台でモーション・タイムラプス(動きのあるタイムラプス撮影)やスロー撮影などいろいろな機能が備わっています。その一つにパノラマ撮影機能があります。

OSMOでパノラマ撮影後のデータ

OSMOには180度、360度のパノラマ撮影とマトリクスがあり、それぞれ自動でカメラ位置を移動させ複数枚撮影を行い撮影後にそれを結合し1枚の画像を生成され接続しているスマートフォンに保存されます。ただ、これはサムネールなのか画像サイズが小さい。また、SDカードに保存されるデータは結合前の元画像のみ。パノラマ画像は保存されていません。

簡単にパノラマ画像を作る

保存された画像を並べただけではうまくパノラマ画像になりません。何か簡単に作れないかと考えていると・・・ありました!Photoshopの自動処理の中に複数の画像を結合する機能がありました。 Photoshopのメニューからファイル>自動処理>Photomergeを選択します。 開いたPhotomergeウィンドウで参照ボタンをクリックし結合したい写真を選択し開きます。 レイアウトは「自動選択」。ソースファイルの「画像を合成」「周辺光量補正」「歪曲収差の補正」「コンテンツに応じた塗りつぶしを透明領域に適応」全てにチェックを入れOKをクリックするだけ。あとは待ってればPhotoshopが綺麗に合成してくれます。

Photomerge パノラマ画像完成

パノラマ画像完成

とても自動でパノラマ画像ができました。端の方や足りない部分は「コンテンツに応じた塗りつぶし」自動生成されているのであまりうまくできていない場合があるので、手動で修正するか面倒なら切り抜くといいと思います。OSMOはRAW撮影にも対応しており。PhotomergeはRAWも合成できます。 試した感じでは、RAWを色調整しても合成後は調整前の状態で合成されるようでした。

JPEG画像で作ったパノラマ

RAW画像で作ったパノラマ

残念ながら生産終了するようです。

OSMOの光学ズーム機能がついたOSMO+が生産終了するようで、各ショップで特別セットなど今ならお得に手に入れそうです。 パノラマ撮影以外にも色々な撮影機能がありぶれのない滑らかな4K映像が取れるOSMO+を購入してみてはいかがでしょうか?

新しいARkit2を試してみる

By | アプリケーション, 拡張現実(AR)

WWDC2018でios12などとともにARkit2の発表がありました。
Bata版の公開が始まったので早速試してみます。

新しいARkit2を試すには?

試すのは簡単。WWDC2018で公開されたデモアプリ「SwiftShot」がAppleの開発者ページからダウンロードできます。 あとは、Xcodeとiosを最新のbata版にし「SwiftShot」をインストールします。

ios12bata版へのアップデート

デペロッパーサイトのダウンロードページに行きXcode 10 betaとiOS 12 betaをダウンロードします。

ダウンロードできたらios12を入れる端末をmacにつなぎます。

Apple Configurator2を立ち上げます。

接続している端末が表示されるのでダブルクリックします。

サイドメニューからプロファイルを選択しダウンロードした、iOS_12_Beta_Profile.mobileconfigをドラックアンドドロップで端末に入れます。

端末の画面にプロファイルのインストールのウィンドウが現れるのでインストールを選択します。

インストールが完了したら、設定を開き一般>ソフトウエア・アップデートに行きios12をインストールします。

Xcode10bata版へのアップデート

次にXcode。ダウンロードしたファイルを解凍します。

Xcode-betaができるのでこれをダブルクリックすると必要なファイルがインストールされます。

SwiftShotを起動してみる

Xcode-betaを起動してSwiftShotを開き端末にビルドします。
teamの設定を忘れるとエラーになります。

起動したら動きにくいので、一旦Stopさせて端末の接続を解除し、もう一度アプリを起動します。
これで、「SwiftShot」を試すことができます。

SwiftShotを起動してみる

起動するとホストの選択があり、その後積み木が表示されます。3つあるパチンコから1つを画面全体に移すとパチンコの縁が光るので画面をタップするとパチンコを引っ張ることができ、話すと玉が発射されます。床で行ったのでなかなかパチンコを目標に飛ばすのが難しかったです。

Arkit2

広島でVRが遊べる体験できるスポット一覧

By | アプリケーション, 仮想現実(VR)

広島県内で体験できるVR施設をまとめて見ました。ネットカフェでは視聴型。アミューズメンとでは複数人で体験できるものなど色々なコンテンツが楽しめる様です。13歳以下のお子さんでも楽しめるや大人向けのものなど施設ごとにターゲットにしてる年齢層も違うようなので以下参考にVR体験を楽しむ参考にしていただければと思います。

プラサカプコン 広島店

「THE OUTLETS HIROSHIMA(ジ アウトレット ヒロシマ)」内にあるVRコーナーをはじめとする、ボーリング、キッズコーナー、カラオケ、体験型スポーツなどが楽しめるアミューズメント施設。カプコンの人気ゲーム「モンスターハンター」とコラボレーションしたタイトルや、6人同時プレイが楽しめる「ゾンビウェイ」などが設置されます。各ゲームはチケット制です基本チケット2,500円/5枚。

プラサカプコン 広島店
住所 広島県広島市佐伯区石内東4丁目1-1ジ アウトレット広島1F
電話番号 082-275-4165
営業時間 11時00分 ~ 23時00分(最終受付:22:00)
7歳未満:入場は可能ですが、ご利用できません。
12歳以下:保護者の同伴が必要となります。
16歳未満:18:00以降は、保護者の同伴が必要となります。
18歳未満:22:00以降は、保護者の同伴が必要となります。
対象年齢 12歳以上※詳しくは施設にお問い合わせください。
公式サイト プラサカプコン 広島店
コンテンツ
  • ZOMBIE WAY(体験型ゾンビシューティング)
  • ゾンビジェイル(ゾンビシューティング)
  • ゾンビジェイル II(ゾンビシューティング)
  • Dimension 12(アクションシューティング)
  • サークル オブ セイバーズ×モンスターハンター(アクション)
  • PHOTON BIKE(新感覚レースゲーム)

イオンモール広島府中店(VR ZONE Portal)

子供から大人まで楽しめる地域最大級のアミューズメントコーナー。草原をロボットのわんちゃんと一緒にお散歩する初めてVRに触れる方にも分り易い内容のコンテンツを無料で楽しめる無料お試し台も設置されています。『マリオカートアーケードグランプリ』の世界に入り実際にコースを走るレーシングゲーム『マリオカート アーケードグランプリ VR』。ガンダムの手に捕まってザクと応戦する『ガンダムVRダイバ強襲』。廃病院から車椅子に乗って脱出する『ホラー実体験室 脱出病棟Ω』などが楽しめます。1アクティビティ、1人1,000円。

マリオカート アーケードグランプリ VR

ガンダムVRダイバ強襲

ホラー実体験室 脱出病棟Ω

namcoイオンモール広島府中店(VR ZONE Portal)
住所 広島県広島市安佐南区祇園3-2-1
電話番号 082-284-5891
営業時間 10:00~22:00
対象年齢 13歳以上※詳しくは施設にお問い合わせください。
公式サイト namcoイオンモール広島府中店(VR ZONE Portal )
コンテンツ
  • ホラー実体験室 脱出病棟Ω(オメガ)
  • ガンダムVRダイバ強襲
  • マリオカート アーケードGP VR

アルティアルパーク北棟店

広島西地区最大級の大型複合書店「アルティアルパーク北棟店」。この中のアミューズメントコーナーに株式会社コーエーが提供する体感型VR筐体VR SENSE(センス)がの導入されています。筐体はスパークリングシルバーとスパークリングブルーの2種類。それぞれで遊べるコンテンツが異なります。 各コンテンツ800円。

VRセンス スパークリングシルバー

VRセンス スパークリングブルー

アルティアルパーク北棟店
住所 広島市西区草津南4丁目7-1
電話番号 082-270-5734
営業時間 10:00~0:00
対象年齢 13歳以上※詳しくは施設にお問い合わせください。
公式サイト アルティアルパーク北棟店
コンテンツ
  • スパークリングシルバー
    搭載タイトル:『超 真・三國無双』『G1 JOCKEY SENSE』『DEAD OR ALIVE Xtreme SENSE』
  • スパークリングブルー
    搭載タイトル:『3 Majesty × X.I.P. DREAM☆LIVE』『ホラーSENSE 〜だるまさんがころんだ〜』『超 戦国コースター』

モーリーファンタジー

ファミリーを対象として、大型ショッピングセンター内にあるアミューズメント施設。運営先のイオンファンタジーとグリーは、「子どもも遊べて笑顔になれるVR」をテーマに「未来をあそぼ。ファンタジープロジェクト」を展開。13歳未満の子どもでもVRで遊べるオリジナル単眼HMD(ヘッドマウントディスプレイ)「VRメット」を開発しオリジナルコンテンツが提供されています。

世界初!子どもも遊べるVR

モーリーファンタジー 広島祗園
住所 広島県広島市安佐南区祇園3-2-1
電話番号 070-3100-4142
営業時間 9:00~21:00
対象年齢 3歳以上※詳しくは施設にお問い合わせください。
公式サイト http://www.fantasy.co.jp/
コンテンツ
  • VRどっかん!ブロック
  • VRびっくり!スライダー
モーリーファンタジー 広島府中
住所 広島県安芸郡府中町大須2-1-1
電話番号 070-3100-4737
営業時間 10:00~22:00
対象年齢 3歳以上※詳しくは施設にお問い合わせください。
公式サイト http://www.fantasy.co.jp/
コンテンツ
  • VRどっかん!ブロック
  • VRびっくり!スライダー

各ネットカフェ

ネットカフェで楽しめるのは、「Virtual Gate」「VRカフェ」「VR THEATER」の3つのサービスの提供を各店舗それぞれで行われているようです。

『VIRTUAL GATE』プロモーションビデオ ver キズナアイ

VR THEATER公式 PV2016

メディアカフェポパイ 本通店
住所 広島県広島市中区本通3-10 サザンビル4F-6F
電話番号 082-545-0369
公式サイト http://www.media-cafe.ne.jp/tenpo/hondori/
コンテンツ ・Virtual Gate
フタバ@アットカフェ 紙屋町店
住所 広島県広島市中区紙屋町2-2-33 フタバ図書紙屋町B1F
電話番号 082-542-5455
公式サイト http://futaba-at-cafe.com
コンテンツ
アプレシオ 広島駅前店
住所 広島県広島市南区松原町10-3 広島フルフォーカス5F
電話番号 082-506-1323
公式サイト http://www.aprecio.co.jp/shop/hiroshima_ekimae/
コンテンツ
フタバ@アットカフェ GIGA広島駅前店
住所 広島県広島市南区松原町2-22 6F
電話番号 082-568-4792
公式サイト http://futaba-at-cafe.com/giga_hiroshima.html
コンテンツ
フタバ@アットカフェ アルティ福山本店
住所 広島県福山市明神町1-14-20
電話番号 084-973-8785
公式サイト http://futaba-at-cafe.com/altifukuyama.html
コンテンツ
メディアカフェポパイ本通店
住所 広島県広島市中区本通3-10 サザンビル4階
電話番号 082-545-0369
公式サイト http://www.media-cafe.ne.jp/tenpo/hondori/
コンテンツ
快活CLUB 広島中央通り店
住所 広島県広島市中区堀川町5-5 ヒロヤビル
電話番号 082-544-8548
公式サイト http://www.kaikatsu.jp
コンテンツ Virtual Gate
VR THEATER(見放題)
快活CLUB 五日市駅前店
住所 広島県広島市佐伯区吉見園1-27 アビィーユビル4F・5F
電話番号 082-925-5288
公式サイト http://www.kaikatsu.jp
コンテンツ
快活CLUB 広島祇園店
住所 広島県広島市安佐南区西原9-15-20
電話番号 082-832-4088
公式サイト http://www.kaikatsu.jp
コンテンツ
快活CLUB 廿日市店
住所 広島県廿日市市地御前1-10-33
電話番号 0829-36-4288
公式サイト http://www.kaikatsu.jp
コンテンツ
快活CLUB 広島横川店
住所 広島県広島市西区横川町2-6-1 2F-3F
電話番号 082-532-7188
公式サイト http://www.kaikatsu.jp
コンテンツ
快活CLUB 東広島西条店
住所 広島県東広島市西条土与丸6-1-16
電話番号 082-493-7188
公式サイト http://www.kaikatsu.jp
コンテンツ
快活CLUB 福山東深津店
住所 広島県福山市東深津町3-14-11
電話番号 084-973-0688
公式サイト http://www.kaikatsu.jp
コンテンツ
快活CLUB 福山松永店
住所 広島県福山市松永町6-11-38-21
電話番号 084-930-6858
公式サイト http://www.kaikatsu.jp
コンテンツ
快活CLUB 福山緑町店
住所 広島県福山市松浜町4-5-35
電話番号 084-973-1488
公式サイト http://www.kaikatsu.jp
コンテンツ
快活CLUB 福山東深津店
住所 広島県広島市中区本通3-10 サザンビル4階
電話番号 082-545-0369
公式サイト http://www.kaikatsu.jp
コンテンツ
コミックバスター Ease 福山西店
住所 広島県福山市高西町4-3-61
電話番号 084-930-0904
公式サイト コミックバスター Ease 福山西店
コンテンツ
自遊空間広島本通店
住所 広島県広島市中区本通9-30 ランドマークビル3階
電話番号 082-545-5200
公式サイト https://jiqoo.jp/shop/9931679/
コンテンツ
自遊空間広島海田店
住所 広島県安芸郡海田町南大正町8-6
電話番号 082-824-4119
公式サイト https://jiqoo.jp/shop/9931673/
コンテンツ
自遊空間福山駅前店
住所 広島県福山市東桜町1-41
電話番号 084-973-7760
公式サイト http://localplace.jp/t100046288/
コンテンツ

2018年7月からHTTPS非対応に警告表示

By | お役立ち・知識, ホームページ制作

googleは以前からサイト全体のSSLサーバー証明書(以下SSL証明書)を導入を推奨してきましたが、
2018年7月リリース予定のChrome 68より、SSL証明書を導入していない全てのウェブサイトで「保護されていません」の警告表示が開始されます。

Chrome 68 では、すべての HTTP ページのオムニボックスに「保護されていません」と表示されます。(出典:Google)

Chrome 68 では、すべての HTTP ページのオムニボックスに「保護されていません」と表示されます。(出典:Google)

httpsの利用状況

Googleの調査よると、現在ウェブサイトのhttps化の状況は以下のようになっています。

    • Android と Windows の Chrome トラフィックの 68% 以上が保護されています。
    • Chrome OS と Mac での Chrome トラフィックの 78% 以上が保護されています。
    • ウェブ上のトップ 100 サイトのうち、81 がデフォルトで HTTPS を使用しています。

googleウェブマスター向け公式ブログより

2017年以降特に増加しているそうです。
これトラフィックなのでSNSやECなどが牽引しているのではないかと思います。
まだ一般的な企業や店舗で対応しているとこは、日本では少ない感じがしますし追加費用をかけてまで行うとこは特に広島など地方ではまだ少ない気がします。

セキュリティ警告表示の経緯

Google Chrome ブラウザは、SSLサーバー証明書(以下SSL証明書)を導入していないウェブサイトに対して、アドレスバーによる警告表示を段階的に以下のような強化してきました。
これに合わせそのほかのブラウザーも同じような警告表示が実施されています。

2017年(Chrome 56) Chrome 56 HTTPサイトで提供されているパスワードやクレジットカード番号の入力フォームで警告表示開始
2017年(Chrome 62) Chrome 62 HTTPサイトで提供されている全てのフォームで警告表示開始

今後について

今回はHTTPS非対応のサイトに対してグレーでの警告表示ですが、10月以降の新しいChromeでは、赤字や赤斜線などさらに警告表示のが目立つように強化していくそうです。
他のブラウザーでも同じように警告表示を行ってくると予想されます。今の所HTTPS非対応であることが検索順位には関係ないようですが、今後はわかりません。

HTTPページのChrome 70の処理(出典:Google)

HTTPページのChrome 70の処理(出典:Google)

ただ、googleが検索結果に反映しなくても、開くと警告が表示されるサイトを見たいユーザーは少ないと思いますので、自然にアクセスが減ることが想像されます。
とはいえ、HTTPSが何かわからなくても自社サイトに警告が出て入れば対応を検討をされるところは増えてくると思います。

SSLサーバー証明書(以下SSL証明書)の導入

昔は高価だったSSLサーバー証明書(以下SSL証明書)も今は、無料や年数千円など安価のものも提供されているので導入の敷居を下がっていると思います。
SSLサーバー証明書(以下SSL証明書)の対応は、意地悪ではなく情報が途中で盗み取られるのを阻止やウェブサイトへのなりすましを防ぐことなど安全を確保なので導入してみてはいかがでしょうか?いろどりでも既存のウェブサイトへのSSLサーバー証明書(以下SSL証明書)対応のご相談や導入のお手伝いを行っていますので、お気軽にお問い合わせください。

RICOH THETAでも簡単自由編集「 Free Capture」(フリー・ キャプチャー)を行う

By | 仮想現実(VR)

4KVRカメラInsta360Oneの特徴の一つに自由編集「 Free Capture」ですが、RICOHの60度 全天球カメラ THETAでも行うことができます。
前回、Insta360Oneの記事でも書きましたが、Insta360Oneのパソコンでの編集ソフト「Insta360OStudio」ではmp4形式のファイルが読み込むことができます。とゆうことは、THETAで撮影したのでもできるんじゃないかな?と思って試したところ問題なく読み込み編集できました。

持っているのがTHETA Sなのでとりあえず撮影し、パソコンにデータを読み込みます。

次にパソコンのTHETA編集アプリでこれをパノラマに変換。(スマホアプリで変換し読み込んでも良いと思います。)

それをInsta360OStudioに読み込みます。あとは編集して書き出せば完了です。

今回は、THETA SなのでFull HD画質ですがInsta360Oneが4KなのでTHETA Vで撮影したデータも編集できると思います。残念ながらスマートフォンアプリの「Insta360One」にはカメラーロールなど外部データを読み込むことができないので、編集することができませんが、凝った編集をしたい方はスマホよりパソコンの方がやりやすいと思うので良いのではないのでしょうか?

「Insta360OStudio」は無料で利用することができます。THETAで360度動画を面白く編集したい方は試してみてはいかがでしょうか?

さくらのVPSでスケールアップ

By | WEBサーバー, ホームページ制作

さくらのVPSをスケールアップを行った時の気づきをおしらせします。
ところでさくらのVPSって「さくらのVPS」というサービス名なんですね。

まずスケールアップできるサーバーの条件ですが、公式サイトでは次のように明記されていらす。

スケールアップできるサーバーの条件は、v4のサーバプラン(2014年11月27日以降に契約されているサーバー)お客様に限られます。また、以下の条件ではスケールアップはできません。

  • 下位プランへの変更
  • 別ストレージプランへの変更
  • Windowsプランやベアメタルプランのスケールアップ
  • 別リージョン、別ゾーンへのスケールアップ
  • お試し期間のサーバーや、料金が未納状態になっているサーバープラン
  • VPSを申し込まれた当日のスケールアップ

スケールは管理画面のサーバー一覧からスケールアップしたいサーバーを選択し、右上にある「各種設定」から「スケールアップ」を選択します。
ここで、あとは、スケールアップを行うプランを選択し、必要な情報を入力し申し込むだけです。

ただこの際、サーバーを一旦停止する必要があります。
そして、スケールアップが完了するまでそのまま止めておく必要があります。スケールアップ にかかる時間ですが、さくらのサポートに電話で確認したところ、30分〜1時間かかるとのことでした。早くできませんか?と聞いたところ作業は自動で行われるため手動で対応することはできないとのことでした。

今回のスケールアップでは約1時間かかりました。
その後、完了するとスケールアップ作業中の表示が気えるので、それを確認してサーバーを起動して作業終了です。

スケールアップ後サーバーの内容には変更ないので、起動すればもとどおえりサイトなどを見ることができます。

ということで、サーバーをスケールアップする時には、「1時間ほどサーバーを停止する必要があり、完了を確認したあとサーバーを起動する必要がある。」ということへの何らかの対応が必要になります。