初心者向け

プログラミングを始めたい方はこちらの記事を参考にしてください。プログラミングを初めて最初の６か月くらいは謎だらけですが、あとから学んだ知識がつながってうまく理解できるようになります。

またプログラミング言語だけでなく、ネットワークの知識や英語の知識もあると理解が早く進みます。

チュートリアルを見て学んだことを自身の手でコードに書いてみましょう。

three.jsを使ってみよう

by
three.js 使い方

今日はJavaScriptライブラリで３Dオブジェクトを使う事ができるthree.jsを紹介します。 今回は基本としてオブジェクトを作成するところまで説明したいと思います。 環境 three.jsをインストール では、公式ドキュメンテーションに沿ってライブラリをインストールしましょう。 ついでにgsapのライブラリもインストールします。 これはブラウザに関係なくJavaScriptのアニメーションを動かしてくれるヘルパーになります。 Viteを使わなくても良いですが、お勧めなのでVanilla JSでもViteを使ってプロジェクトを作成してみましょう。 これでブラウザからデフォルトのぺージが見れるようになりました。 three.jsを始める前に three.jsでは３Dのオブジェクトが使えます。という事はそれに合わせて３Dを出力するための情報が必要になるわけですね。 必要な情報は： ①シーン（scene）：風景。three.jsに何をどこにレンダーするか決めます。 ②キャラクター：モノや、キャラのオブジェクト ③ライト：光の方向や強さなどを調整します。 ④カメラ（camera）：対象物に向けます。デフォルトでは、対象物と同じ位置なので離してあげます。 ⑤レンダラー（renderer）：シーンをHTMLにレンダーしてくれます。 では、下記の例が基本の例です。 これでHTMLに球体が表示されました。 キャラクター それぞれのメソッドに入れる引数で各パラメータを変えることができます。 上記の例では、SphereGeometry()で球体を呼び出しています。公式ドキュメンテーションでパラメータを変えながら実物をビジュアル化して確認することができます。 キャラクター（物体）のコードの例をおさらいします。 SphereGeometryの部分で形を指定します。 他にBoxGeometry（四角・箱型）や、ConeGeometry（コーン、三角の角）の形までいろいろあります。 このSphereGeometry( 15, 32, 16 )のコンストラクタの使い方を説明します。 今回はSphereGeometry（球体）で説明します。デフォルト値や入る値はそれぞれの形で変わるので参考までに理解して、応用してください。 radius — 半径（デフォルトで１）widthSegments — 水平のラインの数（最小値３、デフォルトで３２）多いほどなめらかになります。heightSegments — 垂直のラインの数（最小値２、デフォルトで１６）多いほどなめらかになります。phiStart — （水平のスタートする角度、デフォルトで０） 他に、phiLength、thetaStart、thetaLengthなども指定できますが、省きます。 素材 では、形（シェイプ）を決めたところでその素材（マテリアル）を決めます。これにより、光の反射の仕方やテクスチャ（感触）が変わってきます。 例としてMeshNormalMaterialを使うとこのように書けます。 このマテリアルはベクター素材をRGBカラーに変換してくれます。 素材の種類だけでもこんなにあります。 さらに各素材で指定できるパラメータがあるので必要に応じて確認してください。 これで、シェイプ（形）とマテリアル（素材）を合わせて物体を作成してシーンに追加します。 ライト 次にライトを見てみます。ライトの設定で、先ほど作成した対象物の見え方が変わってきます。 例えば、HemisphereLightを使うとこのように見えます。 このHemisphereLightは上空から照らすライトなのでこのような影が生成されます。 他に、AmbientLightを使うとこのようにグローバルに対象物を照らすライトが全体を明るくしてくれます。 AmbientLightだけだと方向の概念がないために、３Dのように見えませんね。 … Read more

ReactでMaterial UI（MUI）を使ってみよう

by
ReactでマテリアルUIを使ってみよう

Material UI（MUI）はフランスの会社でReactをはじめとしたUIデザインのライブラリを提供しています。日本だとユニクロがマテリアルUIを使っているようです。 このUIデザインではGoogleのマテリアルデザインというデザイン言語（テーマ）をもとに洗練されたUIを作ることができます。 今日はReactにMaterial UIをインストールして使う方法を紹介していきます。オープンソースでコードをGitHubで見ることもできます。 Reactのプロジェクトをスタート 今回はViteを使ってReactを始めます。詳しいViteの使い方はこちらの記事を参照してください。今日はReactのプロジェクトを始めるために必要なコマンドだけ紹介していきます。 react >= 17.0.0 でreact-dom >= 17.0.0 以降のバージョンを使用することが前提です。 ではcdのコマンドでReactのプロジェクトフォルダに移動して、npmを使ってライブラリをインストールします。 Material UIをインストール では下記のコマンドでMaterial UIをインストールしていきます。 Material UIはデフォルトでEmotionというスタイルエンジンを使っています。詳しい使い方は後から説明します。これでJavaScriptでCSSスタイルの記述ができるようになったとだけ理解しておきましょう。 似た方法で、styled-componentsのライブラリを使ってスタイリングを記述する方法もあります。今回は省きます。 Robotoフォントのインストール Material UIはデフォルトでRobotoフォントを使用します。 こちらもインストールしておきましょう。もしインストールではなくCDNでフォントを使用したい場合は飛ばしてください。 フォントのCSSのインポートはこのように記述しましょう。 CDNでフォントを使用したい場合 GoogleのCDNで提供されているフォントを使用したい場合は<head>タグ内に下記を記述します。 アイコン 次にマテリアルUIで使用するアイコンをインストールします。 もし、インストールではなくCDNでアイコンを表示したい場合は下記の様に<head/>タグ内にリンクを記載しましょう。 Material UIを使ってみよう では、早速テキストエディタを開いてMaterialUIのボタンを使ってみましょう。 コンポーネントのインポートはimport Button from “@mui/material/Button”;を使用してください。これで、<Button/>コンポーネントが使用できるようになりました。 実際にnpm run devのコマンドで開発用のウェブサーバーを起動するとこのようにボタンができたことが確認できます。 レスポンシブmetaタグ Material UIはモバイルファーストのコンポーネントになります。ですのでPCでスケールアップする際にCSSのMedia Queryを使ってデザインを変えるようにしていきます。 すべてのデバイスで正しくレンダリングされるように<head>タグ内に下記の行を追加しておきましょう。 例としてスライダーもコピペで使えるようになりました。 テーマカラーとスタイリング 次にCSSのカスタムの仕方を見てみます。 各コンポーネントにsxというpropsを流すことができます。これでカスタムスタイリングを設定することができます。 下記の例を見てください。 このようにsxにカスタムしたいCSSを指示していることが分かります。 更に、ThemeProviderを使うことでテーマカラーを変更することができます。これはオプショナルなのでカスタマイズしたいときには使う事もできます。 基本はこれくらいです。 … Read more

console.logだけではないconsoleの使い方

by
consoleメソッド

フロントエンド開発にあたりconsole.log()は黄金のツールです。しかし、このconsoleオブジェクトにはもっと使えるメソッドがあります。正しく、そして効率よくデバッグを行うためにこのconsoleについて調べていきましょう。 console.logの問題 console.logだけを使っているとコードがconsole.logだらけになり、どのコードを実行しているのかわからなくなり、読みづらくなってしまいます。今日はconsoleで使える９の方法を紹介していきます！ console.table console.tableは表形式でデータを表示してくれるので読みやすいデータを出力することが可能になります。 これを実行すると下記のようにテーブルで結果が返ってきました。 console.group console.groupとconsole.groupEndを使ってネスト化されたアコーディオンでグループになったデータを表示できます。これで階層の違うデータを操作しながら確認することができますね。 このようにクリックしてデータをトグルできるようになりました。 console.time console.timeとconsole.timeEndで指定したコードブロックが実行されるまでの時間を計算することができます。 特にパフォーマンスの検証をする際に使えます。 今回はポケモンAPIのデータ取得にかかった時間をミリ秒で表示してみました。 このようにconsole.time()とconsole.timeEnd()内のストリングが同じ名前になっている部分を計算してくれます。 console.assert assertは断言するという意味になります。つまり、常にtrueになると想定する状況を構築しておきます。もし、指定した状況がtrueでない場合に記述しておいたメッセージを表示することができます。コードが正しく実行されているか確認するために、バグをいち早くキャッチするために有効になります。 この場合は、resuletが50で返ってくる想定として、5で返ってきたためにメッセージが表示されました。 もちろん、result ===5にすると関数が正しく作動していると検証されるのでコンソールには何も表示されなくなります。 console.logのスタイリング soncole.log()で表示させる内容をCSSでスタイリングすることができます。 このようにボールドで、赤文字のテキストが表示されました。 console.trace console.traceはスタックトレースをアウトプットしてくれます。コードが複雑になり、実行される順番を確認したいときに便利になります。 このように、関数bar()を実行した際に発火されたfoo()がどこから呼び出されたか理解することができます。 console.dir console.dirは、オブジェクトを階層ごとで表示することができます。もしオブジェクトをコンソールからみたい場合はこの方法が有効的です。 このようにトグルできるオブジェクトが表示されました。 console.count console.countメソッドでは、指定したコードが何回実行されたのかトラッキングすることができます。 このように、foo(‘hello’)が2回実行されたことが確認できますね。 console.clear console.clearを実行するとコンソールに表示されるデータがクリア（削除）されます。もし、デバッグのアウトプットが多くて対象のものにフォーカスしたい場合は使ってみるものありですね。 このように、clearされたことが表示されて、その後に新しくコンソールを使うことができます。 まとめ console.log()だけでない、consoleの使い方を９つ紹介いたしました。知らないもので今日から使えるものはありましたでしょうか？ 是非、活用してみてください。

Windows 11 でWSL2（Windows Subsystem for Linux）を始めよう

by

今日はWindowsのPCからLinuxが使えるWSL2（Windows Subsystem for Linux）を紹介します。この機能により、GNU/Linuxを再現し、コマンドラインツール、ユーティリティ、アプリケーションがそのまま使えるようになります。他に似たようなアプローチでは下記の方法があります。 WSL2はWindowsのシステムをそのまま残したまま使えるので状況によっては有利になる場合もあります。しかし、100%のLinuxがそのまま使えるというわけではないので何ができないのか注意しておくことが必要ですね。 WSL2の特徴 WSL2の特徴はこのようになります。 WSL1とWSL2の違い 下記に前バージョンとの違いを比較しました。 特徴 WSL 1 WSL 2 バーチャルマシンに比較して使用する容量が少ない ✅ ✅ 最新版のVMwareとVirtualBoxで起動できる ✅ ✅ VM(バーチャルマシン)の管理 ❌ ✅ Linux Kernel（カーネル）をそのまま使用 ❌ ✅ すべてのシステムがそのまま使える（OSのアップデート、Dockerなど） ❌ ✅ このようにWSL2で機能的にかなり向上できたことが理解できますね。 WSL2インストールの下準備 WSL2を使用するためには下記のシステム条件をクリアしていることが前提になります。 WSL2の使用条件： Windows 10 のバージョン2004かそれより新しいもの（ビルド 19041以降） もしくは、 Windows 11 ではWindows10を使っている人は下記の手順でバージョンを確認してください。 WindowsボタンとRを同時に押します。 ここにwinverを入力しOKを押します。 これでWindowsのバージョンが確認できますね。 WSL2の機能をオンにする 次にWindowsの検索ツールから『役割と機能の追加ウィザード』を起動して、バーチャルマシンとWSLの二つにチェックを入れてOKを押します。Hyper-Vは関係ないので触らないでください。 PCを再起動するように言われるので一旦、再起動して戻ってきましょう。 MicrosoftストアからUbuntuをインストール ではWindowsにあるマイクロソフトストアからUbuntuを検索してインストールしましょう。 では、インストールが完了し、Ubuntuアプリを起動すると、コマンドプロントが起動され下記の様にユーザー名を設定することになります。 インストールが完了したら、下記のコマンドでUbuntuのバージョンを確認してみましょう。 これでUbuntuが起動できたことが確認できました。 今更気づいたのですが、UbuntuサーバーがインストールされたのでデスクトップのようなUIがないですね。でも、同じことがすべてコマンドラインからできるので問題ないです。 簡単に中身を見ていきましょう。 … Read more

Fedoraにリモートデスクトップをインストールして遠隔操作しよう

by
リモートデスクトップでFedoraに接続する

私は個人用のPCと作業用のノートパソコンを分けています。個人のPCから作業用のノートパソコンに遠隔で接続して操作したいときがありますよね。その場合に下記の方法があります。 RDP(リモートデスクトップ）の場合はWindowsのホストPCからローカルのIPを使って簡単に遠隔操作が可能になります。またTeamViewerとは違い初期設定でローカルからのアクセスしか許可されていないので安全です。 違うネットワークからアクセスしたい場合には他の方法を考えるかポートフォワーディングをしないといけないですが、これでラップトップを遠隔で操作できるようになります。今日はFedoraで使えるコマンドを使いながら説明していきます。 FedoraにXRDPをインストール XRDPはオープンソースでRDP（リモートデスクトップ）をLinux等にインストールできるソフトウェアです。 今回はLinuxのデスクトップを前提にしているのでサーバーにインストールする場合は先にデスクトップシステムをインストールしてUIを確保してください。 まずはOSのアップデートをしましょう。 次にXRDPをインストールします。 次に、XRDPをスタートさせます。 ファイヤーウォールの設定 XRDPが使用する3389ポートを開けましょう。 SELinuxの設定 システムでSELinuxによりXRDPのバイナリーのセキュリティ強化が必須になっております。下記のコマンドで設定しましょう。 これで使用できるようになりました。 接続情報の確認 では接続先のIPとユーザー名を確認します。 RDPで接続 ではクライアント側になるwindowsのPCからRDP（リモートデスクトップ）を起動して説明してみましょう。 次にパスワードを聞かれるので入力して次に進みます。 そうすると、接続しますかと聞かれるのでYesをクリックします。 これで接続できるようになりました。 ちなみに接続先のPCですでに同じログイン情報でログインされている場合ははじき出されれるので先にログアウトしておきましょう。 トラブルシュート 下記のファイルパスにログが残るので確認してみましょう。 /var/log/xrdp-sesman.log このようなログが見れるので原因を探ってみましょう。 ログインできるユーザーの数を増やす 先ほど述べた お疲れ様です。

FedoraにPostgreSQL 11をインストールする方法

by
FedoraにPostgreSQLをインストールする

今日はFedoraにPostgreSQLのデータベースをインストールする方法を紹介します。FedoraはLinuxのディストロの中でも安定性とソフトウェアが最新にそろっていることで知られています。Debian（Ubuntu)を使わない場合で、さらにキレイなデスクトップを使いたい方は是非Fedoraがお勧めです。またPostgreSQLはオープンソースで実際のプロダクションでも使用できるリレーショナルデータベースです。ぜひ活用してください。 Fedoraのバージョンの確認 では早速、Fedoraのバージョンを確認しましょう。 システムのアップデート Postgresをインストールする前にシステムが最新のものになっているかを確認しましょう。 最後に再起動を忘れずに。 PostgreSQL Yum Repositoryを追加 PostgresのリポジトリをFedoraのシステムに追加します。 このコマンドを実行するとインストールをするか再度きかれるのでyを入力してエンターを押します。 PostgreSQL Server and Client packagesを追加 次にPostgreSQLのサーバーとクライアントパッケージを追加します。 これも本当にインストールしてよいか聞かれるのですべてにyで答えて進めます。 データベースのイニシャライズと自動スタート では、データベースをイニシャライズし、OSの起動と同時にデータベースのサーバーも起動するように設定します。 ここまでできたら、postgreSQLが間違いなく起動しているか確かめてみましょう。 問題ないですね。 PostgreSQLのコンフィグファイル PostgreSQLのコンフィグファイルは下記のファイルパスにあります。 /var/lib/pgsql/11/data/postgresql.conf ファイヤーウォールの設定 もしローカルホストではなくネットワークからPostgreSQLにアクセスをさせる場合はファイアウォールで許可させます。 PostgreSQLへのリモートアクセスを許可 /var/lib/pgsql/11/data/postgresql.confのコンフィグファイルを編集してすべてのIPからのアクセスを許可できます。 PostgreSQLにリモートアクセスを許可させます。 PostgreSQLのサービスをリスタートさせてコンフィグファイルを再読み込みさせます。 PostgreSQLアドミンユーザーのパスワード PostgreSQLにアドミン権限を与えます。 ではユーザーとデータベースを作成します。 もしcreatedb: could not connect to database template1: FATAL: Peer authentication failed for user “ユーザー名”のエラーが出た場合はpg_hba.confのコンフィグファイルでパスワードでデータベースを作成できるようにします。 では作成したデータベースを見てみましょう。 ここでデータベースの所有者やDB名が確認できます。 では今日はここまでです。 お疲れ様でした。

JSひろばアプリ開発1日目：プロジェクトのセットアップ

by
JSひろばアプリ作成まで～1日目

私がプログラミングを独学で始めたのた2020年の3月、ニューヨークでコロナがちょうど発生した時でした。 それから片手間にPythonを１年くらい学び、その後にJavaScriptを後に学び始めました。 それからチケット管理アプリをデモで作りましたが、もっと実践で使えそうなアプリを作りたいと思い、今回のJSひろばアプリを作ることに決めました。 今回はプログラミングを始めたい人の為にすべての作業をゼロから行い、コードもすべてオープンソースで公開いたします。 作業の内容 作業日 2022年12月8日 作業にかけた時間 ３時間 合計作業時間 ３時間 作業内容 アイディアを絞るUIをFigmaでデザインする使用するテクノロジーを決める課題点をクリアする JSひろば JSひろばという名前でアプリを進めていきます。これは、ユーザーがJSエンジンのコンソールにウェブページからインプットできて、ファンクションやWindowオブジェクトの仕組みを実際に試しながら学ぶアプリです。 下記がアプリのイメージになります。 これは無料デザインツールのFigmaを使って作りました。詳しいFigmaの使い方はこの記事で紹介しています。 当初はユーザー登録をしてユーザーが好きなコードの投稿や、お気に入りのコードを登録する機能までつけてみようかと思いましたが、機能の実装までにかなり時間がかかりそうなのでとりあえずはなしで進めます。 今回のスタック JSひろばアプリは今まで使ってきたPtyhonのウェブフレームワークのDjangoとそれをREST APIにしてくれるライブラリを使います。 フロントエンドはReactを使おうかなと思ったけどVueの方が慣れているのでそちらを使います。 Djangoだとついてくるアドミンパネルからデータのエントリーができるのでこれもプラスですね。 では、今回のスタックDjango＋PostgreSQL＋Vueのイメージ図です。 eval()の脅威 今回、ユーザーがウェブページからeval()のメソッドを使ってコンソールと同じようにリスポンスを返すようにしたいのが一番の目的でした。しかしeval()はセキュリティ上使わない方がよいようですね。 有名なハッキング手法のうちの一つにEVAL インジェクション(eval injection)があることを知りました。 これは、JavaScriptのデーターフォーマットをであるJSON (JavaScript Object Notation)に不正なコードを挿入し想定外の動作を誘導する攻撃手法です。特にPHPをサーバーで使っている場合は危険のようですね。 今回は下記の点からeval()を使っても良いと判断しました。 Vueのプロジェクト作成 Vueのスタックはこんな感じです。 Vue + PrimeVue（UIライブラリ）＋ Vite + Pinia 今回はさくさくに動くViteのビルドツールを使います。 とりあずJavaScriptでコンソールをウェブページに実装できるところまで進めます。 UIで使うCSSライブラリはPrimeVueにします。詳しいライブラリの説明はこちらで見てください。 TailwindCSSでもよかったのですが、PrimeVueに使えそうなターミナルのコンポーネントを発見しました！ まさにこれをアプリのメインのターミナルとして使いたいですね。 ではPrimeVueもインストールしましょう。詳しいPrimeVueの設定の仕方はこちらを参照してください。 とりあえずここまでできました。 ではPrimeVueのコンポーネントを使ってキレイにしましょう。 細かいインプットの制限やコードの整理はまた次回に行います。 GitHubでコードを公開しているので見てください。 GitとGitHubの使い方もYouTubeで説明しているのでよかったらどうぞ。 完成したアプリはこちらからどうぞ。

今すぐ使えるCSSデザインツール19選！

by
おすすめCSSデザインツール

デザインにこだわりたいけどあまり時間をかけたくない方、この記事で紹介する19のCSSデザインツールを使って、一味違うサイトを作りましょう。今回は、アメリカに住む私が個人的におすすめのCSSデザインツールを集めました。全部英語のサイトになりますがコピペだけで使えるものがほとんどです。 CSSプロパティの作成 Neumorphism Neumorphismはシャドウの設定を簡単に調整できるサイトです。ボタンの出っ張り方や高さを微調整したいときにとても便利ですね。 Shaddows Brumm Shaddows Brummはシャドウの方向やシャドウのレイヤーを細かく設定できるCSSデザインツールです。とてもきれいなシャドウが作れますね。 Fancy Border Radius Fancy Border Radiusでは、ユニークなborder-radiouを作成することができます。水のしずくの形や不思議な形が作れてしまいます。 Glow Generator Glow Generatorでは、Glowエフェクト（光のエフェクト）を簡単に作ることができます。ネオンライトや夕日などのイメージに使えそうです。 Clothoid Corners Clothoid Cornersでは通常のborderradiusとは違うらせんのような柔らかいカーブを作ることができます。 Glassmorphism Glassmorphismでは、ガラスをイメージしたスタイルを作成することができます。透明感や色を調整できます。 Clipy Clipyでは、clip-pathを使って写真をマスキングできるスタイルを作成することができます。タイトルとかに使えそうです。 CSS Filters CSS Filtersでは写真にキレイなフィルターを付けることができます。モノクロのポートフォリオを作りたいときとかもよさそうです。 アニメーション Animista Animistaでは数多くのプリセットから好きなアニメーションを選んでコピペで使うことができます。べーシックなものからポップアップの表示に使えそうなものまでいろいろありますね。 Wait Animate Wait Animateはアニメーションのあとに待たせて再度ループさせるように設定できるツールです。 バックグラウンド Hero Patterns Hero Patternsでは、CSSで作成されたパターンをコピペで使えるようにしたサイトです。パターンの種類も多く、パズル、木目、壁紙のようなものまであります。 Haikei Haikeiではモダンなカーブのある背景を簡単に作成できます。ファイルはSVGで出力できます。 CSS Pattern CSS Patternでは、CSSだけでつくられたパターンをコピペで使うことができます。 Animated BG Animated BGでは、アニメーションのあるバックグランドをCSSで作ることができます。蛍のような光をかもし出したり、ブロックがくるくる移動したりととても落ち着くアニメーションです。 カラー CSS Gradient … Read more

Figmaを始めよう

by
figmaの使い方

Figmaはアプリケーション開発で使える無料のデザインツールです。 もともとは個人の方がAdboeのデザインツールが高いので無料で使えるアプリケーションを開発しよう！ということで始められたプロジェクトです。その後、爆発的にヒットし、多くの企業でも使われるようになりました。 皮肉にも2022年の9月にAdobeがFigmaを20超ドルで買収しました。 しかしこのツールは今後も無料で使えるようで大企業によるメンテナンスも行われると思うので是非使っていきたいです。 Figmaを使いたい理由 実際にUX、UIのデザインをコードを書いていく前の全体像を明記しておく。特にサイトやアプリケーションのテーマを確認、色のバランス、CSSの確認で役に立ちます。 また、コラボやデザインのシェアも簡単なのでチームで作業に取り組むことが容易です。 Figmaのアカウントを作成 では、公式サイトからFigmaのアカウントを作成していきます。 Googleのアカウントでも自身のEmailでもよいので登録します。 Figmaでデザインを作ろう ではログインした後に、いくつかのオプションがありますね。 UIのデザイン設計は最初の「デザインファイルを新規作成」のボタンからファイルを作成します。 中身はAdobeのイラストレーターを使ったことがある方ならかなり操作が似ていると理解できます。 ではツールバーからフレームを選択してカンバスを作成します。これがアートボードのようなイメージです。いわばユーザーのスクリーンと同じに設定する、もしくはサイトと同じように設定することになります。 Webサイトの場合は横幅は同じでも高さはスクロールで下に目が移動するようになるので高さは２～５倍くらいになるかもしれません。 フレームのオプションは右側のツールバーから変更しましょう。WがWidth（横幅）でHがHeight（高さ）です。 一般的なウェブサイトは1920 x 1080ピクセルで見えるようにしているのでそれを基準にしましょう。 では左の方にある鍵のアイコンでアートボードが変更されないようにロックします。 もしあとから背景色を変えたい場合や高さを変えたい場合は一度アンロックして変更し、またロックするようにしましょう。 コンポーネントを作成 ではボタンやテキストなどのサイトのパーツ（コンポーネント）を作成しましょう。 上の四角のアイコンから長方形を選択します。 では、右のオプションからborder-radiusを変更します。これらはCSSの知識があるとさらに使いやすいですね。これで角が丸くなりました。 では次にTのアイコンをクリックしてテキストを入力していきます。 また右側のオプションからフォントの種類やサイズ等を変更してみましょう。 さらに左側にはレイヤーが一覧で表示されているのでどのアイテムが上側に来るか順番を並び替えることができます。 では色々いじって、こんなものが10分くらいでできてしまいました。 では、左の共有ボタンからチームに閲覧できるようにしてみます。 URLでアクセスするとこのようになります。 さらにiFrameでこのように埋め込むこともできます。 では、皆さんも色々試してみてください。 お疲れ様でした。

Pop!_OSをWindowsから起動する方法

by
WindowsからPopOSを起動する

今日は、windowsのPCからPop!_OSを起動する方法を説明します。 なぜこの方法が良いかを説明します。 WindowsでPop!_OSを使いたい理由 VirtualBoxをインストールする ではwindowsにPop!_OSをインストールする前に、この仮想環境を実行させるVirtualBoxをWindowsにインストールさせます。 これがホスティングマシンとなり、他のOSも色々インストールすることができます。 詳しい説明は下記の動画を見てください。 ではVirtualBoxがインストールできたら動画の通り、次に進みましょう。 Pop!_OSのインストールISOファイルを手に入れる では、公式サイトからインストールに必要なISOファイルをダウンロードします。 ISOファイルは使っているPCのグラフィックボードによって変わるので確認してからダウンロードしましょう。 VirtualBoxからインストールを開始する。 ではVirtualBoxを起動して、Newのボタンから新しいマシンを作成し、先ほどダウンロードしたPop_OSのISOを起動させるようにします。 次にインストールする場所を指定して、仮想マシンに割り当てるメモリを指定します。 最低でも４GB、理想的には８GBあるとサクサク動くと思います。 次にVirtualBoxのハードディスクを作成します。 ここで、ファイルタイプをVMDKにすることをお勧めします。特に自分のマシンだけでテストをするのであればどれを選んでも問題ありません。しかし、他のユーザーをファイルを共有する可能性があるのであれば、VMDKにしておくと後からファイルのエキスポートとインポートが楽になります。 ストレージのタイプはダイナミックにしておくと、仮想マシンで使った分だけホスト側のPCに負担がかかるので便利です。 では、内容を確認してCreate（作成）をクリックします。 メインの画面に仮想マシンができたことが確認できますね。 では、仮想マシンを起動してOSのインストールを始めていきます。 スタートアップのディスクの指定 初めてマシンを起動するとスタートアップに使うディスクを選ぶ画面が表示されます。 ここでAddを押して、Pop_OSのISOファイルを選択します。 では、Pop_OSが選択されていることを確認してChoose（選択）を押します。 ではマシンを起動しましょう。 マシンが頑張ってファイルを読み込んでいます。 画面の解像度を上げる では、インストールを進める前にPop_OSの解像度を上げます。 このままだとOKボタンが見えず次にすすめませんね。 歯車のアイコン→Displays→Resolutionから自分のPCの画面に合うような解像度を選択しましょう。ではApplyを押します。 インストールと初期設定の開始 では画面がまともになったところで言語の選択を進めます。 個人的には全部英語で進めることをお勧めしますが、日本語の設定もあるのでこれで進めてもOKです。理由は、今後、他のアプリケーション、ソフトウェアで操作をする際に日本語の設定がない可能性があり、英語で何でも操作していく良い練習になるからです」。 次にキーボードのレイアウトを設定します。 お使いのキーボードを選択しましょう。 次に、インストールを進めていきます。 下記の画像の箇所ではClean Installを選択します。 ※仮想マシンで割り当てたハードウェアにOSをインストールするのでErase Everthing（すべてを削除して）を記載してありますが、割り当てた部分のハードウェアのみがすべてフォーマットされるという意味です。 では、Erase and Installを選択します。 ユーザー名を指定します。 これがマシンで使うユーザー名になります。 次にパスワードを作成します。これは必ず使うので覚えられるものにしましょう。 パスワードの設定が終わるとハードディスクの暗号化をするか聞かれます。このデータは仮想マシンにあので普通の状況ではEncrypt（暗号化）する必要はありません。 ですのでDon’t Encryptを選択でOKです。 これでインストールが始まりましたね！ お茶でも飲んでインストールが完了するのを待ちます。 インストールが終わったらデバイスの再起動を行い、仮想マシン（Pop_OS)を使用できるようになります。 細かい設定 ここからは細かい設定の説明を行います。おまけですね。 … Read more