Skip to main content

Ionic コアコンセプト

Ionicアプリ開発を初めて行う人にとっては、プロジェクトの背後にある中核となる哲学、概念、およびツールについて高度な理解を得ることが役立ちます。複雑なトピックに飛び込む前に、Ionic Frameworkの基本とその仕組みについて説明します。

UIコンポーネント

Ionic FrameworkはUIコンポーネントのライブラリです。UIコンポーネントは、アプリケーションの構成要素として機能する再利用可能な要素です。イオンコンポーネントはウェブ標準HTML、CSS、およびJavaScriptを使用します。コンポーネントはあらかじめ構築されていますが、高度にカスタマイズできるようにゼロから設計されているため、アプリは各コンポーネントを独自に作成でき、各アプリに独自のルックアンドフィールを持たせることができます。具体的には、Ionicコンポーネントを簡単にテーマ化して、アプリ全体の外観をグローバルに変更できます。外観のカスタマイズの詳細については、テーマ

プラットフォームの継続性

Platform ContinuityはIonic Frameworkの組み込み機能であり、アプリ開発者は複数のプラットフォームで同じコードベースを使用できます。すべてのIonicコンポーネントは、アプリが実行されているプラ​​ットフォームに外観を適合させます。たとえば、iPhoneやiPadなどのAppleデバイスは、Apple独自のiOSデザイン言語を使用します。同様に、AndroidデバイスはMaterial Designと呼ばれるGoogleのデザイン言語を使用します。

プラットフォーム間で微妙な設計変更を行うことにより、ユーザーは使い慣れたアプリエクスペリエンスを提供されます。AppleのApp StoreからダウンロードしたIonicアプリはiOSテーマを取得し、AndroidのPlay StoreからダウンロードしたIonicアプリはMaterial Designテーマを取得します。ブラウザからプログレッシブWebアプリ(PWA)として表示されるアプリの場合、Ionicはデフォルトでマテリアルデザインテーマを使用します。さらに、特定のシナリオで使用するプラットフォームの決定は完全に構成可能です。プラットフォームの継続性に関する詳細は、テーマ

従来のWebアプリは線形の履歴を使用します。つまり、ユーザーはページに進み、戻るボタンを押して戻ることができます。この例としては、ユーザーがブラウザーの線形履歴スタックを前後に移動するウィキペディア周辺をクリックすることがあります。

対照的に、モバイルアプリは多くの場合、並列の「非線形」ナビゲーションを利用します。たとえば、タブ付きインターフェイスには、タブごとに個別のナビゲーションスタックを設定できます。これにより、ユーザーがタブ間を移動したり切り替えたりするときに場所を失うことがなくなります。

Ionicアプリはこのモバイルナビゲーションアプローチを採用しており、Web開発者が使い慣れたブラウザースタイルのナビゲーション概念を維持しながら、ネスト可能な並列ナビゲーション履歴をサポートしています。

Angularおよび@ionic/angularで構築されたアプリの場合、新しいIonic 4 Angularアプリごとにすぐに使用できるAngular Routerを使用することをお勧めします。Ionicの以前のバージョンには独自のカスタムルーターが付属していましたが、最高のツールと開発者のエクスペリエンスを提供するために、フレームワークの推奨ルーターの使用に移行しました。

ネイティブアクセス

Webテクノロジーで構築されたアプリ(Ionicアプリなど)のすばらしい機能は、デスクトップコンピューター、電話、タブレット、車、冷蔵庫など、ほぼすべてのプラットフォームで実行できることです!Ionicアプリの同じコードベースは、これらのプラットフォーム間で共有されるWeb標準と共通APIに基づいているため、多くのプラットフォームで動作します。

Ionicの最も一般的な使用例の1つは、App StorePlay Storeの両方からダウンロードできるアプリを構築することです。iOSとAndroidの両方のソフトウェア開発キット(SDK)は、「WebビューネイティブSDK に完全にアクセスしながら、Ionicアプリをレンダリングします。

CapacitorCordovaなどのプロジェクトは、IonicアプリがネイティブSDKにアクセスできるようにするためによく使用されます。つまり、開発者は一般的なWeb開発ツールを使用してアプリをすばやく構築でき、デバイスの加速度計、カメラ、GPSなどのネイティブ機能に引き続きアクセスできます。

テーマ

コアでは、Ionic FrameworkはCSSを使用して構築されているため、CSSプロパティ(変数)が提供する柔軟性を活用できます。これにより、Web標準に準拠しながら見栄えの良いアプリを非常に簡単に設計できます。開発者がデフォルトを使用できるように色のセットを提供しますが、それらをオーバーライドして、ブランド、会社、または希望のカラーパレットに一致するデザインを作成することをお勧めします。アプリケーションの背景色からテキストの色まで、すべてが完全にカスタマイズ可能です。アプリのテーマの詳細については、テーマ

Ionic Frameworkとは何ですか?

Ionic Frameworkは、Webテクノロジー(HTML、CSS、およびJavaScript)を使用して、高性能で高品質のモバイルおよびデスクトップアプリを構築するためのオープンソースUIツールキットです。

Ionic Frameworkは、フロントエンドのユーザーエクスペリエンス、またはアプリのUIの操作(コントロール、操作、ジェスチャー、アニメーション)に重点を置いています。学習は簡単で、Angularなどの他のライブラリやフレームワークとうまく統合できます。または、単純なスクリプトインクルードを使用して、フロントエンドフレームワークなしでスタンドアロンで使用できます。

現在、Ionic FrameworkはAngularおよびReactと 公式に統合されて おり、Vueのサポート は開発中です。飛び込む前にIonic Frameworkについて詳しく知りたい場合は、基本を説明するビデオを 作成しました。

目標

クロスプラットフォーム

ネイティブiOS、Android、デスクトップ、プログレッシブWebアプリとしてのWebなど、複数のプラットフォームで動作するアプリをビルドしてデプロイします-すべて1つのコードベースで。一度書くだけで、どこでも実行できます。

Web標準ベース

Ionic Frameworkは信頼性の高い上に構築されており、 標準化されたWebテクノロジー:HTML、CSS、およびJavaScript。カスタム要素やシャドウDOMなどの最新のWeb APIを使用します。このため、Ionicコンポーネントには安定したAPIがあり、単一のプラットフォームベンダーの気まぐれではありません。

美しいデザイン

クリーンでシンプル、機能的。Ionic Frameworkは、すべてのプラットフォームですぐに動作して表示できるように設計されています。事前に設計されたコンポーネント、タイポグラフィ、インタラクティブなパラダイム、豪華な(まだ拡張可能な)基本テーマから始めます。

シンプルさ

Ionic Frameworkは、シンプルさを念頭に置いて構築されているため、Ionicアプリの作成は楽しく、学びやすく、Web開発スキルのある人なら誰でもアクセスできます。

ライセンス

Ionic Frameworkは無料のオープンソースプロジェクトであり、許可されているMITライセンスの下でリリースされています。これは、個人または商業プロジェクトで無料で使用できることを意味します。MITは、jQueryやRuby on Railsなどの一般的なプロジェクトで使用されているライセンスと同じです。

このドキュメントコンテンツ(ionic-docsリポジトリにあります)は、Apache 2ライセンスの下でライセンスされています。

イオンCLI

公式 イオンCLI、またはコマンドラインインターフェイスは、Ionicアプリの足場をすばやく構築し、Ionic開発者に役立つコマンドを多数提供するツールです。Ionicのインストールと更新に加えて、CLIには組み込みの開発サーバー、ビルドおよびデバッグツールなどが付属しています。あなたがいる場合にはイオン性Appflowのメンバー、CLIを構築し、展開雲を行い、アカウントを管理するために使用することができます。

フレームワークの互換性

Ionicの過去のリリースはAngularと緊密に結合されていましたが、フレームワークのV4は、Angularなどの最新のJavaScriptフレームワークの統合により、スタンドアロンWebコンポーネントライブラリとして機能するように再設計されました。Ionicは、ReactやVueを含むほとんどのフロントエンドフレームワークで使用できますが、一部のフレームワークではWebコンポーネントを完全にサポートするためにshimが必要です。

JavaScript

Ionic 4の主な目標の1つは、コンポーネントをホストするための単一のフレームワークに関する厳しい要件を削除することでした。これは、Webページ内のスクリプトタグだけでコアコンポーネントがスタンドアロンで動作できることを意味します。フレームワークでの作業は、大規模なチームや大規模なアプリには適していますが、WordPressのようなコンテキストでも、Ionicを単一ページのスタンドアロンライブラリとして使用できるようになりました。

角度

角度は常にIonicの素晴らしさの中心にあります。コアコンポーネントはスタンドアロンWebコンポーネントライブラリとして機能するように記述されてい@ionic/angularますが、このパッケージにより、Angularエコシステムとの統合が簡単になります。@ionic/angularAngular開発者がIonic 2/3から来ることを期待するすべての機能を含み、AngularルーターなどのコアAngularライブラリと統合します。

反応する

Ionicは現在、人気のあるReactライブラリを公式にサポートしています。Ionic Reactを使用すると、React開発者は既存のWebスキルを使用して、iOS、Android、Web、およびデスクトップをターゲットとするアプリを構築できます。では@ionic/react、あなたはすべてのコアイオンのコンポーネントを使用しますが、ネイティブを使用したような感じがコンポーネントに反応する方法ですることができます。

今後のサポート

他のフレームワークのサポートは、将来のリリースで予定されています。現在、Vueの公式バインディングが開発されていますが、これらのフレームワークでは一部のコンポーネントがそのまま使用できます。

Ionic Framework V4 +

Ionic Framework V4は、パフォーマンス、互換性、および全体的な拡張性に重点を置いた、プロジェクトの基盤となるテクノロジと機能の大きな進歩です。V4は@ionic/angularパッケージを通じてAngularと密接に統合されていますが、フレームワークに依存しないため、他のJavaScriptフレームワーク(Vue、React、Preactなど)で動作するか、フレームワークをまったく使用しません。

V4では、Web標準に移行することで、Ionicのコアが、フレームワーク固有のモデルではなく、最新のブラウザーでサポートされている標準コンポーネントモデルに依存できるようになりました。これにより、ロード時間が短縮され、パフォーマンスが向上し、全体的なコードが少なくなります。

イオンAppflow

ライフサイクル全体でIonicアプリを管理できるように、オープンソースフレームワークとは別のIonic Appflowと呼ばれる本番アプリ用の商用アプリプラットフォームも提供しています

Ionic Appflowは、開発者とチームがネイティブアプリビルドをコンパイルし、集中型ダッシュボードからIonicアプリにライブコード更新を展開するのに役立ちます。オプションの有料アップグレードは、ワークフローの自動化、シングルサインオン(SSO)、接続されたサービスおよび統合へのアクセスなどのより高度な機能に利用できます。

AppflowにはIonicアカウントが必要で、その機能のいくつかを試してみたい人には無料の「スターター」プランが付属しています。

生態系

Ionic Frameworkは、コアチームによってフルタイムで積極的に開発および維持され、そのエコシステムは、その成長と採用を促進する開発者と貢献者の国際コミュニティによって導かれます。小規模および大規模の開発者および企業は、Ionicを使用して、あらゆる場所で実行される驚くべきアプリを構築および出荷しています。

コミュニティに参加する

世界中の200か国以上に数百万人のIonic開発者がいます。参加する方法は次のとおりです。

  • フォーラム:質問をしたり、アイデアを共有したりするのに最適な場所です。
  • Slack:開発者がリアルタイムで会ってチャットできる活気のある場所。
  • Twitter:更新を投稿し、Ionicコミュニティからのコンテンツを共有します。
  • GitHub:バグの報告や新機能のリクエストについては、ここで問題を作成してください。PRを歓迎します!
  • コンテンツのオーサリング:技術的なブログを作成するか、ストーリーをIonicコミュニティと共有します。

아직까지 수수료에 벌벌떠는 일본의 은행

사실 알려질대로 다 알려져서 그렇지, 일본의 은행 시스템이 매우 낙후되어 있다는 것은 한국인에게도 잘 알려진 사실입니다. 유학 비용을 송금하거나 받아보면서 느낀 사람도 있으시겠지만, 그걸 가장 느끼는 건 은행의 기본 삼대 업무가 의외로 한국의 상식을 안 좋은 쪽으로 뛰어넘는다는 사실입니다.

접근성

은행 접근성이 떨어진다는 사실은 한일 양국의 공통 사항입니다. 지점이 축소되고 거의 유명무실화되는 건 16시면 문을 닫는 은행의 영업 시간 탓일 겁니다. 실은 일본은 15시에 닫는 곳이 더 많은데다 인당 창구 소요 시간이 너무나 길기 때문에 더욱 크게 느껴집니다.

그래서 점심 시간에 얼른 회사 근처 은행을 다녀오는 게 밥을 포기하지 않고도 가능한 한국의 상식으로는, 여기선 점심 시간이 오버될 각오를 하더라도 아마 가지 못하는 사람들이 많다는 점에서 차원이 다릅니다. 1시간 반을 자리를 비우게 될테니까요. 앱이나 인터넷 은행에 대해서도 할 말이 많은데, 이에 관해서는 다른 글에서 소개하기로 하겠습니다.

ATM도 멀게 느껴진다

일본의 전국에 분포한 대형 은행은, 미쓰비시(UFJ), 미즈호, 미쓰이스이토모, 리소나 같은 곳이 있지만, 한국에서 건너온 이방인이 월급 통장 등으로 만드는데 성공했다고 들은 곳은 미쓰비시 말고 들은 곳이 없습니다. 다른 곳은 6개월 체류 후 오라고 하니 월급을 받을 수 없어 헛걸음만 하기 십상입니다. 그러니 굳이 살펴볼 필요도 없겠죠.

사실 제가 쓰는 곳은 이런 대형 은행에 속하지 않은 조금 특이한 신형 은행(새로운 형태의 은행이라고 분류하네요)인데, 영업점이 극소화된 은행(신세이은행, SBJ은행)과 완전 인터넷 은행(라쿠텐은행) 정도입니다.

영업점이 극소화되어 있으니 ATM 접근성이 좋을 리가 없는 게 당연합니다. 하지만 이곳이 오히려 ATM이 가깝습니다. 아예 주요 편의점의 ATM과 계약을 맺어서 이쪽을 이용하라고 합니다.

하지만 그렇다고 한들, 수수료를 물라고 하면 선뜻 이용하기 꺼려집니다. 특히 일본의 ATM 이용 수수료는 상당히 높기에, 이를 잘 모르고 뜯길까 낯선 곳에서 통장 입출금을 하기 무서워하는 사람들도 많습니다.

제가 쓰는 은행과 미쓰비시UFJ만 한 번 비교해봤습니다.

UFJ은행

당행 무료, 타행 220엔(3만엔 미만) 330엔(3만엔 이상)

  • 슈퍼 보통예금(메인뱅크 플러스)에 실버 스테이지인 경우 월 2회 편의점, 타 은행 등 제휴 ATM 무료
  • 슈퍼 보통예금에 플래티넘 스테이지인 경우 월 3회 무료

실버 스테이지가 되기 위해 잔고가 30만엔이 필요하고, 플래티넘은 500만엔이 필요하네요. 원화로 동그라미 하나 더 붙이면 만만치 않은 돈입니다. 사실상 당행 외 무료 ATM은 없는 셈 쳐야 할 것 같습니다.

신세이은행

  • 당행 ATM이 없음
  • 세븐ATM (세븐일레븐, 이토요카도 등), EnetATM(일부 패밀리마트, 데일리 등),
    로손ATM, 이온ATM, PatSat(한신), VIEW ALTTE(JR동일본역), 유초(일본 우체국): 110엔, 골드 회원 무료
  • 타행은행, 미쓰이스이토모, 상공조합중앙금고: 110엔, 골드 회원 무료, 입금은 불가

신세이은행은 일률적으로 110엔이 드는 것으로 보여 빠져나갈 구석이 안 보입니다. 하지만, 골드 회원의 조건이 몇 가지 있는데… (단, 신규 3개월은 골드 대우 해줍니다)

  • 당행 총 맡긴 금액이 200만엔 이상
  • 당행투자상품 30만엔 이상
  • 금전신탁 100만엔 이상
  • 자동적립형외화정기예금, 투신적립 이체
  • 테오 (국제분산투자상품) 이체
  • 신세이은행FX 10만 기본통화 이상 약정
  • 선불카드 GAICA 충전 1만엔 이상 또는 파워플렉스 계좌에 외화 80기본통화 충전

뭔가 많습니다만 가장 마지막이 중요합니다. GAICA 카드를 계좌 만들면서 바로 발급받을 수 있는데, 여기에 자동 충전만 걸면 되는 것입니다. 이후에 충전금을 자유롭게 계좌로 되돌릴 수도 있더군요. 그래서 골드 회원 혜택을 잘 받고 있습니다.

라쿠텐은행

  • 세븐/이온/PatSat: 3만엔 이상 입금 무료, 그 외 220엔, 개설 3개월간 무료, 해피프로그램 차등 무료 횟수 제공 (최고 7회)
  • Enet/로손/MUFG/미즈호/유초/VIEW ALTTE(입금불가): 3만엔 이상 입금 무료, 그 외 275엔, 개설 3개월간 무료, 해피프로그램 차등 무료 횟수 제공 (최고 7회)

타의로 만든 은행계좌이긴 하지만, 라쿠텐 생태계는 매력적입니다. 직불카드로 포인트도 쏠쏠하게 쌓이고 장점이 적지 않습니다. 하지만 ATM 수수료는 자비가 부족합니다. 은행으로서 주로 쓰기엔 아쉬운 부분이 있는데, 횟수가 모든 곳에서 공유되기에 더욱 적게 느껴지는 점입니다.

해피프로그램은 고객의 매월 25일 시점 잔고 또는 월간 거래액으로 산정되는 등급입니다.

  • Super VIP: 잔고 300만엔 이상, 거래 30건 이상, ATM 무료 7회/ 타행송금 3회 / 라쿠텐포인트 적립률 3배
  • VIP: 100만엔 이상, 20건 이상, ATM 무료 5회/ 타행송금 3회 / 라쿠텐포인트 적립률 3배
  • 프리미엄: 50만엔 이상, 10건 이상, ATM 무료 2회/ 타행송금 2회 / 라쿠텐포인트 적립률 2배
  • 어드벤스드: 10만엔 이상, 5건 이상, ATM 무료 1회/ 타행송금 1회
  • 베이직: 엔트리

SBJ은행

  • 세븐/이온/Enet: 월 10회 무료
  • 유초/미즈호: 월 3회 무료

신한은행의 자회사인 SBJ은행은 원래 세븐ATM이 무제한 무료였으나, 2019년 11월 1일 부로 개악되었습니다.

마치며

한국의 카카오뱅크가 떠오릅니다. 거의 모든 시중은행과 연계해서 수수료 없는 송금은 물론 ATM 입출금까지 이뤄냈습니다. 또 편의점 ATM 입금 환경도 수수료 무료를 선언한 은행이 늘어나면서 좋아지는 중입니다.

일본에서 그 부분은 세븐ATM이 독보적이긴 하지만, 여전히 주변에 보이는 은행은 내야하는 수수료가 만만치 않습니다.

결국 얼마나 따져보고 챙기냐에 따라 예기치도 않은 지출 금액을 절약할 수 있을 것 같습니다.