What's New Qiita

20210110のiOSに関する記事は6件です。

  • 投稿日：2021-01-10T23:43:45+09:00

UILabelで複数行表示させるには

iOSアプリを開発し始めた上で、知らなかったがために苦戦したので、忘れないように備忘録を残す。

TL;DR

numberOfLines を 0 にする。（それだけ）

やってみる

UILabelを設置

Labelを表示させる簡単なアプリを作る。
storyboardでUILabelを配置して、詳細はコードで書く。

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var testLabel: UILabel!


    override func viewDidLoad() {
        super.viewDidLoad()

        setupLabel()
    }

    func setupLabel() {
        testLabel.text = "ラベルだよ"
        testLabel.backgroundColor = UIColor(red: 0, green: 0, blue: 1, alpha: 0.3)
    }


}

（UILabelそのものが見やすいように薄く背景色をつける）

こんな感じ。
ラベル置いただけ.png

長い文章にしてみる

Labelに表示させる文章を1行以上になるようにしてみる。
このLabelのままだと、明らかに高さが足りないので、十分な高さにしておく。

コードを少し手直し。

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var testLabel: UILabel!
    /// 高さを調整するためにConstraintを追加
    @IBOutlet weak var testLabelHeight: NSLayoutConstraint!


    override func viewDidLoad() {
        super.viewDidLoad()

        setupLabel()
    }

    func setupLabel() {
        testLabel.text = "とっても長い文章になるよ。とっても長い文章になるよ。とっても長い文章になるよ。とっても長い文章になるよ。"
        testLabel.backgroundColor = UIColor(red: 0, green: 0, blue: 1, alpha: 0.3)

        /// 複数行表示させるため
        testLabelHeight.constant = 80
    }


}

それが、こう。
ラベル伸ばす.png

えぇ...
いい感じに省略してくれてる...

行数を設定する項目があった

高さをどんなにしても、きっちり1行に収めてくれる。
泣きながら調べてみると、 行数 を設定できることがわかった。

先ほどの setupLabel() に、これを追加する。

/// 行数調整
testLabel.numberOfLines = 0

そうすると、晴れて目的通りになる。
ラベル完成.png

まとめ

デフォルトでは行数は 1 になっているので、指定した行数にしたければ、その数値を入れ込む。
何行になってもいいから、全て表示させるには 0 を入れ込めば良い。

(てっきり全部表示してくれるもんだと思い込んでいたので、とにかく不思議でした...)

ちなみに、storyboard上でもこの項目の設定はある。
storyboard項目.png

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-10T20:50:16+09:00

[Swift] SwiftLintの使い方　(cocoapods)

installまで

ターミナルを開きます。

ターミナルで、cdの後に赤枠をドラックアンドドロップして貼り付けます。
その後、最後の/以降を削除してEnterを押します。
スクリーンショット 2021-01-10 20.18.58.png

cd /Users/sakamototatsuya/Desktop/swift/SwiftLintTestApp

次に以下を入力します。

pod init

これでpodfileが作成されたので、以下で開きます。

open podfile

podfileが開けるので、赤枠のようにSwiftLintを追加します。

pod 'SwiftLint'

スクリーンショット 2021-01-10 20.25.52.png

comand ＋　s で保存して閉じます。
ターミナルに戻り、以下を入力します。

pod install

画像のようになれば、installできています。
スクリーンショット 2021-01-10 20.30.28.png

それ以降のXcodeでの操作

先程開いていたXcodeを閉じて、workspaceで開きます。
スクリーンショット 2021-01-10 20.47.27.png

数字の順番に操作していきます。
スクリーンショット 2021-01-10 20.34.15.png

＋を押したら、New Run Script Phaseを選択します。
すると、Run　Scriptが下に追加されます。

赤枠に以下のコードを入れます。

"${PODS_ROOT}/SwiftLint/swiftlint"

スクリーンショット 2021-01-10 20.40.55.png

たくさん警告が出てきたら機能していると思います。
スクリーンショット 2021-01-10 20.48.28.png

参考サイト

https://github.com/realm/SwiftLint

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-10T18:11:57+09:00

Xcode デバッグのログを表示させる方法

あれ、ログはどうやったら表示されるの？

スクリーンショット 2021-01-10 18.07.17.jpg
久しぶりにXcodeで開発しようとすると、ログが表示されないことに気がついた。。。

どこをどうやったらログが表示されるのか？
僕みたいにそういう操作で結構手間取る人も多いかと:joy:

ログの表示方法

スクリーンショット 2021-01-10 17.52.27.jpg
View>Debug Area>Activate Console

これで表示されました。

表示系は基本的にViewの項目から選べると覚えておこう

スクリーンショット 2021-01-10 17.52.37.jpg

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-10T17:50:59+09:00

Flutter x Firestore で気軽に永続化してオラオラする方法

スクリーンショット 2021-01-10 17.39.18.png

?‍? まえがき

■やること

  • Flutter & Firebase Firestore にて、必要最低限の実装内容で動くものを作成

■作業概要

  • STEP0：事前準備、参考資料
  • STEP1：firebaseの設定
  • STEP2：設定ファイルの配置
  • STEP3：パッケージの追加
  • STEP4：接続テスト
  • STEP5：firestoreの準備
  • STEP6：コードの実装

■下記の症状に効能があります

  • flutter & firestore の日本語資料がない
  • 公式教材やってみたけど、バージョンが古くて動かない
  • もっと気軽に普段からオラオラできたら便利
  • てめぇは俺を怒らせた

■環境

  • editer：VScode
  • flutter：1.22.5
  • Dart：2.10.4
  • xcode：12

?STEP0：事前準備、参考資料

?STEP1：firebaseの設定

■appプロジェクト作る

  • 先にappのプロジェクトを作成すること
  • プロジェクト作成
    • flutter create sampleApp
  • シュミレーター起動
    • open -a Simulator
  • projectの起動
cd flutter_sample
flutter run

■firebaseの設定

  • コンソール画面で「プロジェクトを追加」
  • アナリティクスの設定は適当でok!

スクリーンショット 2021-01-10 11.29.25.png

?STEP2：設定ファイルの配置(iOS)

  • 下記からiosとandroidの設定をそれぞれ追加

スクリーンショット 2021-01-10 11.31.15.png
- バンドルIDをxcodeで確認して入力

スクリーンショット 2021-01-10 11.34.22.png
スクリーンショット 2021-01-10 11.59.46.png

  • GoogleService-Info.plistをダウンロード
  • plistを"xcodeから"pjの"Runner/Runnerディレクトリ"に追加する
  • その時、表示されるダイアログでcopyにチェックが入ってることを必ずチェック（私はこれではまった）

スクリーンショット 2021-01-10 11.39.15.png

スクリーンショット 2021-01-10 11.39.59.png

  • ファイルの追加を行ったら、firebaseのios設定画面STEP3と4はスキップでok スクリーンショット 2021-01-10 12.00.42.png ＊もともとxcodeでの追加設定前提の内容なので、ファイル追加以降の操作は不要

?STEP3：パッケージの追加

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^0.5.3 ←追加
  firebase_analytics: ^6.3.0 ←追加
  cloud_firestore: ^0.14.4 ←追加

スクリーンショット 2021-01-10 12.36.34.png

✅STEP４：接続テスト

  • デフォルトのmain.dartに下記のように追記
main.dart
import 'package:flutter/material.dart';
import 'package:firebase_analytics/firebase_analytics.dart'; //←追加
import 'package:firebase_analytics/observer.dart'; //←追加

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  static FirebaseAnalytics analytics = FirebaseAnalytics(); //←追加
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
      //↓追加
      navigatorObservers: [
        FirebaseAnalyticsObserver(analytics: analytics),
      ],
    );
  }
}
  • flutter runを実行（＊runするとpluginが自動でinstallされる&podfileも更新される）
  • firebase→dashboardを確認
  • 下記のように「過去30分間のユーザー」に反応があれば接続成功

スクリーンショット 2021-01-10 14.04.18.png

?STEP5：firestoreの準備

■DB作成

  • コンソールからClound Firestore > データベースの作成を選択
    スクリーンショット 2021-01-10 16.39.41.png

  • テストモードを選択
    スクリーンショット 2021-01-10 17.22.54.png

  • 地域はasia-northeast1(東京)を選択
    スクリーンショット 2021-01-10 17.24.27.png

■サンプルデータを作成

  • コレクション（sqlで言うところのテーブル名）を設定 スクリーンショット 2021-01-10 17.28.01.png
  • ドキュメント（sqlで言うところのレコード）を作成
  • （IDは自動IDを選択すると自動で振ってくれます） スクリーンショット 2021-01-10 17.28.47.png
  • 作成後はこんな感じ スクリーンショット 2021-01-10 17.28.55.png

?‍?STEP6：コードの実装

  • main.dartを下記に変更
main.dart
import 'package:flutter/material.dart';
import 'package:firebase_analytics/firebase_analytics.dart';
import 'package:firebase_analytics/observer.dart';
import 'package:cloud_firestore/cloud_firestore.dart'; //←追加
import 'package:firebase_core/firebase_core.dart'; //←追加

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  static FirebaseAnalytics analytics = FirebaseAnalytics();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(title: 'やれやれだぜ'),
      navigatorObservers: [
        FirebaseAnalyticsObserver(analytics: analytics),
      ],
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _buildBody(),
    );
  }

  Widget _buildBody() {
    final Future<FirebaseApp> _initialization = Firebase.initializeApp();
    return FutureBuilder(
      future: _initialization,
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          return _streamBuilder();
        }
        return LinearProgressIndicator();
      },
    );
  }

  Widget _streamBuilder() {
    return StreamBuilder<QuerySnapshot>(
      stream: FirebaseFirestore.instance.collection('rushes').snapshots(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (!snapshot.hasData) {
          return LinearProgressIndicator();
        }
        return _buildList(snapshot.data.docs);
      },
    );
  }

  Widget _buildList(List<DocumentSnapshot> snapshot) {
    return ListView(
      padding: const EdgeInsets.only(top: 20.0),
      children: snapshot.map((data) {
        return _buildListItem(data);
      }).toList(),
    );
  }

  Widget _buildListItem(DocumentSnapshot data) {
    final rushes = Rushes(data);

    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
      child: Container(
        decoration: BoxDecoration(
          border: Border.all(color: Colors.grey),
          borderRadius: BorderRadius.circular(6.0),
        ),
        child: ListTile(
            title: Text(rushes.makeOraOra()),
            trailing: FlatButton(
              onPressed: () {
                rushes.reference.update({'times': 0});
              },
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(
                    Icons.delete,
                  ),
                  Text(rushes.times.toString()),
                ],
              ),
            ),
            onTap: () {
              rushes.reference.update({'times': FieldValue.increment(1)});
            }),
      ),
    );
  }
}

class Rushes {
  String word;
  int times;
  DocumentReference reference;

  Rushes(DocumentSnapshot snapshot) {
    var map = snapshot.data();
    this.word = map['word'];
    this.times = map['times'];
    this.reference = snapshot.reference;
  }

  String makeOraOra() {
    var ret = "";
    for (var i = 0; i < times; i++) {
      ret += word;
    }
    return ret;
  }
}

??‍?Congratulations!??‍?

完成したら、いいね！&コメントに「ワッフルワッフル」と叫んでください?✨
スクリーンショット 2021-01-10 17.39.18.png

?サンプルはこちら?

? https://github.com/TD3P/flutter_rushMaker

?ご指摘大歓迎?

ここちゃうで！！っていうとこあったら、教えてもらえると嬉しいです！！

シリーズ情報

?Flutterで基本のTODOアプリを作ってみよう
https://qiita.com/pe-ta/items/b3b7458059c1fd7efcf0

?Flutterでページ遷移するTODOアプリを作ってみよう
https://qiita.com/pe-ta/items/e547c4cf460319f5093c

?Flutter x Firestore で気軽に永続化してオラオラする方法
https://qiita.com/pe-ta/items/ccd49fc396b063a821af

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-10T17:09:00+09:00

AR空間に豆腐を召喚するにあたってハマったポイント

ARアプリを作りたいと思い以下記事を参考にサンプルアプリを作ったのですが
UnityにもARにも慣れていなかったためいくつかハマったポイントがあったので書きます。
https://qiita.com/shun-shun123/items/1aa646049474d0e244be

表示されたエラーメッセージを残しておけばよかったのですが、忘れてました…。

Unityでビルドできない

Project Settings > Player > Others で Target minimum iOS Version を 「12」に変更、
Architecture を「ARM64」に変更することで解消しました。
Screen Shot 2021-01-10 at 16.55.45.png

XCodeでビルドできない

以下を参考に開発用ビルド証明書を作成、再びUnityでXCodeプロジェクトをビルドすることで
XCodeでビルドできるようになりました。
https://nekonenene.hatenablog.com/entry/unity-build-to-ios-for-free

iOSにインストールできない

以下を参考にXCodeとiOSの対応バージョンを合わせることで解消しました。
https://developer.apple.com/jp/support/xcode/

インストールしたアプリが正常に作動しない

Project Settings > Player > XR Plug-in Management で
Plug-in Providersの「ARKit」にチェックを入れることで解消しました。
Screen Shot 2021-01-10 at 19.20.09.png

できあがったもの

ソースコードは以下です。
https://github.com/nerikara/ar-tofu

参考

AR Foundationを使ったプロジェクトの設定については以下を参考にしました。
https://note.com/npaka/n/nc24ba42aa710

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2021-01-10T03:02:05+09:00

f12: textastic + xserver + sftp

[ おまとめ ]

いまさらですが、
textastic で xserver への sftp (SSH) において、
private key を使用する方法でつまづいたので、メモです

ちなみに、関係ないですが、エディタのファイル管理について、
・Textastic は ローカルにダウンロードして
　編集が終わったらアップロードしてリモートと同期する方式
・GoCoEdit は サーバのファイルを直接編集する方式
だそうです

GoCoEdit は未購入で、最新がどうなっているのか
分かっておりませんが、オフラインでも使用するため、
ローカルで編集してアップロードの方式がお好みのため、
Textastic を使用しております

[ 1. キッチン ]

iphone se2 / ios 13:5.1
textastic 5.3.1

xserver x10

windows10 64bit pc
puttygen.exe

[ 2. 調理 ]

(1) 公開鍵、秘密鍵 の作成

xserver / マニュアル / SSH設定
https://www.xserver.ne.jp/manual/man_server_ssh.php

を参照に、

公開鍵(パスフレーズ)と、
秘密鍵 xxxx.key を

作成しておきます

(2) textastic の sftp 設定

""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
2-01
01.JPG

地球儀マーク

""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
2-02
02.JPG

プラスマーク

""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
2-03
03.JPG

(S)FTP Connection

""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
2-04
04.JPG

FTP (Unencrypted) をタップし、

""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
2-05
05.JPG

SFTP (SSH Connection) に変更し、

""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
2-06
06.JPG

以下を設定

Title: MyServer (適当な名前)
Protocol: SFTP (SSH Connection)

Host: svXXXX.xserver.jp
Port: 10022
User: USERNAME
Password: 公開鍵(パスフレーズ)
Path: /home/USERNAME/DOMAINNAME/public_html/
Connections: 3 (接続、リトライ数です)
Debug Log: お好みで、有効か無効

""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
2-07
07.JPG

Public Key Auth. 有効
Private Key File: /ssh/id_rsa

※このデフォルトで表示される

/ssh/id_rsa

は、/ が、textastic のルートディレクトリで、
ルートに ssh というディレクトリを作成して、
private key file は、id_rsa という名前にしなさい
という意味です、試してませんが、
/aaa
や
/bbb/ccc
でも、できるかもしれません

""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
2-08
08.JPG

一応、指定どおり、
秘密鍵 xxxx.key を id_rsa にリネームして、
ssh ディレクトリを作成して、格納しました

""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
2-09
09a3.jpg

-> で、xxxx.key を使用して接続
-> 失敗。。

ファイルフォーマットが違います
と出ました

""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
2-10
textastic のマニュアルを眺めてみます
https://www.textasticapp.com/v9/manual/remote_servers/sftp_ftps_ftp.html

09b3.jpg

Public Key Authentication

Note
Textastic supports RSA, DSA, ECDSA, and Ed25519 keys.

-> private key file は、RSA, DSA, ECDSA, and Ed25519 keys.のフォーマットが必要みたいです

""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
2-11
09c3.jpg

Key File Format
If you instead have a key in PuTTY’s format (.ppk),
you can use PuTTYgen to convert it to OpenSSH/PEM format:

-> 以前に filezilla の SFTP 設定で、この PuTTY.ppk に、変換したことを思い出しました
それを使って試してみます

""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
こちらの方のページに PuTTY.ppk 変換について詳しく載っております

エックスサーバー に FileZilla で SFTP 接続 を設定する方法
https://www.buzzclub.site/2018/05/11/archives112/amp/
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""

秘密鍵 yyyy.ppk を id_rsa にリネームして、
ssh ディレクトリに、格納しました

-> 再度、yyyy.ppk を使用して接続
-> 同様エラーで失敗。。

再び、textastic のマニュアルを眺めてみます
https://www.textasticapp.com/v9/manual/remote_servers/sftp_ftps_ftp.html

Visit the PuTTY website and download puttygen.exe (on your PC).
Open it, and using the File menu, load your .ppk file
that you already use, and type in your passphrase.
Now go to the Conversions menu and export the key as an OpenSSH key.
You can now use the converted key with Textastic.

-> puttygen.exe を使って、.ppk ファイルをコンバートして使ってみてね
と書いてありますので、使ってみます

""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
2-12
Download PuTTY: latest release (0.74)
https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html

10.jpg

puttygen.exe (a RSA and DSA key generation utility)
64-bit: puttygen.exe

""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
2-13
11c.jpg

yyyy.ppk ファイルを Load します

""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
2-14
12b.jpg

公開鍵(パスフレーズ) を入力します

""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
2-15
13c.jpg
14b.jpg

Conversions メニューから、Export OpenSSH key を
選択して、RSA コンバートします

秘密鍵 zzzz.ppk_to_openssh を id_rsa にリネームして、
ssh ディレクトリに、格納しました

-> 再々度、zzzz.ppk_to_openssh を使用して接続
-> 今度は、うまくいきました！

""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""



  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧