tk's BLOG

主にアプリ作成やプログラミングで得た様々な学びを備忘録として書いていきます。たまに思うままに日常の投稿もします。

はてなブログ>独自ドメインの設定方法

内容

はてなブログにおいて、お名前.comで購入した独自ドメインを自身のブログのドメインとして設定する方法を紹介します。

 

↓お名前.comでのドメインの購入についてはこちらの過去記事から。 

progtk0137.com 

はてなブログ側の設定 (①〜③)

①「はてなブログPro」への加入

これをしないと始まりません、、。

「アカウント設定」から「プラン」を確認してください。

f:id:tk0137:20200929142438j:plain

料金は以下のようになっています。

・1ヶ月コース:¥1,008

・1年コース:¥12,096 ¥8,434 30% (¥3,662) お得 703円 /月 相当

・2年コース:¥24,192 ¥14,400 40% (¥9,792) お得 600円 /月 相当

 

私はお試しで1ヶ月コースにしましたが、1年コース、長期的に見るなら2年コースの方がお勧めです。

 

独自ドメイン入力

「設定」から「詳細設定」を選択し、「独自ドメイン」の欄に独自ドメインを入力します。

入力したら画面下の「変更する」をクリックします。

その後「ドメイン設定をチェック」をクリックしてドメインの設定状況を確認すると「無効」と表示されますが、今はこれで大丈夫です。

この後のお名前.com側の設定で解決します。

f:id:tk0137:20200929143506j:plain

 

③レコードの確認

お名前.com側で入力するレコードを確認します。

先ほどの「ドメイン設定をチェック」ボタンの下に「独自ドメインの設定方法は?」というリンクが貼ってあるのでそこから「はてなブログヘルプ」のページへ飛びます。

ドメイン事業者側での設定例」の欄にレコードの数値が記載してあります。

これをお名前.com側の設定の時に入力するのでメモしておきましょう。

f:id:tk0137:20200929144814j:plain

 

お名前.com側の設定(①〜④)

まず、自分のアカウントでログインします。

 

ログインした後に表示される画面上部の「メニュー一覧」から「ネームサーバーの変更」の項目から「DNS関連機能の設定」を選択します。

f:id:tk0137:20200929133120j:plain


次にはてなブログで使用したいドメイン名を選び、左のチェック欄にチェックを入れます。

この状態で「次へ」選択し、次の画面へ進みます。

f:id:tk0137:20200929134910j:plain

 

画面を下の方にスクロールすると「DNSレコード設定を利用する」という項目の右にある「設定する」というボタンを押す。

f:id:tk0137:20200929135207j:plain

 

レコードを入力する箇所に「VALUE」という項目があるのでここに先ほどメモしておいた、はてなブログの指定のレコードの値を入力する。

他の項目に関しては変更しなくてOK。

f:id:tk0137:20200929135857j:plain

 

レコードの追加後に、画面下の「登録済み」の欄に追加したレコードが表示されれば全ての設定完了。

f:id:tk0137:20200929140431j:plain

 

以上で全ての設定が終了!

 

はてなブログの「ドメイン設定状況」が「有効」になったことを確認してください。

なお、設定直後は設定が反映されないことがありますので、その場合はしばらく時間を置いてから再び「ドメイン設定状況」を確認してみてください。

私の場合は半日ほどで反映されましたが、もっと遅くあるいは早くなる場合があるようです。
 

 最後に

私が実際にドメイン設定をするときに手こずったので、「せっかく独自ドメインを取得したのにどうやって設定せれば良いのか分からない! 」という方がもしいらっしゃったら少しでもご参考にしていただければ幸いです。

この後も独自ドメイン設定後の心境の変化、アクセス数の変化などについても追々書来たいと思うので暖かい目で見守っていただけたら嬉しいです。

最後までありがとうございました!

<Xcode>iPhoneで簡単なUIkitアプリ実装

実装結果

「Lucky Lunch」というボタンを押すとランダムにメニューを表示することができます。

 

この表示されるメニューに関しては自分の好きなものを表示させることもできます。

 

また、ボタンの表示を「Lucky Item」「Lucky Number」などと変更してやれば占いのアプリの作成などにつなげることもできます。

f:id:tk0137:20200926234658p:plain f:id:tk0137:20200926234724p:plain

↓アプリ作成への道はここから! 

progtk0137.com

 

参考書籍 : やさしくはじめるiPhoneアプリ作りの教科書 【Swift 3&Xcode 8.2対応】 (教科書シリーズ)

 

UIkitとは

簡単にいうとアプリに登場するボタンやスイッチなどのことです。UIとはUser Interface(ユーザーインターフェース)のことなのでUIに用いるキット(道具)であるとお分かりいただけると思います。

 

スマートフォンのアプリに限らず、ATMや座席予約サイトなどのタッチパネルも、ユーザーと端末との間のやりとりを中継するものとしてUIと呼ぶことができます。

 

手順(その1〜4)

その1

食事のメニューを表示させるための「Label」の位置を設定します。

 

見やすくなるように文字色や背景色を変えると良いでしょう。

 

左側の「Label」の範囲をクリックすると右側に「Label」の設定項目が出てきます。

下の写真では水色の下線で示していますが、「Color」で文字色、「Alignment」で中央寄せ、「Background」で背景色を設定しています。

 

どの色でも動作に支障は出ないので、好きな色に設定してください。

f:id:tk0137:20200927001112j:plain

その2

次にボタンの設定です。

 

以前の記事で「Label」の設置の仕方について書かせていただきましたが、「Button」についても同じように右上の「+」をクリックして、「Button」を設置したい場所にドラッグします。

f:id:tk0137:20200928113624j:plain

その3

次に「Label」と「Button」の表示される位置の制約をつけていきます。

 

制約とは上下左右の画面の端までの距離、UIkit間の距離を予め設定することです。

 

これによって、端末ごとの画面の大きさの違い、画面を横向きに回転させるといった表示環境に左右されることなく、画面の端やボタンなどのUIkit間の間隔を常に一定に保てるようにできます

なので端末ごとにボタンやラベルの配置がずれるといったトラブルを防ぐことができます。

 

制約をつけたいラベルをクリックした状態で画面下の小さいアイコンをクリックします。

アイコンの位置は下の画像をご参考にしてください。

 

まず「Label」に制約をつけていきます。

「Label」については上、と左右方向に制約をつけます。

今回の実行結果の画像では下の画像のように、上に16、左右に20を設定してあります。

また制約をつけたい方向に赤の点線が赤の実線になるように一回クリックします。

 また、「height」欄にチェックを入れ、「Label」の高さが常に60になるように設定します。

 

以上の制約を設定し、「Add 4 Constraints」となった状態でクリックします。

これで「Label」の設定は終了です。

f:id:tk0137:20200927001717j:plain

 

次に「Button」についても制約をつけていきます。

 

手順は「Label」について行った方法と同様です。

 

「Button」については上方向と高さと幅の3種類について制約をつけていきます。

今回は下の画像のように、上方向に70の間隔をとり、高さを30、幅を110で一定に保つという設定にします。

「Add 3 Constraints」と表示されている状態でクリックします。

 

これで「Button」についても制約付けが終了しました。

f:id:tk0137:20200927001745j:plain

 

試しに画面を横向きにして、配置が崩れないかどうかを確認してみます。

すると下の画像のように「Label」と「Button」がきれいに画面内に収まっていることが分かります。

 

「Label」については上、左右、高さの4種類について制約をつけました。

上と左右については画面の端との距離が常に一定に保たれています。

幅については制約をつけていないので、画面横方向いっぱいに引き伸ばされた形になっています。

 

「Button」については、上方向と高さ、幅の3種類について制約をつけました。

なので高さと幅を常に一定に保ちながら、上にある「Label」との距離も一定に保っています。

f:id:tk0137:20200927001833j:plain

このように制約をうまく使うことで、画面のレイアウトを崩れる心配がなくなります。

ですが、制約をつけすぎるのもよくありません。

 

例えば左右方向と幅の両方に制約を付けてしまっていると、横方向に関してはどちらの制約を優先すれば良いのかが定まりません

よってアプリを起動する端末やタイミングによってレイアウトが一致しなくなるということが起こりえます。

なので制約をつけるときは制約同士がぶつかり合っていないか慎重に確認する必要もあります。

 

私もまだまだ勉強の途中ですので、一緒に頑張りましょう!

 

とりあえずこの時点で実行させてみます。

表示に関しては問題なく突破できました。

f:id:tk0137:20200927001900p:plain

 

その4

最後に『「Button」をクリックするとメニューがランダムに表示される』という機構を作っていきます。

 

ここから先はプログラムも編集していくので、下の画像のように「ViewController.swift」というファイルも同時に表示させてください。

 

まず、「Label」にメニューを表示させるという動作をコンピュータに指示できるようにしたいので、「Label」の情報をプログラムに組み込みます必要があります。

 

方法は簡単で、左側のスマホの画面の「Label」をドラッグして右側のプログラムに持っていくだけです。

 

このとき、必ず「class ViewController: ~」の行の下にドラッグするようにします。

f:id:tk0137:20200928122811j:plain

 

「Label」をドラッグすると、下の画像のような入力窓が表示されます。

今回は「Name」の箇所をmyLabelと変更して「Connect」をクリックします。

f:id:tk0137:20200928122739j:plain

 

「Button」についても同様です。

 

先ほどドラッグした「Label」の行の下に挿入します。

「Button」については、「Connection」の項目をActionに変更してください。

「Name」をtapButtonに変更して「Connect」をクリックします。

f:id:tk0137:20200928123227j:plain

以上の作業が終了したら、次にコーディングしていきます。

以下の3行をfunc tapButtonの{}の内側に記述します。

 

let Lunch = ["ハンバーグ","カレー","オムライス","ざるそば","八宝菜"]
let random = Int(arc4random()) % Int(Lunch.count)
myLabel.text = Lunch[random]

 

下の画像は記述例。

f:id:tk0137:20200928123655j:plain

この、ハンバーグ、カレーなどのメニューの部分を自分で変えることでアプリで表されるメニューを自分の好きなものに変更することができます。

 

ここまでの作業が終了したら、完成です。実際に実行させてアプリで遊んでみてください!

 

おまけ

プログラミングの独学に限界を感じたら

以下のようなプログラミングスクール、特にTECH CAMPは無料でオンラインカウンセリングを行っておりますので、プログラミングのスキルアップへの足掛かりとして是非予約してみてください!

デキるビジネスマンが学ぶプログラミング

初めての独自ドメインの取得・方法

内容

今回、このサイトに将来性を持たせるため、はてなブログで決められたドメイン名ではなく、独自ドメインの取得に踏み切りました。

 

独自ドメインをまだ購入していない方にもご参考になればと思います。

 

取得方法は簡単ですので、自身のサイトやブログの作成をお考えの方は是非! 

はてなブログ独自ドメインを使用するには「はてなブログPro」に加入する必要があります!

 

今回購入したドメイン

「progtk0137.com」

当サイトのドメイン名として活躍しております。

 

金額:240円+税

※コンビニ支払いの場合は支払い手数料165円が追加。

 

手順

国内シェアNo.1のドメイン登録サービスである「お名前.com」で購入しました。

 

 

↓お名前.comのWebサイトへのリンク

お名前.com『ドメインは誰でも早い者勝ちっ!』

 

 

ドメイン名の検索画面が出てくるので 、好きなドメイン名を入力してみてください。

f:id:tk0137:20200927085503j:plain 

 

ドメイン名を入力すると、空いてるものがある場合にはチェックマークをつけることができ、購入に進むことができます。

 

ドメイン名には使用できる文字にはある程度制限があります。

基本的には3~63文字の範囲で半角英数字+ハイフン(-)と覚えておけば問題ありません。

平仮名、漢字も使用できますが検索エンジン最適化などの観点からアルファベットの登録をお勧めします。

 

また価格は時間によって変動するのでご注意ください。

 

購入したいドメイン名が見つかったら右側にある「お申し込みへ進む」ボタンをクリックします。

f:id:tk0137:20200927090250j:plain

 

合計金額を確認した後、登録アカウントにログインして支払い方法選択画面に移ります。アカウントをお持ちでない方は「初めてご利用の方」をチェックして個人情報登録画面に移ります。

 

登録年数は初めての場合は「1年登録」をお勧めします。

 

オプションとして「Whois情報公開代行メール転送オプション」「ドメインプロテクション」がありますが、それぞれ300円、980円の料金が発生します。

これは後の更新時に考え直す程度の気持ちで構いません。

f:id:tk0137:20200927090330j:plain

 

最後にお支払い方法を選択します。

 

「クレジットカード」「コンビニ」の二通りの支払い方法がありますが、コンビニ支払いの場合は手数料として165円の料金が発生するので、クレジットカード支払いをお勧めします。

f:id:tk0137:20200927090350j:plain

 

 お支払いが完了すると登録したメールアドレス宛にメッセージが届きます。

その中に「重要 [お名前.com] ドメイン 情報認証のお願い」というような件名のメッセージが届くので、メッセージ内に示されたURLから情報認証を行ってください。

 

以上でドメイン購入までの手順は一通り完了です。

 

最後に

自身のブログを開くにはドメイン名だけではなく、サーバーも用意する必要があります。

通常はレンタルサーバを契約して使用することになると思いますが、無料ブログなどを利用している場合はこのサーバの準備が必要ありません。

 

またこのブログを私自身で用意したサーバに完全に移行した時が来ましたら、サーバ選びから引越しの手順などを描こうと思っております。

 

更新履歴

2020/09/29:タイトル修正

      「初めてのドメイン取得」→「初めてのドメイン取得・方法」

<Xcode>アプリでwebサイトの表示

今回の実行結果

アプリ実行時にAppleの公式サイトが表示されるようになる。

f:id:tk0137:20200925214236p:plain

実際に行った手順

xcodeで作成。

左側にインターフェース、右側にプログラムを開いて、同時に編集できるようにする。右側には「ViewController.swift」を開いておく。

 

右上の「+」ボタンから「Web View (deprecated)」を選択。インターフェース画面までドラッグし、画面いっぱいに広げる。

f:id:tk0137:20200925214446j:plain f:id:tk0137:20200925214932p:plain

 

WebViewをプログラムと結びつけるため、「control」キーを押しながらWebViewを右側の「ViewController.swift」のclass〜の行の下にドラッグ。

Nameの欄に任意の名前を入力して「Connect」をクリック。

f:id:tk0137:20200925214446j:plain

 

コネクトが完了した後。

f:id:tk0137:20200925221032j:plain

 

次に以下の2行をclass定義の最後に追加。

 let appleSite = URL(string: "https://www.apple.com/jp/")!
myWebView.loadRequest(URLRequest(url: appleSite))

f:id:tk0137:20200925221110j:plain

実行ボタンを押して、Apple公式Webサイトが表示されることを確認。

<Xcode>iPhoneアプリ作成超入門

内容

以前からiPhoneアプリ開発に興味があったので、そのアプリ開発に必要なツールを揃え、画面に「Hello World」という文字を表示するだけの簡単なアプリを作成し実行して見ました。

 参考書籍やさしくはじめるiPhoneアプリ作りの教科書 【Swift 3&Xcode 8.2対応】 (教科書シリーズ)

 

手順

Xcodeのインストール

App Store」からインストールします。検索欄に「Xcode」と入力すれば一番上に表示されるはずです。

下の画面はインストールした後のもので右上のボタンが「開く」になっていますが、まだインストールしていない場合はここが「入手」となっているのでここをクリックすればインストールができます。

f:id:tk0137:20200924234215j:plain

 

アプリの作成

インストール終了後、アプリを開くと以下のような画面が出ます。初めて作成する場合は下の三つの選択肢の内、「Create a new Xcode project」をクリックします。

f:id:tk0137:20200924234317p:plain

すると下のようなプロジェクトの雛形を選択する画面に移りますので、上の欄から「iOS」を選択し、その中の「App」を選択します。

f:id:tk0137:20200925001453j:plain

 

次にプロジェクトの設定をします。下の画像は例としてご参考ください。

「Project Name」は自分の好きな名前を入力。

「Organization Identfier」組織の識別のために入力しますが今回はこちらも自分の好き

 な名称で問題ありません。

「Interface」は「Storyboard」に変更します。

上の三項目以外は今回は触らなくて問題ありません。

f:id:tk0137:20200925000823j:plain

 

以上の設定が終わると、開発用の画面に移ります。今回はプログラミングを使用せず、インターフェースビルダーを用いた視覚的なアプリ作成をします。

 

左にあるファイルの一覧の中から「Main.storyboard」をクリックします。

f:id:tk0137:20200925001418j:plain

すると、スマホの画面が表示されます。これで視覚的にラベルやボタンなどの配置バランスを見ながら開発できるようになります。

f:id:tk0137:20200925002148j:plain

次に実際にアプリとしてスマホの画面に文字を表示させるには「Label」を設置する必要があります。ラベルを設置するには右上の「+」ボタンをクリックし「Label」をドラッグして画面上に設置したい位置に持っていきます。

 

↓右下の画像での「Label」を選択して、スマホ画面においてラベルを設

 置したい位置までドラッグする。左下の画像はドラッグをした後。

f:id:tk0137:20200925002838j:plainf:id:tk0137:20200925002912p:plain

無事にラベルを設置できたらアプリで表示させたい文字を入力します。

設置したテキストボックスをダブルクリックすると文字を入力できるようになるので、好きな文字も入力します。

f:id:tk0137:20200925003246j:plain


入力が完了したら、後は実行するのみです。実行の方法は画面左上のある三角の矢印をクリックするだけです。

 

実行結果 

すると移動的にSimulatorが開いて下の画像のようにアプリの実行結果を表示してくれます。

スクリーンショットすると枠が白色になり、見辛くなってしまいました。申し訳あありません。(汗)

f:id:tk0137:20200925003615p:plain

 

最後に

以上で簡単な文字を表示するアプリ作成は終了です。

 

とても簡単なことではありましたが、アプリ作成において誰もが通る道だと思うので今回の経験をしっかり土台にして複雑なアプリ開発もできるようにしたいと思います。

 

私の当面の目標としては、ジャンルは定めてはいないものの、現実的に一人から少数人数で開発できるアプリかつ「App Store」にアップロードして大衆の目に触れて問題ないクオリティーのアプリを開発することです。

 

電卓やメモ帳、目覚まし時計などの誰もが使えて比較的機能が単純なものから作成してみようと思います。

今回の内容は簡単ではありましたが、少しでもご参考になれば幸いです。

 

 

更新履歴

2020/09/25:参考書籍を追加

<macOS>Openfaceのインストール

内容

以前UbuntuでOpenfaceをインストールした時の手順を書きました。

programmatictk0137.hatenablog.com

 

今回はmacOSの方で実際にインストールしてみて手順や詰まった箇所を書きました。

 

手順

まず下のサイトに移動してHomebrewをインストール。

https://brew.sh

 

そうしたらいよいよOpenfaceをインストール。

以下のコマンドでGitからOpenfaceをダウンロード。

wget -O -https://github.com/TadasBaltrusaitis/OpenFace/archive/OpenFace_2.2.0.tar.gz | tar zxvf -

ダウンロードできたら新しくできたOpenfaceのディレクトリに移動します。以下、そのOpenfaceディレクトリ下でコマンドを実行します。

tk:~/OpenFace-OpenFace_2.2.0$ brew update
tk:~/OpenFace-OpenFace_2.2.0$ brew install gcc --HEAD

上のコマンドの終了までに一時間くらいかかりました。 少し時間がかかるようです。

tk:~/OpenFace-OpenFace_2.2.0$  brew install tbb
tk:~/OpenFace-OpenFace_2.2.0$  brew install openblas
tk:~/OpenFace-OpenFace_2.2.0$  brew install --build-from-source dlib
tk:~/OpenFace-OpenFace_2.2.0$  brew install wget
tk:~/OpenFace-OpenFace_2.2.0$  brew install opencv

ここまででOpenfaceに必要なモジュールのインストールができました。

tk:~/OpenFace-OpenFace_2.2.0$ mkdir build
tk:~/OpenFace-OpenFace_2.2.0$ cd build

buildディレクトリを作りました。 以下、このディレクトリ下でOpenfaceをビルドしていきます。

tk:~/OpenFace-OpenFace_2.2.0/build$ cmake -D CMAKE_BUILD_TYPE=RELEASE ..
tk:~/OpenFace-OpenFace_2.2.0/build$ make

上のビルドの過程で以下のようなエラーが出るかもしれません。 

 

dyld: Library not loaded: /usr/local/opt/gcc/lib/gcc/10/libgfortran.5.dylib Referenced from: /usr/local/opt/openblas/lib/libopenblas.0.dylib Reason: image not found

 

上のエラーは/usr/local/opt/gcc/lib/gcc/10/libgfortran.5.dylibというファイルが見つからないというエラーです。バージョンの更新などによるエラーでしょうか。

私の場合は、libgfortran.5.dylibが入っているディレクトリを探したところ、「HEAD」というディレクトリ下に入っていることが分かりましたので、「HEAD」をディレクトリごとコピーして「10」という名前にして保存しました。

 

以下のようにFinderで利用して、視覚的にファイルの場所を確認するのも分かりやすくて良いです。

/usr/local/opt/gcc/lib/gcc/の下に「10」と「HEAD」ディレクトリがある状態です。

これでエラーが出なくなりました。

f:id:tk0137:20200725015702p:plain

後はモデルを以下のサイトからダウンロードして来て一通りOpenfaceインストール作業は終了です。


https://github.com/TadasBaltrusaitis/OpenFace/wiki/Model-download datファイル

モデルの設置方法は以下の過去記事に書いてあります。

 

programmatictk0137.hatenablog.com

 

<Python>venvを使ったPythonの環境構築

内容

venvを使って、Pythonの作業の環境をプロジェクトごとに作れるようにしたいと思います。

 

手順

まず以下のようなコマンドを実行して作成する環境名を指定します。

$ python -m venv [環境名]

 

以下は実行例です。「test」という環境名で作成しています。

f:id:tk0137:20200922191523j:plain

 

lsコマンドを実行すると環境を作成したディレクトリ下に作成した名前のデイレクトりが作成されているのが確認できると思います。

f:id:tk0137:20200922193452j:plain

 

次にこの作った環境に切り替えるために次のコマンドを入力します。

「test」の部分は各自作成した環境名に変更して実行してください。

$ source test/bin/activate

 

上のコマンドを実行すると以下のようにユーザ名の左に環境名が表示され、環境に入った事が分かります。

f:id:tk0137:20200922194214j:plain

 

ここで以下のコマンドを実行してインストールされているモジュールを確認してみます。

$ pip freeze 

f:id:tk0137:20200922194712j:plain

これを見ると私が作成したばかりの環境には上の画像のようなモジュールが最初から入っていることが分かります。

 

例えば、opencvをインストールした後にもう一度モジュールを確認してみます。また、インストールには以下のコマンドを実行。

$ pip install opencv-python

f:id:tk0137:20200922195448j:plain

新しくバージョン4.4.0.42のopencvがインストールされていることが分かります。

 

次は逆にopencvをアンインストールした後にモジュールを確認してみます。アンインストールのためのコマンドは以下です。

$ pip uninstall opencv-python

f:id:tk0137:20200922200145j:plain

先ほどインストールしたopencvが表示されなくなりました。

 

続いてバージョンを指定してopencvをインストールしてみます。以下のコマンドを実行。

$ pip install opencv-python==3.4.11.41

f:id:tk0137:20200922200804j:plain

するとバージョン指定なしの時の4.4.0.42ではなく3.4.11.41のopencvがインストールされています。

 

このように環境ごとにバージョンを整理して、作業効率をあげることができます。

また以前の記事(<Python>ModuleNotFoundError解決法2 - 情報のいろは)にも書かせていただきましたが、インストールしたモジュールのインポートでパスが通っていないことによるエラーが発生することがありますが、私はvenv環境下ではそのようなエラーには遭遇したことはありません。

 

最後に、作業が一通り終了して環境を閉じようと思います。以下のコマンドを実行すると開いている環境を閉じることができます。

$ deactivate

f:id:tk0137:20200922202838j:plain

このように、左の環境名の表示が消えて環境を閉じることができたと分かります。


 最後に

pythonで大きなプログラムを作成する場合にモジュールを大量にインポートすることがありますが、そのインポートの時点でエラーが出てしまうということがなく、環境ごとにモジュールのバージョン整理ができるので、作業の効率化が図れるのではないでしょうか。

拙い文章でしたが、最後までありがとうございました。

 

広告