ピュアなJavaScriptで指定のオブジェクトまでスクロールする方法【JavaScript】

■はじめに

ページ内リンク(スヌース)などで、たまに利用したのでその方法を記載します。

Reactを使用する場合など、jQueryなどが使用できない場合があると思いますので、ここではシンプルなJavaScriptで記載しています。

■手順

ソースコードの全量は以下

var targetElement = document.getElementById("ID名");
window.scroll({
top: targetElement.getBoundingClientRect().top + window.pageYOffset,
behavior: "smooth"
});

1行目で、移動したいオブジェクトをID指定で取得する。

「window.scroll」で取得したオブジェクトまでの距離を計測して移動する。

Xcodeの便利なショートカット一覧【Xcode】

Xcodeの便利なショートカット一覧

ショートカット 概要
command + shift + o クラス,メソッド,変数名検索
command + shift + f 全文検索
command + shift + j 現在開いているファイルをプロジェクトナビゲーターでフォーカス
command + t タブの追加
command + shift + ] or [ タブの移動
command + / コメントアウト
command + option + / docコメント生成
command + r 実行
command + b ビルド
command + shift + k クリーン
command + shift + option + k ビルドディレクトリのクリーン(Clean Build Folder)
ctrl + . 入力補完
command + ctrl + j 定義にジャンプ
command + ctrl + e 選択している変数名などの一括置換

開発(プログラム)に便利なWEBツール一覧

開発(プログラム)に便利なWEBツール一覧

概要 URL
JWT(JSON Web Token)のデコード https://jwt.io/
HTMLの整形 https://lab.syncer.jp/Tool/HTML-PrettyPrint/
JavaScriptの整形 https://lab.syncer.jp/Tool/JavaScript-PrettyPrint/
CSSの整形 https://lab.syncer.jp/Tool/CSS-PrettyPrint/
PHPの整形 https://flatsystems.net/php_beautifier.php
JSONの整形 https://tools.m-bsys.com/development_tooles/json-beautifier.php
暗号化 https://www.mcrypt.click/ja
パスワード生成 https://www.luft.co.jp/cgi/randam.php
gitignoreの生成 https://www.gitignore.io/
RGBと16進数の相互互換 https://www.peko-step.com/tool/tfcolor.html
文字数カウント http://www1.odn.ne.jp/megukuma/count.htm

リリースされているアプリのバージョンが取得できない場合【Apple】

■問題

強制アップデートなどで、「https://itunes.apple.com/lookup?id=[AppID]」のAPIを使用してバージョンを取得することがあります。

しかし、実際にAPIを実行しても以下のレスポンスが返ってきました。

{
"resultCount":0,
"results": []
}

■原因

アプリのリリース国に「アメリカ」が含まれていない場合に、上記のレスポンスが返ってくるようです。

対応としては、APIのURLに国の情報を入れることで正しく返ってきます。

【URL】
https://itunes.apple.com/[国コード]/lookup?id=[AppID]
【例(日本の場合)】
https://itunes.apple.com/jp/lookup?id=[AppID]

CocoaPodsのインストール【iOS】

■CocoaPodsとは

iOSアプリ開発で利用するライブラリの管理(インストールなど)を行うツールです。

■インストール手順

ターミナルで以下を実行

sudo gem install cocoapods

インストール完了後に、ターミナルで以下を実行

pod setup

■エラーが出た場合

以下のエラーが出た場合には

ERROR:  While executing gem ... (Gem::FilePermissionError)
You don’t have write permissions for the /usr/bin directory.

以下のコマンドでCocoaPodsをインストールする。

sudo gem install cocoapods -n /usr/local/bin

どうも、OSのアップデートで権限が強くなったみたい。。。

SignalRでの連携(引数・戻り値)

■はじめに

本記事は、SignalRを利用して、UWPのアプリからWPFのアプリのメソッドを実行する為の方法をまとめた記事の、引数と戻り値の方法です。

以下の2つの準備ができている前提となります。

UWPアプリ

WPFアプリ

■引数

サーバー側のソースの「SampleHub」クラスに以下のメソッドを追加する。

public void CallSampleTwo(string sample)
{
System.Diagnostics.Debug.WriteLine("=====SampleHubの呼び出す=====");
System.Diagnostics.Debug.WriteLine(sample);
}

クライアント側のソースの「MainPage」クラスの「proxy.Invoke」の処理を以下に書き換える。

変更前

proxy.Invoke("CallSample").Wait();

変更後

proxy.Invoke("CallSampleTwo", "引数のデータだよ").Wait();

その後、サーバー実行を行ったあとクライアントの実行を行い、サーバー側のコンソールに以下が出力されていることを確認する。

■戻り値

サーバー側のソースの「SampleHub」クラスに以下のメソッドを追加する。

public void CallSampleThree()
{
System.Diagnostics.Debug.WriteLine("=====あああああああああああ123=====");
Clients.All.HelloWorld("あいうえお", "かきくけこ");
}

クライアント側のソースの「MainPage」クラスの「proxy.Invoke」の処理を以下に書き換える。

変更前

proxy.Invoke("CallSample").Wait();

変更後

proxy.Invoke("CallSampleThree").Wait();

クライアント側のソースの「MainPage」クラスの「var proxy = connection.CreateHubProxy(“Sample”);」以降、「connection.Start().Wait();」以前に以下を追加する。

proxy.On<string, string>("HelloWorld", (user, message) =>
{
System.Diagnostics.Debug.WriteLine("=====あああああああああああ=====");
System.Diagnostics.Debug.WriteLine(user);
System.Diagnostics.Debug.WriteLine(message);
});

その後、サーバー実行を行ったあとクライアントの実行を行い、クライアント側のコンソールに以下が出力されていることを確認する。

SignalRでの連携(流れ)

■はじめに

本記事は、SignalRを利用して、UWPのアプリからWPFのアプリのメソッドを実行する為の方法をまとめた記事の、全体の流れをまとめた記事です。

■流れ

以下の記事を参考に、UWPアプリを作成する。

UWPアプリ

以下の記事を参考に、WPFアプリを作成する。

WPFアプリ

以下の記事を参考に、アプリケーションを実行し、動作確認を行う。

実行方法

以下の記事を参考に、引数と戻り値の実装を行う。

引数・戻り値

SignalRでの連携(実行方法)

■はじめに

本記事は、SignalRを利用して、UWPのアプリからWPFのアプリのメソッドを実行する為の方法をまとめた記事の、実行方法です。

以下の2つの準備ができている前提となります。

UWPアプリ

WPFアプリ

■手順

サーバー側のアプリを起動する。

起動できると、真っ白なウィンドウが表示されるので、停止せずにそのまま起動させておく。

クライアント側のアプリを起動する。

起動できると、真っ白なウィンドウが表示される。

サーバー側のプロジェクトのコンソールに「=====SampleHubの呼び出す=====」が表示されていれば、正常にUWPからWPFへSignalRを介してアクセスが出来ました。

※「SampleHub」クラスの「CallSample」メソッドが呼び出されました。

サーバー用意後のApache起動

■はじめに

本手順は、さくらVPSでサーバーを契約し、スタートアップスクリプトで「LAMP」を選択し、インストールした後の手順を記載します。

■手順

ターミナルでさくらVPSSSH接続する。

ssh root@[IPアドレス]

接続後、以下のコマンドをコピペして、実行する。

# ファイアーウォール の自動起動
systemctl enable firewalld
# ファイアーウォール の起動
systemctl start firewalld
# Apacheの起動
systemctl start httpd
# ファイアーウォール のHTTPの開通
firewall-cmd --add-service=http --zone=public --permanent
# ファイアーウォール のHTTPSの開通
firewall-cmd --add-service=https --zone=public --permanent
# ファイアーウォール の80番ポートの開通
firewall-cmd --add-port=80/tcp --permanent
# ファイアーウォール の再起動
systemctl restart firewalld
# Apacheの自動起動
systemctl enable httpd

その後、ブラウザで、以下のアドレスにアクセスして、ApacheのサイトにつながればOKです!

http://[IPアドレス]

CentOS7のファイアーウォール操作まとめ【コマンド集】

■コマンド集

ファイアーウォール の起動

systemctl start firewalld

ファイアーウォール の自動起動

systemctl enable firewalld

ファイアーウォール の再起動

systemctl restart firewalld

ファイアーウォール の停止

systemctl stop firewalld

ファイアーウォール の穴あけ

# ポート番号指定(「1234」の例)
firewall-cmd --add-port=1234/tcp --permanent
# HTTP
firewall-cmd --add-service=http --zone=public --permanent
# HTTPS
firewall-cmd --add-service=https --zone=public --permanent

ファイアーウォール 穴あけ後の再読み込み

firewall-cmd --reload

ファイアーウォール の開通確認

firewall-cmd --list-all