-
マイクラのマルチサーバー構築を諦めたひとは必見!サーバーにConoHa VPSを選んで分かったこと
Minecraftのマルチサーバー構築には、サーバー設定をはじめとしてバージョンアップやバックアップなどさまざまな作業があります。それにともない難しさを覚えて挫折したり、せっかく構築したもののプレイ負荷で満足に遊べなかったりと問題は尽きません。 「マイクラのマルチサーバー構築がややこしい」、「運用しているマルチサーバーが負荷で快適にゲームできない」、という悩みをかかえているならば 「ConoHa VPS」がおすすめです。 ConoHa VPSのサービスには、「かんたん管理ツール」が用意されていてサーバー設定にかかわる多くの悩み解消が見込めます。さらに「自動構築」機能によって作業時間を短縮できます。大切なのはマイクラを遊ぶことですから最短で構築完了できるのは有益です。 快適さにおいても、やりこみ度にあったプランを選べるため良好な状態でマイクラをプレイできます。メモリ増設といったこともプラン変更で済むため機械いじりが苦手でも問題ありません。しかも大手のホスティングサービスということもあって安定性に定評があることでしょう。 そのほかにも構築・運用についてはブログの最後で詳しく解説します。 さきにMinecraftマルチサーバーの構築方法を確認したい方はこちらからご確認ください。 はじめに こんにちは。会津ラボの薄です。私は2020年の4月に会津ラボに入社しました。 その後、マイコンの開発、UnityでARアプリの開発、基幹システムのWebサーバー改修などを担当しました。ひとつの分野にとらわれず、いろいろと経験させてもらっています。 そんななか、2020年6月に公開したマイクラサーバーに関する記事が思いがけず、たくさんの方の関心を集めました。弊社ブログの人気記事1位を独占するほどです。けっして味を占めたわけではありませんが、多くのひとの関心を集めるコンテンツであることを知りました。 それならばマルチサーバー構築初心者の誰しもが抱く「かんたんにマイクラを構築したい」に応えるべく、初心者でもできる構築手順を解説しようと考えた次第です。 Minecraft (マインクラフト)について Minecraftとは、Mojang Studiosから発売されているサンドボックスビデオゲームです。最大の特徴はブロックを配置して建築などを楽しめること。世界で一番売れたゲームでもあり、多くのプレイヤーがプレイしています。 Minecraftには、シングルプレイのほかにマルチプレイが実装されています。自分のワールドを公開したり、ほかの人のワールドに参加したりして一緒に冒険や建築を楽しむことができます。 マルチサーバーとは？ Minecraftを複数人で遊ぶときアクセスするサーバーのことをマルチサーバーと呼びます。すでに公開されているものや友人が用意した遊び場は、このマルチサーバーが動いているというわけです。 あなたがマルチプレイ環境を用意しなければならない立場ならばマルチサーバーを必ず準備しましょう。サーバーがなければ快適なMinecraftライフは始まりません。 3つのマルチプレイ Minecraftにはマルチプレイを行う方法が3つあります。 1️⃣ マルチサーバーを使用したマルチプレイ 2️⃣ ローカルネットワークからの協力プレイ 3️⃣ VPNを使用した、遠隔地からの協力プレイ この節でとりあげているのは、「1️⃣ マルチサーバーを使用したマルチプレイ」です。2️⃣と3️⃣は多人数で行うマルチプレイに向いていません。 VPNのデメリット VPNを使って、遠隔地のプレイヤーと協力プレイができます。 仮想的なプライベートネットワークを設けて拠点間でアクセスを許可するというものです。しかし、この利用方法はおすすめしません。 なぜなら、VPNの導入にはセキュリティリスクがあるからです。 直接ネットワークをつなげるためセキュリティが甘くなり、PCが他者からのアクセスに対して丸裸になる恐れがあります。正しい知識がない状態で使用することは避けてください。 ConoHa VPS とは？ 「ConoHa VPS」は、GMOインターネット株式会社が提供するVPSです。 まずVPS（仮想専用サーバー）というのは、共用サーバーと専用サーバーの長所をあわせもったホスティングサービスのことで、レンタルサーバーのごとくリソースを共用しながらも、専用サーバーと同じく自由に環境構築ができます。比較的安価に機能性と安定性を得られるとしてWeb開発で活用されるケースも少なくありません。 ConoHa VPSならば、WordPressやWebアプリケーション、メールサーバーやDNSサーバーなどの運用はもちろんのこと、Minecraftマルチサーバーの環境を構築できます。 VPSの環境構築は、一定の設定スキルを要するものでしたが、ConoHa VPSには「かんたん管理ツール」が用意されています。Minecraft環境構築がクリック操作だけで完結するため、サーバー設定初心者でも安心できるのではないでしょうか。 ConoHa VPSでマルチプレイをはじめる ConoHa VPS でできること ConoHa VPSでできることをまとめました。 自動で構築できる ConoHa VPSには、Minecraftマルチサーバーを自動で構築できるマルチサーバーテンプレートが用意されています。 通常の構築では、コマンドラインを使用してサーバーファイルの配置や権限設定、アプリのインストールなどなどさまざまな知識と設定が必要になります。しかし、ConoHa VPSを使用することによってこれらの設定がすべて自動で行われます。…
-
今年の漢字は「密」。ところで今年のCSSは？
今年の漢字は「密」。例年のごとく、清水寺をステージにして、ことし1年を表す漢字が発表された。応募集計は208,025票の応募のうち「密」が28,401票を集めて1位という結果に。 コロナ禍で３密（密閉、密集、密接）の注意喚起が発せられ、ソーシャルディスタンスや咳エチケット、手洗いなど、１人ひとりができることを求められた。結果的に、いかなるシーンにおいても「密」を意識させられ「今年の漢字」の応募集計結果にいたったのだと思う。 「今年の漢字」は日本漢字能力検定協会による活動の一環で、漢字の奥深さと意義を再認識してもらうことを目的にしている。毎年全国に公募して、もっとも応募数の多かった漢字を、そのとしの漢字として発表する。清水寺で毛筆をふるっているシーンは、ニュースで報じられるなどして、記憶しているひとも少なくないだろう。 取り組みにおいて成功している「今年の漢字」だが、わたしの本業であるマークアップに関係するCSSで真似してみたい。 今年のCSS わたしとしても、ソーシャルディスタンスは印象に強く鮮明なのだけれど、いまさら漢字１文字というのも芸が足りない。ついてはCSSの１プロパティで表してみた。 justify-content プロパティは、フレックスコンテナの横方向、あるいは縦方向の配置にかかわる定義を役割している。そして space-between 値は、コンテナ幅に対して内包アイテムを均等に配置する。 つまりソーシャルディスタンスを表すのに適当なプロパティだといえる。 雑談 ソーシャルディスタンスって最近は、フィジカルディスタンスって言い改めるよう推奨しているのだとか。
-
Reactアプリの多重クリックを防止する最適解とは？
Reactアプリの多重クリック防止について考えてみたから、共有かたがた備忘のために記しておきたい。 多重クリックとは、ボタン等のユーザーアクションから発せられたイベントが重複処理されることを指す。お問い合わせフォームの送信が想像しやすいだろうか。入力した内容が重複して送信される問題で、まったくもって無駄なリクエストである。 そんなことからアプリケーション全般に多重クリックや二重送信を防止する施策が求められ、それぞれの要件にあった手法で実装されている。無論、Reactアプリも、その例に漏れない。 多重クリックを防止する方法 Webアプリの多重クリック防止のデザインパターンに、非活性化させる手段を思い出す。フラグ判定で処理中は非活性化させるというものだ。これを以下に再現してみた。 コンポーネント冒頭の const [processing, setProcessing] = useState(false); で、state定義している。これをフラグに見立て if (processing) return; で判定するといった具合のものだ。 多重クリック防止のアプローチについては納得いくものだけれど、state を活用したフラグ判定は不適当じゃないか、というのが肝心なところ。 問題 state を更新することで、コンポーネントの再レンダリングが強制される。つまり上記ソースコードならば、コンポーネントをマウントしたときと非同期処理が走ったときレンダリングをスケジュールしている。画面上の更新を求めていないにも関わらず、不要にレンダリングをすることはパフォーマンスに影響を与えかねない。 代替案 state によるフラグ判定の代替案として、以下に改修してみた。 useState は useRef に変わり state の更新を排除したことに気づくと思う。refオブジェクトは一般にDOM参照に活用されている印象があるが、公式で次のように述べている。 はい！ useRef() フックは DOM への参照を保持するためだけにあるのではありません。“ref” オブジェクトは汎用のコンテナであり、その current プロパティの値は書き換え可能かつどのような値でも保持することができますので、クラスのインスタンス変数と同様に利用できます。 https://ja.reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables またコンポーネントが存在しているあいだ書き換え可能なオブジェクトとして保ち続けて、その値を変更しても再レンダリングが発生しない。 したがって Refs の活用は、簡易な多重クリック防止のデザインパターンに相性がよい。再レンダリングによるパフォーマンス悪化や思いも寄らない副作用の回避に一助することだろう。 とはいえ Refs 活用一辺倒でよいというものでもない。たとえばボタンクリックと同時にdisabled属性を付与したりボタンテキストを変えたりする場合、再レンダリングが必要で、適宜コンテンツに最適な対応が求められそうだ。 まとめ Reactアプリの多重クリックを防止する最適解についての共有だった。 わたし自身、Refs の真価に気づかず、Stateを活用しているケースが見受けられた。一方でフォームヘルパーを使うケースもあるしフェッチライブラリならば処理状態を返却してくれる。一概に当該ソリューションが最適解というわけではないけれど、ユースケースとして覚えていて損はないと思う。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。 React Hooksに対応した複数のonChangeハンドラを処理する書き方
-
[React] アニメーション付き数値カウンターで視覚演出する「react-number-easing」の使い方
![[React] アニメーション付き数値カウンターで視覚演出する「react-number-easing」の使い方](https://wordpress.aizulab.com/wp-content/uploads/2023/10/numbers.png)
リアルタイムWebコンテンツにおいてプログレスUIを配置するケースは少なくない。これは進行状況を知らせるために用いられ、たとえばアップロード進捗やAPIリクエスト進捗など思い出される。 さてこのプログレスUI（進捗値）をページに描画するにあたり、瞬時に切り替わるような単純な差し替えでは面白くない。せっかくだから、なめらかに推移するようなエフェクトをかけてリアルタイム感を演出したい。 そんなニーズに最適なReact componentがある。 このエントリーでは、数値変化にアニメーションを与える「react-number-easing」を紹介したい。 導入方法 react-number-easing は、以下コマンドから導入できる。 インストール 設置 props Name Default Hint value null 目標値を設定 speed 500ms アニメーションの速度を設定 ease quintInOut アニメーション方式を設定 decimals 0 表示する小数点以下の桁数を設定 customFunctionRender Number(value).toString(decimals) レンダリング関数のカスタム設定 基本的な使い方 以下でreact-number-easingを使用したReact componentの例を示そう。6秒毎に数値がアニメーションする、というものだ。 まとめ 数値変化にアニメーションを与えるReactコンポーネント「react-number-easing」の紹介だった。 当該コンポーネントの使用は、いたって簡単でステートの更新で機能する。さらにpropsは少なく非常にシンプルな作りのため迷子になるようなことはなかった。アニメーション方式は内部でeasesライブラリを読み込んでいて、ひと通りのeasingは選択できる。雰囲気にあったものを適用するとよいだろう。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。
-
Minecraftサーバーを低コストハードウェアで検証 (デスクトップPC/Pine64/Android)
こんにちは。薄です。 Minecraft Realms（レルム）というサービスをご存じですか？ ゲーム「Minecraft」のマルチプレイ用サーバーの公式有料レンタルサービスです。 Minecraftの大きな特徴である大規模オンラインマルチプレイを行うためにはMinecraftサーバーが必要になります。 Minecraft Realmsでは月額約900円ほどでMinecraftサーバーを貸し出しています。 じつはこのMinecraftサーバー、個人で構築できます。 OSやサーバーソフトウェアは無料で配布されており、性能の低いコンピュータ(ハードウェア)でも動かせます。 つまり、Minecraftサーバーの構築条件を満たした低コストハードウェアがあれば、自分だけのMinecraftサーバーを低コストで構築できます。これができれば、毎月有料レンタルするより安上がりです。 そこで今回は、低コストでMinecraftサーバーを運用可能なコンピュータを探しました！ なお、サーバーの購入・構築・運用等はすべて自己責任でお願いします。 Realmsとは… 公式で運営されているMinecraftサーバー。月額制で、同時に10人まで接続できるMinecraftサーバーを貸し出している。 Minecraft エディション Java Bedrock(統合版) 月額料金 904円 930円 Minecraftの各エディションと月額料金 検証に使用したもの 以下の3つのハードウェアについて、Minecraftサーバーの構築・検証を行いました。すでに多くの人が持っている・低コストで入手可能といったものを集めました。 Intel core2 duo搭載デスクトップPC (EPSON AT971) シングルボードコンピュータ (Pine64+ 2GB BOARD) Android搭載スマートフォン (SHARP AQUOS R2 compact SH-M09) 構築をする際に、使用した基本的なソフトウェアは以下の通りです。ハードウェアによっては追加で専用のソフトウェアを導入しています。専用のソフトウェアについては、各項目で説明しています。 UbuntuServer (各対応バージョン) JDK8 Minecraftサーバーソフトウェア(公式) bedrock版(統合版) Java版(PCのみ) Intel core 2duo搭載デスクトップPC(EPSON AT971) EPSON公式サイトより引用 項目 詳細 CPU Intel…
-
アジャイル開発に入門する2020――今すぐ読みたい３冊を紹介
PC を新調して今更 Minecraft を始めました、開発３年目くらいの吉原です。サーバー構築の記事（一つ前の記事参照）助かります！！！ 俺はソロだが…… ブログぜんぜん書いてないから書けって言われたので書きました！ これが所謂ブログ書けハラスメント通称ブロハラというものでしょうか……（これは冗談ですが、どうしたらもっとブログが活発になるかは考えた方がよいかもしれません）。 アジャイル開発 さて、皆さんは「アジャイル開発」を知っているでしょうか？ 当たり前、という人もいれば、聞いたことはある、くらいの人もいるかと思います。 今年の３月に IPA からアジャイル開発版「情報システム・モデル取引・契約書」が出たり、アジャイルに関する日本語の書籍も多く出版されてきているように、日本においてもアジャイル開発は徐々に広まってきている、或いは広まるための土台は作られてきているのかなと感じています。 ですが、弊ラボでは正直なところ未だアジャイルという概念はあまり浸透していません。私も去年くらいまでは「アジャイルって何？」側の人でした。そのため、もしかしたらアジャイルについて全く知らない人や、誤解している人もいるかもしれません。そしてこれは推測に過ぎませんが、同じような状況にいる人も多いのではないかと思います。 私がアジャイル開発に興味を持ったのは、プロジェクトが思うように進まず、どうしたらソフトウェア開発・システム開発が「うまくいく」のか調べていたときでした。 最初は要件定義や設計など、上流工程のフェーズがしっかりできていないことが問題だと考えました。そのため、要件定義や設計に関する多くの書籍やブログ記事などを読みました。（余談ですが、私が特に興味を惹かれたのは「ドメイン駆動設計」でした。これについてもそのうち紹介できたらなと思います。）そのうちいくつかの本や記事は、「アジャイル」という単語に触れていました。これは一体なんなのだろうと思い、次第にアジャイルに関する書籍やブログ記事も読むようになりました。 これは正解でした。少なくとも、アジャイル開発に関する書籍やブログ記事を読むことは、私にとってとてもエキサイティングでした。勿論『人月の神話』や多くの人々によって語られているように、銀の弾丸はありません（少なくとも今のところあるとは思われません）。しかし、アジャイルには、これなら本当にソフトウェア開発・システム開発が「うまくいく」かもしれない、そう思わせてくれるものがありました。アジャイルは、それ自体もそうですが、大きな思考の転換を齎してくれたことが最大の魅力だったのかもしれません。 弊ラボでもアジャイルを「よりよい開発」に役立てて行きたい！ そんな思いから、本や記事を読むだけでなく、実践に繋げていこうと考えています。 今回、去年〜今年にかけて出版されたアジャイル初心者向けの書籍を３冊ほど読んでみたので、社内への布教も兼ねて紹介してみようと思います。「アジャイルって本当に役に立つの？」という人も、或いは「アジャイルはじめました！」という人にもおすすめできる３冊になっていると思います！ 『みんなでアジャイル――変化に対応できる顧客中心組織のつくりかた』（オライリー・ジャパン） アジャイルを、原則（なぜ）とプラクティス（どうやって）が互いに連携した「ムーブメント」として捉え、道を踏み外さぬように（或いは道を踏み外してもすぐに戻れるように）アジャイルの旅を手引きしてくれる入門書です。 本書ではまず「顧客から始める」「早期から頻繁にコラボレーション（協働）する」「不確実性を計画する」といった３つの原則を紹介していきます。本書の良いところは、プラクティスや実践方法も紹介しつつ、常にこの原則に立ち戻ることの重要性を理解させてくれるところです。これにより、例えばアジャイルプラクティスにただ表面的に従っているだけで成果に繋がらない、というような状態に陥ることを避けることができるというのです。 また、「そもそもなぜアジャイルを採用しようとしているのか？」「チームや組織のゴールは何なのか？」といった難しい質問に答えることの重要性にも気付かされます。 今の所アジャイルの入門書としては第一に薦めたい本です。「みんなで」とある通り、開発者やマネージャーだけでなく、セールスやマーケティング、顧客など、どんな人にも薦められる本となっています。しかし多少意味をとりにくい部分などもあるため、読みにくい場合は他の本を読んでから再挑戦してもよいかもしれません。 見た目的にも分厚い本ではないので、取っ付き易いのではないかと思います！ （届いたときは思ったより薄くて驚き、その中身を読んでその内容の濃さに再度驚きました） 『レガシーコードからの脱却――ソフトウェアの寿命を延ばし価値を高める9つのプラクティス』（オライリー・ジャパン） 本書は「IT エンジニア本大賞 2020」にも選ばれた本であり、目を通した方も多いのではないでしょうか。タイトルにこそアジャイルとはありませんが、「レガシーコード」に対処するための選択肢としてアジャイルソフトウェア開発を取り扱っています。 前半では「レガシーコード危機」と題して、「100 億ドル単位の損失」などといったショッキングなデータを持ち出し、ソフトウェア開発を「何かが間違っている」「素人業界」と辛辣に批評しています。しかし、そんな中でも成功しているプロジェクトはあり、賢人たちによる新しいアイデアによってソフトウェア業界は正しい方向に動き始めているとします。 後半では副題にもある通り、レガシーコードに対処する、或いは最初からレガシーコードを作り出さないための９つのプラクティスをその原則とともに紹介しています（原則とプラクティスが不可分なのは先に述べたとおりです！）。プラクティスは、多くがアジャイルやエクストリーム・プログラミング (XP) に由来するものです。 本書は比較的技術プラクティスを重視する姿勢が感じられます（勿論、原則を理解していなければならない、ということは再三再四注意されます）。原則なきプラクティスはうまくいきませんが、原則だけでプラクティスがなくてもまたうまくいきません。先の『みんなでアジャイル』と合わせて読むことで、原則とプラクティスの両面からアプローチできるのではないかと思います。 なお本書では「ウォーターフォールはレガシーコードを作り出し拡散する」などと批判しつつも、ウォーターフォールのような開発であろうが、或いはどんな方法論を使用していようが、これらのプラクティス（エクストリーム・プログラミングのプラクティス）は役に立つと述べています。アジャイルに必ずしも興味がなかったとしても、本書を読むことで多くの発見ができるでしょう。 読み物としても面白い本ですが、その分やや記述が冗長で纏まりがないと感じられることもあるかもしれません。また、プラクティスが理解しにくい、読みにくいと感じたら、そのプラクティスに特化した書籍を読んでみることをおすすめします。最初の数プラクティス（「やり方より先に目的、理由、誰のためかを伝える」「小さなバッチで作る」等）はアジャイル由来の部分が大きいため、『アジャイルサムライ』（オーム社）などを読んでみるとよいかと思われます。 『SCRUM BOOT CAMP THE BOOK【増補改訂版】 スクラムチームではじめるアジャイル開発』（翔泳社） 本書は 2013 年に発売された同名の本の改訂版です。私は改定前の方を読んでしまい、この増補改訂版は読んでいないため（すみません！）、以下は改定前のものについての話となります。 本書はアジャイルのフレームワークの１つであるスクラムを中心に解説した本です。最大の特徴は漫画仕立てで読みやすいことです！ かつ、これ１冊でスクラム開発を始めるために必要な知識が一通り揃うようになっています。 アジャイルについてはなんとなくわかってきた（？）けど実際にどのように進めようか、と思ったとき、まずはスクラムに挑戦してみるということもあると思います。その時に是非チームで、或いは周りの人々も巻き込んで一読したい本です。 改定前のものを読む限りでは構成は大きく「基礎編」と「実践編」に分かれていて、「実践編」部分をレファレンス的に使うのは少し難しいかなと感じました。その場合は『エッセンシャル スクラム』（翔泳社）などをおすすめします。改訂版ではスクラムのルール変更に対応する等全面的に見直しを行っているとのことなので、改訂版も是非読んでみたいと思います！ まとめ 在宅勤務をしていたとき VTuber（バーチャル Youtuber）の面白さに気づき、特に最近はホロライブの動画をよく見ていました（決してサボっていたわけではなく、通勤時間等が浮いたためです。本当です！）。そして、視聴数やチャットの流れる速度がえげつない VTuber を見るたびに、私もたくさんの人に本物の価値提供をしていきたいと思うようになりました。アジャイルへの入門がその一歩になればと思っています。 会津ラボでは本物の価値を提供したい人を募集しています。 （なぜかアプリケーションプログラマの募集が多いですが、システムの設計開発やアジャイル・DevOps…
-
Minecraft(統合版)を自宅サーバーで遊んでみた！Ubuntuによる構築に挑戦
初めまして、新人の薄です。初めてブログの更新で不慣れな箇所もあるとは思いますが、よろしくお願いします！ みんな大好き、Minecraft Minecraft 一度プレイしたら、 時間が溶けることで有名な「Minecraft」。「テトリス」の販売数を超え世界一売れたゲームになったとか。動画サイトのゲーム実況では、必ずといっていいほどにMinecraftの文字をみます。 Minecraftは一人でも楽しいですが、友人や家族と一緒にやるとさらに楽しくなります。しかし、マルチプレイを行うにはいくつかの条件があります。この記事ではマルチプレイをお金をかけずに楽しむことを目的にサーバーの構築について紹介していきます。 マルチプレイ マルチプレイを複数人の仲間のみが入れるワールドで行うのは、少々面倒です。マルチプレイを行うには以下の方法があります。 専用機によるMincraftサーバーの構築・公開 専用機を自前で運用することは難しいですから、公式・非公式の有料レンタルサーバーの利用が一般的です。 ゲームをしながら同じパソコンでMinecraftサーバーを構築・公開 パソコンの性能とインターネット回線に余裕があり、遊ぶ際にゲームを起動する必要があります。セーブデータを持っている人がプレイしていない時間は、続きを遊べません。Minecraftサーバーの構築はゲームが自動でやってくれます。 Minecraftサーバーがほしいなぁ… 私の場合は友人から「セーブデータを持っている人が遊んでいない時間でも、みんなでMinecraftを遊べるようにしてほしい」との要望をもらいました。この要望からMinecraftサーバーに求める条件は以下のようになりました。 いつでもゲームに参加できること マルチプレイ可能(2～5人) 仲間だけでゲーム 各ゲーム機、スマホ、タブレット、PCから利用可能なMinecraft Bedrock Edition(統合版) お金はない これらの条件を元に検討してみます。 有料レンタルサーバーだと維持費が高い 誰かがプレイ時にサーバーを立てる方法では、いつでもゲームに参加できない 無料サーバーは他人がいる 以上の理由から、専用機を用意しMincraftサーバーを自分で構築することにしました。 ConoHa VPS 専用機を自前で運用することは難しいので、「多少維持費がかかってもMinecraftサーバーを簡単に用意したい」という方はレンタルサーバーがおススメです。700円分の無料クーポンが貰えるので2GBメモリのプランなら約8日強は無料で使えます。 マイクラのマルチサーバー構築を諦めたひとは必見サーバーにConoHa VPSを選んで分かったことマイクラのマルチサーバー構築を諦めたひとは必見サーバーにConoHa VPSを選んで分かったこと サーバー？ サーバーといってもWindows10とそこそこの性能のデスクトップPCで十分です。というわけで、家に余ってるPCがないか探したところ…転がってました！ 項目 性能 CPU Intel core 2 duo メインメモリ 3GB OS Windows7 失礼いたしました。”そこそこの性能のデスクトップPC”が家にありませんでした。これは”10年前のデスクトップPC”です。お詫びして訂正いたします。 みなさんご存じだとは思いますが、Windows7はサポートを打ち切られておりネットに接続するのは危険です。また、Windows10無料アップグレード期間にこのデスクトップPCは放置されていました。つまり、Windows10にお金を出してアップグレードを行う必要があります。しかし、Windows10を買うお金はありません…。そもそも、まともに動かない可能性の方が高いです。メモリ３GBですし。よってこのデスクトップPCを使いつつ、OSを入れ替えることにしました。 なお、マインクラフトマルチサーバーの必要スペックについて詳しくは、下記の記事をごらんください。 Minecraftサーバーを低コストハードウェアで検証 (デスクトップPC/Pine64/Android) サーバーOSとサーバーソフトウェア サーバーの構築に必要なOSとソフトウェアです。すべて無料で配布されているため、お金がかかることはありません。 サーバーOS Ubuntu Ubuntu DebianベースのLinuxディストリビューションで誰でも無料で使えるOSです。 Ubuntu…
-
アニメーションアイコンで横スクロールすることを案内するJavaScriptライブラリ「scroll-hint」の使い方
レスポンシブデザインのコーディングに際して、横にはみ出させざるを得ないコンテンツがある。そのもっともたるものが表レイアウトで、モバイルスクリーンでは、だいたいの場合は横幅超過してしまう。 無思慮な状態だとページ全体が押し広げられ、想定しないところに横スクロールが発生する。このことを考慮して、対象エリアにのみ横スクロールするようなスタイルを当てるのが一般的であろう。 それ自体は周知のことで、取り立ててお伝えすることではない。ただしスマホで閲覧した場合のスクロールバーは非表示になる仕様上、table要素はただただ見切れているように認識され兼ねないわけだ。伝えたいことが見逃されるのは大変不利益になる。 そんな事案に最適なライブラリがある。 このエントリーでは、バナー通知で横スクロールできることを促すJavaScriptライブラリ「scroll-hint」を紹介したい。 ScrollHint について ScrollHintは、ポインターアイコンのバナーを表示して、スクロールできることを通知してくれるJavaScriptライブラリだ。 https://appleple.github.io/scroll-hint/ 特徴 ライブラリに依存しない Vanilla JSで極めて軽量 導入 まず入手方法は、次の3つから都合のよいものを選んでほしい。 npm or yarn CDN Download npm or yarn CDN Download https://appleple.github.io/scroll-hint/ 設置・実行 以下例はバンドラー環境下を想定している。CDNにて読み込んだ場合は、import文は不要だ。 設定 Name Default hint suggestClass is-active スクロールされたとき追加されるクラス scrollableClass is-scrollable スクロール可能なとき追加されるクラス scrollableRightClass is-right-scrollable 右へスクロール可能なとき追加されるクラス scrollableLeftClass is-left-scrollable 左へスクロール可能なとき追加されるクラス scrollHintClass scroll-hint ターゲット要素に付与されるクラス scrollHintIconClass scroll-hint-icon 通知要素に付与されるクラス scrollHintIconAppendClass scroll-hint-icon-white 通知要素に付与されるクラス scrollHintIconWrapClass scroll-hint-icon-wrap…
-
【無料】PHP無し、HTMLだけ！お問い合わせフォームの作り方
お問い合わせフォームを設置するとき、PHPなどのサーバサイドに類するいずれかの言語とHTMLの知識が必要になる。サーバサイドの処理があってこそお問い合わせフォームが機能することは、きっと既知のことだと思う。 しかし「HTMLはできるけど、PHPは…。」っていう事例は少なくない。やはりスクリプト言語が関わってくるとややこしくてちんぷんかんぷんだ、という感想は非常に共感できる。わたしもHTML,CSSの知識しかなかった頃、お問い合わせフォームの実装に際してPHPに接触したわけだけれど、「なんて難解なんだ」と思ったものだ。簡単に実装できる手段がないものかと。 そんなニーズにマッチしたサービスがある。 このエントリーでは、PHPの知識不要でお問い合わせフォームが実装できるWebサービス「StaticFroms」を紹介したい。 お問い合わせフォームとは お問い合わせフォームは、ユーザーがサイト運営者に連絡する手段のひとつで、サービスについての質問やクレーム、会社の雇用に関する問い合わせ窓口としてWebサイトに設置するケースが考えられる。 そのメリットとしては、必要最低限の情報を要求できる点が挙げられる。これによりフォーマットされた情報が得られるため見落としや誤解を極力回避できることだろう。またサイト運営者としては、メールアドレスを不用意に晒す必要がなく迷惑メールを減らすことにも寄与するはずだ。 ユーザーからすれば、お問い合わせ毎にメールクライアントを立ち上げて入力するより遥かに気軽でよい。電話に抵抗があるユーザーにとってもお問い合わせフォームによる窓口は便利なコンテンツといえる。 StaticFroms について StaticFromsは、お問い合わせフォームのメール送信をサポートするサービスだ。サービスの利用に際して、規約に遵守する限り無料（2020年2月現在）としている。もし不正利用が発覚した場合には、アカウントをブロックする処置が講じられる。 お問い合わせメールの送信先は、まずStaticFromsのAPIに向いており、その後、対象メールアドレスに転送される。件のメールデータは保存せず誰とも共有しないとし、安全を謳っている。 https://www.staticforms.xyz/ 特徴 無料（2020年2月現在） PHP（サーバサイド）の知識不要 HTMLのみで実装可 お問い合わせフォームの実装手順 さて実装手順を説明していくが、まだHTMLのみで実装できるのか半信半疑かもしれないから、まず以下HTMLコードを共有しよう。 これだけだ。 正しくは要所を修正するけれど、PHPなど書いていないことは理解してもらえたと思う。それを踏まえて手順を示そう。 1. アクセスキーを取得する https://www.staticforms.xyz/ にアクセスして、アクセスキーを取得しよう。以下キャプチャの具合に、対象メールアドレスを入力してボタンをクリックすると、当該メアド宛にアクセスキーが送信される。 アクセスキーの発行が成功すると以下メールを得られる。本文中の「Access Key: xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx」がアクセスキーだ。太字の部分をコピーしておこう。 2. HTMLを修正する 前述したHTML内に<input type=”hidden” name=”accessKey” value=”aaaaaaaa-bbbb-cccc-dddd-eeee6666kkkk”>を確認できるだろうか。これのvalue属性値に、さきほどコピーしたアクセスキーをペーストしよう。 続いて<input type=”hidden” name=”redirectTo” value=”https://example.com/contact/success”>のvalue属性値に記述しているURLは、お問い合わせフォームの送信後のリダイレクト先になる。送信完了ページに遷移させるのが一般的だろうから、参照パスを記述したい。 このときルートパス（例：/thenks.html）や相対パス（例：./thenks.html）としてはならない。必ずドメインを含めたURL形式（例：http://ドメイン名/thenks.html）にしてほしい。さもないとStaticFromsのAPIサーバを参照してしまい、想定したページを表示させられないはずだ。 さいごに<input type=”hidden” name=”subject” value=”Test from jsfiddle”>のvalue属性値にメールの件名を書き込もう。 ここまで来たら、だいたいお問い合わせフォームの機能を果たしている。 お問い合わせフォームのカスタマイズ 前章でお問い合わせフォームとしての機能は果たしているのだけれど、Webサイトのコンテンツとしては貧弱と言わざるを得ない。 まず見栄えがショボい。前述のソースコードだけでは簡素極まる状態だから見栄えの調整が必要だろう。また入力フィールドの値チェックがないことで誤入力や未入力が発生するため、妥当性チェックがあったほうがよい。 このあたりのことも得意ではないというあなたのために、入力フィールドの見栄えの調整と妥当性チェックのサンプルを示そうと思う。参考にしてもらえると有り難い。 見栄えを調整する 見栄えを整えるためにスタイルシートを用いることは、ご存知かもしれない。しかしフォーム関連のHTML要素はブラウザ毎に独自のユーザーインターフェースをしていて、差異を無くすことに手こずるようなケースがある。このような要望に対応したのがCSSフレームワークのBootstrapだ。 Bootstrapを使ってモダンな入力フィールドに整えようと思う。Bootstrapのスタイルを適用するに際して、CSSファイルを読み込みたい。以下例ではCDNサービスにホストされたファイルを参照している。もし要件に沿わず不都合であるならばダウンロードして利用すればよい。 続いて各種入力フィールドにBootstrap規定のclassを付与していくわけだが、以下ソースコードを眺めてもらうのが早そうだ。 See…
-
モバイルブラウザの100vh問題を回避するReactコンポーネント「react-div-100vh」の紹介
要素の高さをビューポートに吸着させる手段として、100vhが最適解ではあるが、モバイルブラウザにおいては悩ましい点があることをご存知だろうか。 モバイルブラウザには、URLを表示するアドレスバーとタブ切り替え操作等のコントロールバーが備わっている。これらはそれぞれスクリーン上部と下部に配されていて、ユーザーの操作によって現れたり隠れたりするわけだが、100vhとするとバーが隠れた状態のビューポートを認識してしまう。この状態でバーが出現するとページ下部に重なる具合になる。想定としてはページ下部に続いてコントロールバーが出てほしいにも関わらずだ。 この事象を解決してくれるReactコンポーネントがある。 このエントリーでは、モバイルブラウザの100vh問題を回避するReactコンポーネント「react-div-100vh」を紹介したい。 react-div-100vh について react-div-100vhは、モバイルブラウザのビューポート100vh問題を回避するReactコンポーネントだ。アドレスバーとコントロールバーがある状態のビューポートを認識することで、ページ下部にコントロールバーが重なる見苦しさを回避してくれる。 https://github.com/mvasin/react-div-100vh インストール 設置 デモンストレーション <div style={{height:100vh;}}>のとき <Div100vh>のとき まとめ モバイルブラウザの100vh問題を回避するReactコンポーネント「react-div-100vh」の紹介だった。 react-div-100vhは、レンダリング前にwindowサイズを計算して高さを明示しているようだから、表示された後にチラつくような動作はないだろうと思う。またこの回避策はReactアプリに限ったことではなく、通常のコーディングでも活用できるもので、ビューポートに吸着させる要素にwindow.innerHeight値を与えれば、同様のことが果たせるはずだ。 このエントリーが、あなたのクリエイティビティを刺激するものであると期待したい。