FileZillaでローカルのファイルにアクセスできない
1
FileZillaで「このディレクトリを表示する権限がありません」という表示が出てローカルのファイルにアクセスできないときは、
左上のリンゴのマークから「システム環境設定」から「セキュリティとプライバシー」を選択し、「ファイルとフォルダ」からFileZillaのアクセスできる場所を設定します。
自社内アプリを開発する私がIonicを気に入っている理由
1
Ionicとはなにか
会社の中で使う業務アプリをよくlonic（Angular）で作っています。ここでは、自社内アプリを開発する私がIonicを気に入っている理由を解説します。
一応Ionicについて説明しておくと、
- HTMLやJavascript（TypeScript）系のWeb技術を使ってAndroid, iOSのスマホアプリやWindows,Mac向けのデスクトップアプリを作るフレームワーク
- 「Web Components」というWeb標準の技術が採用されており、もっとも推奨されているのはAngularですが、ReactやVueからも利用可能
結論
先に結論書くとIonicを使う理由は
- UI構築が楽
- ページ遷移時の動作が良い
- バンドルサイズが小さい
- Capacitorと連携してNativeの機能にアクセスできる
からです。
UI構築が楽
自社内アプリなので、デザインは凝らなくていいんですよね。ださくなければいいです。以前Cordovaでスマホアプリを開発していましたのですが、さすがにHTMLとJavaScriptで記述したWebページがそのままAndroid, iOSで動作するとダサいです。
そ決してCordovaが悪いわけではないのですが、HTMLとJavaScriptで記述したWebページがそのままアプリになる以上、どうしてもダサいです。例えばボタン一つとってもbootstrapを使えばWebでは綺麗に見えるのにアプリで見るとなんか違う感が拭えなかったです。Monacaのonsen.uiというものでNativeの見た目を再現できるということでしたが、個人的な感想としてMonacaは嫌いでした。
- ビルドがあまりにも遅すぎてPDCAが回せない
- 有料でも作成できるプロジェクト数が不便を感じるほど限られている
- Monacaという名称やonsen.uiという名前がときめかない
- Monacaで一度作ると、Monaca上でしかメンテナンスできなくなる
というデメリットを感じ使用を中止しました。特に最後の「Monacaで一度作ると、Monaca上でしかメンテナンスできなくなる」というのは強烈で、有料プランでエンパワーメントしてもらえると思っていたのに、実際は囲い込まれているということで非常に残念に思いました。
その点、IonicはiOS/Android別の美しいUIを提供してくれます。IonicがAngularやReactから使えることからわかるように、Ionicの本質はUIコンポーネントのライブラリです。あるコンポーネント（例えばボタン）を設置したとしましょう。そうすると、iOSで表示した場合はAppleのHuman Interface Guidelinesに基づいたデザイン、Androidで表示した場合はマテリアルデザインと自動的に表示が切り替わります。これは実際に書いていて最高にウキウキするIonicの素晴らしいところです。
また、こちらの記事（Cordovaをdisる人類全員に読んでほしい「Cordovaつらいを考える」）に記載されているように、60fpsでの表示で滑らかに動くことや、無限スクロールが可能なことも拡張性を保証する大事なポイントだと考えています。
ページ遷移時の動作が良い
最近、スマホ画面の下にTabがあるアプリケーションが多くあります。Cordovaでも当然実装できるのですが、音楽を入れた時にページが切り替わるたび音楽が初めから再生されるという非常に残念な思いをしたことがあります。
その点、IonicはTabを切り替えてもバックグラウンド音楽が途切れない。。Nativeで開発しているわけではないのに、Nativeで違うことで悩まされないというのは地味ですが大きいと考えています。
この辺を非線形ナビゲーション」と「ナビゲーションスタック」というらしいですが、Ionicのドキュメントからコアコンセプトのページがなくなっていたので詳細をしらべることができませんでした。
バンドルサイズが小さい
特にAndroidでは顕著ですが、アプリケーションのバンドルサイズは非常に重要視されています。Androidアプリを開発されている方はご存知かもしれませんが、近年、Androidアプリの拡張子は.apkではないのです。デベロッパーはaboというプレビルドしたような形でアップロードしておいて、ユーザーがインストールする際、そのデバイスに最適化したapkをGoogleが生成してダウンロードします。日本のように通信環境が整っていない国も多いなかで、バンドルサイズを小さくすることがいかに重要視されているかわかると思います。
その点、lonicは、「Stencil」というWeb Components開発ライブラリによって作られており、バンドルサイズはとても小さくなります。
また、LazyLoadingという最初に全てを読み込むわけではなく、必要なものはあとで読み込む機能を実装しているので、軽量に高速で動作します。LazyLoadingはAngularにも実装されているので迷うかもしれませんが、こちらに英語ですがIonic X AngularにおけるLazy Loadingの実装方法について記事がまとまっています。このように公式が充実しているのもIonicのいいところです。https://ionicframework.com/blog/how-to-lazy-load-in-ionic-angular/
なお、Angularについて解説した記事はこちらですので、Angularについて知りたい方はどうぞ。
Nativeの機能にアクセスできる
Ionicは（Cordovaもそうですが）Webページをアプリにできるだけではなく、そこにNativeのカメラ、位置情報などのAPIにアクセスできることは大きな魅力です。Ionicにはさまざまなプラグインがありますので、これを利用することでWeb技術を使いながら、それを超えたアプリケーションを作成することが可能です。
総括、その他
Ionicについて簡単に解説しました。拡張性が担保されたフレームワークでプロジェクトをひとつ作り、それをそれぞれの最高のUIでクロスプラットフォームに出力できる点が一番気に入っています。
AngularでIonicを用いてtab barのデザインをカスタマイズする
1
Angualrとクロスプラットフォームアプリ開発用のフレームワークであるIonicを組み合わせて、Tab barをカスタマイズする方法を解説します。
ポイント
- Tab barを備えたプロジェクトはIonicが提供しているテンプレートを使用
- 比較的コードは単純で実装は容易
Github
Githubにコードあげています。
https://github.com/NP-Systems/Ionic_tips/tree/id-1113-customize-tab-bar
実装手順
Ionicが提供しているTab barを備えたテンプレートをダウンロードします。
% ionic start
Pick a framework! ?
Please select the JavaScript framework to use for your new app. To bypass this
prompt next time, supply a value for the --type option.
? Framework: Angular
Every great app needs a name! ?
Please enter the full name of your app. You can change this at any time. To
bypass this prompt next time, supply name, the first argument to ionic start.
? Project name: myApp
そうするとつらつら自動でダウンロードしてくれるので、完了後作成したフォルダへ移動します。
% cd myAppフォルダ構成
tabsコンポーネント
tabs.page.htmlとtabs.page.scssの二つを変更します。
tabs.page.html
修正前
<ion-tabs>
<ion-fab vertical="bottom" horizontal="center" translucent="true">
<ion-fab-button (click)="goToPictures()">
<ion-icon name="camera"></ion-icon>
</ion-fab-button>
</ion-fab>
<ion-tab-bar slot="bottom" class="ion-no-border">
<ion-tab-button tab="tab-conversations" class="comments">
<ion-icon name="triangle"></ion-icon>
<ion-label>Tab 1</ion-label>
<ion-badge >Hi</ion-badge>
</ion-tab-button>
<svg height="50" viewBox="0 0 100 50" width="100" xmlns="http://www.w3.org/2000/svg">
<path d="M100 0v50H0V0c.543 27.153 22.72 49 50 49S99.457 27.153 99.99 0h.01z" fill="red" fill-rule="evenodd">
</path>
</svg>
<ion-tab-button tab="tab-notifications" class="notifs">
<ion-icon name="notifications"></ion-icon>
<ion-badge *ngIf="new_activities">{{new_activities}}</ion-badge>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>修正後
<ion-tabs>
<ion-fab vertical="bottom" horizontal="center" translucent="true">
<ion-fab-button (click)="yourCustomFunction()">
<ion-icon name="camera"></ion-icon>
</ion-fab-button>
</ion-fab>
<ion-tab-bar slot="bottom" class="ion-no-border">
<ion-tab-button tab="tab-conversations" class="comments">
<ion-icon name="triangle"></ion-icon>
<ion-label>Tab 1</ion-label>
<ion-badge >Hi</ion-badge>
</ion-tab-button>
<svg height="50" viewBox="0 0 100 50" width="100" xmlns="http://www.w3.org/2000/svg">
<path d="M100 0v50H0V0c.543 27.153 22.72 49 50 49S99.457 27.153 99.99 0h.01z" fill="red" fill-rule="evenodd">
</path>
</svg>
<ion-tab-button tab="tab-notifications" class="notifs">
<ion-icon name="notifications"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>tabs.page.scss
最初は何も書いてありませんが、下記のように変更します。
ion-tabs{
ion-fab {
margin-bottom: env(safe-area-inset-bottom); /* fix notch ios*/
ion-fab-button {
--box-shadow: none;
}
}
ion-tab-bar {
--border: 0;
--background: transparent;
position: absolute;
bottom: 0;
left:0; right: 0;
width: 100%;
&:after{
content: " ";
width: 100%;
bottom: 0;
background: var(--ion-color-light);
height: env(safe-area-inset-bottom);
position: absolute;
}
ion-tab-button {
--background: var(--ion-color-light);
}
ion-tab-button.comments {
margin-right: 0px;
border-top-right-radius: 18px;
}
ion-tab-button.notifs {
margin-left: 0px;
border-top-left-radius: 18px;
}
svg {
width: 72px;
margin-top: 19px;
path{
fill: var(--ion-color-light);
}
}
}
}
結果
前
後
アイコンにメッセージを追加している部分はこのように書いています。
<ion-tab-button tab="tab-conversations" class="comments">
<ion-icon name="triangle"></ion-icon>
<ion-label>Tab 1</ion-label>
<ion-badge >Hi</ion-badge>
</ion-tab-button>元ネタだとちゃんと条件分岐をしていました。
<ion-badge *ngIf="new_message">{{new_message}}</ion-badge>参考文献
https://forum.ionicframework.com/t/ionic-5-awesome-tab-bar-with-curve/186579
新しいMacでXcodeの証明書を引き継ぐ
1
新しいMacでXcodeでアプリ開発をするための設定についてまとめます。
- 以前のMacは必要なく、新しいMacだけで完結します
まず、ブランクのアプリを作ってみることから始めます。そうすると、Signing＆Capabilityの部分でTeamを選べない問題に直面します。
そこで、これをまず解決する必要がりますので、Add an Accountというボタンを押して、Apple IDでサインインします。
そうすると、一応ビルドはできるようになります。しかし、そのままだとCodeSignの「キーチェーンログインのパスワードを入力してください」でパスワードを繰り返し求められて先に進みませんでした。
そこで、https://developer.apple.comからApple Developerにサインインして証明書をダウンロードしました。
ここで、該当するProfileをダウンロードしてダブルクリックしたら、動作するようになりました。
こんなに簡単だったっけって感じです。。あとで落とし穴がないか怖いです。
MacのXcodeのデベロッパーライセンスを更新するときにやること
1
Xcodeのデベロッパーライセンスを更新するときにやることをまとめておく。
まず、Appleからライセンス切れる旨を伝えるメールが来るので購入する。
次に、Apple Developerにログインして、Certificates＆Identifiers & ProfilesのDevicesを選ぶ。
Continueを選ぶ。下記のようにデバイスリストを最新にしてくださいというメッセージが表示される。
Now that you’ve started a new membership year, make sure your device list is up to date. Once you complete this process, new devices can be added.
Select the devices you’d like to keep for this membership year and deselect the devices you’d like to remove. Only your currently enabled devices are shown and all previously disabled devices will be removed automatically. To keep a previously disabled device, visit the All Devices page, enable the devices you’d like to keep, and return to this page.
Continueを押下
この画面の「I acknowledge that any devices I disable during this membership year will continue to count towards my total registered devices.」にチェックを入れてResetする。
私は以上だけでした。
Macの環境設定の備忘録
1
データ分析とWebアプリ開発をしているエンジニアのMacの設定方法です。Mac book Pro 2019,2020でそれぞれBig SurとCataliaにて設定したものを備忘録として書いたものです。
- CapsLockでの英語/日本語の切り替え
- スクロール方向の切り替え
- スクリーンショットの拡張子変更
- aliasの設定
- 一般ソフト（Chrome,Gimp,FileZilla,Atom,VScode）のインストール
- Tableau Publicのインストール
- node.jsのインストール
- Ionicのインストール
- Xcodeのインストール
- CocoaPodのインストール
- Pythonのインストール
- GitHubのssh設定
CapsLockでの英語/日本語の切り替え
CapsLockで英語/日本語の切り替えができるようにします。
- デスクトップの左上にあるAppleのマークからシステム環境設定を選び
- 「キーボード」を選択し
- 上に並んでいるタブのうち、左から4番目の「入力ソース」を選択し
- ウィンドウの下にある「CapsLockでABC入力と切り替える」のチャックを打つ
スクロール方向の切り替え
タッチパッドの指の動かし方と画面の遷移方向を設定します。
- デスクトップの左上にあるAppleのマークからシステム環境設定を選び
- 「トラックパッド」を選択し
- 上に並んでいるタブのうち、左から2番目の「スクロールとズーム」を選び
- 「スクロールの方向：ナチュラル」のチェックを外す
スクリーンショットの拡張子変更
デフォルトのpngだと容量が大きすぎるので、jpgに変更して容量が小さくなるようにします。
defaults write com.apple.screencapture type 拡張子で拡張子を指定すれば変更できるので、
defaults write com.apple.screencapture type jpg
killall SystemUIServer
exitとします。jpgをpng,pdf,tiffなど任意のものに変更可能です。
aliasの設定
terminalにaliasを設定して、任意のコマンドを自分好みのコマンドで打てるようにします。
使用シェルがbashなら~/に.bash_profileと.bashrcを作成し、zshなら.zshrcと.zshprofileを作成し設定します。ログイン時に実行されるのは.bash_profileと.zshprofileで、.bashrcと.zshrchはターミナル起動時にいつも実行されます。
私はBig Surだったので、.zshrcに
alias o='open ./'
alias p='pwd'
alias l='ls'
alias n='cd /Users/masaya/Desktop;open /Users/masaya/Desktop'と書きました。設定を反映するために再起動をするか
source ~/.zshrcします。
一般ソフト（Chrome,Gimp,FileZilla,Atom,VScode）のインストール
いずれも公式サイトにアクセスして、ファイルをダウンロードすれば特に設定なしで使えるものです。
| 項目 | ||
| Chrome | 普通にインストールします。dmgファイルをインストールしてから、ダブルクリックで起動して画面の操作にしたがってアイコンを移動するだけです。インストールあと、dmgファイルはゴミ箱に移動です、 | |
| VScode | https://azure.microsoft.com/ja-jp/products/visual-studio-code/からダウンロード | |
| Atom | https://atom.io/からダウンロード |
その他、Vivaldi,Firefoxなども同じようにインストールします。
Tableau Public
データ可視化用にTableau Publicを入れます。これも公式からダウンロードしてぽちぽちするだけです。
FileZillaのインストール
Macで無料で使えるFTPソフトです。
node.jsのインストール
Ionicのインストール
AndroidStudioのインストール
https://developer.android.com/studioからインストールします。
Xcodeのインストール
AppStoreから最新をインストールします。１１GB程度と非常に重いので注意。
証明書関係が面倒ですが、以前のメモには下記のように書いてあります。
めちゃくちゃ苦労した。全て記録に残せたわけではないが、少なくとも以前のMacは必要なかった。AppleDeveloperサイトに行って、ログインする。Certificates, Identifiers & ProfilesからPlatformのカラムがALLのもののうち、DevelopmentとDeistributionを選んで、ダウンロードしてキーチェーンに登録する。これを新しい方でダブルクリックして登録する。それと、app developer idでパソコンでログインして、新しいMacを登録する。そうするとチームが選べるようになる。基本的には以上の二つでOK.ってこんだけのことだったっけ？
CocoaPodのインストール
sudo gem install cocoapodsでインストールします。
Pythonのインストール
以前はAnacondaを使っていましたが、有料化したので使うのはやめました。有料のAnacondaをインストールしたいなら、公式からダウンロードしてぽちぽちすればいけます。
https://www.anaconda.com/products/individual
GitHubのssh設定
Github用に .sshをホームディレクトリに配置して設定します。
ホーム画面で.sshディレクトリを作成します。
% mkdir ./.ssh
masaya@local-host ~ % cd .ssh 鍵を作成します。
% ssh-keygen -t rsa
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/masaya/.ssh/id_rsa): /Users/masaya/.ssh/id_rsa
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /Users/masaya/.ssh/id_rsa.
Your public key has been saved in /Users/masaya/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:chw/VNuyHQ9D0DLooAVRfu9KtEK4TXoOVh36Gkw2c9U masaya@local-host
The key's randomart image is:
+---[RSA 3072]----+
| o+. .oo. |
| .o ..o=. |
| ooo+ +oE |
| .o B.+ + = |
| o S * o . .|
| & * + |
| = * + . |
| . + = . |
| o . |
+----[SHA256]-----+
権限を読み取り専用に変更して
chmod 600 id_rsa情報をコピーして
% pbcopy < ~/.ssh/id_rsa.pubGitHubに行って、アイコンをクリックしてから「settings」 > 「SSH and GPG keys」 > 「New SSH Key」と進んで、情報を貼り付ける
あとは下記で疎通できることを確認します。
% ssh -T git@github.com
The authenticity of host 'github.com (13.**.40.48)' can't be established.
RSA key fingerprint is SHA256:********pJWGl7E1IGOCspRomTxdCARLviKw6E5SY8.
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes
Warning: Permanently added 'github.com,13.***.40.48' (RSA) to the list of known hosts.
Hi N****! You've successfully authenticated, but GitHub does not provide shell access.
https://qiita.com/unsoluble_sugar/items/14bea376d8e6fce82eb3
設定でよく使うコマンド
macOSでデスクトップを表示 ：「Fn」＋「F11」
隠しファイルの表示；command shift .