[SwiftUI] インスタっぽいレイアウトを作ってみた

SwiftUIでインスタっぽいレイアウトを組んでみました😄 ホーム画面だけですが・・ viewの構成はこんな感じです！ StoryRowストーリーズの部分のViewです😄 横スクロールでアイコンとアカウント名を表示します！ struct StoryRow: View { var stories: [Story] var body: some View { ScrollView(.horizontal, showsIndicators: false)

Linuxのアウトプットで使えるイラスト

[SwiftUI] Listビューに行を追加 & 削除

Listビューに行を追加したり、行を削除する画面を作ります！ 行を追加TextFieldビューに入力したメッセージを、Buttonタップ時にListビューに追加します😀 struct AddRowExample: View { @State var messages: [String] = [] @State var newMessage = "" var body: some View { VStack(alignment: .leadin

[SwiftUI] Stackの使い方

SwiftUIにはレイアウトを組み立てるためにStackという構造体を使用できます😌 ContentViewのbodyプロパティでは、必ず1つだけビューを返すようにしなければいけません。 そのため、TextビューやImageビューを複数使用する場合は、1つのビューにまとめる必要があります。 その際に使用できるのが Stack です🎉 Stackの種類Stackには VStack、HStack、ZStack の3つの種類があります。 VStack 垂直方向に配置できるス

[SwiftUI] Modifierを使ってみる

SwiftUIのビューをカスタマイズするためのメソッド（font, frame, borderなど）をモディファイア（Modifier）と言います😀 メソッドチェーンのように複数のモディファイアをつないで記述できます。 たとえば、フォントを大きくして、テキストを赤色に変更したい場合はこのように記述できます。 var body: some View { Text("Hello World") .font(.largeTitle) .foregro

[React] noteっぽいアプリを作る。その２

昨日作ったアプリにCSSを適用してみます🎉 調べてみると、CSS-Modulesというプラグインを使うのが良さそう。。 プラグインを入れるためにwebpack.config.jsを書き換えないといけないという記事を見つけたけど、探しても見当たらない😨 なんとcreate-react-appのバージョン2以降は、configファイルを編集しなくてもデフォルトで使えるようになってました🎉 使い方〜.module.cssというファイルを作り、記事タイトルの部分のスタイルを定

[React] noteっぽいアプリを作る。その１

Reactはじめたので、noteっぽい文章を投稿できるアプリ作ってみたいと思います🎉 今日は ・タイトルと本文を入力して一覧に表示する を作りたいと思います。 例の如くnote.jsというファイルでNoteクラスを作っておきます。 import React, { Component } from 'react';export default class Note extends Component {} タイトルと本文が必要なので、render()に入力フィールド2つ

[React] はじめます🎉

普段バックエンドのエンジニアをしているのですが、フロントエンドの技術が最近発展していると感じているのでReactをはじめます🙇‍♂️ （そろそろやらないとまずいという焦りが。。。😂） 今日はとりあえず導入までで。。。 Reactって？Facebookが開発した、UIを作るのに特化したJavaScriptのフレームワークです！ node.jsをインストールnode.jsをインストールします。 なぜnode.jsが必要なのか？ Reactを使うにはnode.jsを入れて

[Ruby] Hashの比較について

2つのhashを比較するには？ == を使う== 演算子を使用することで、hashの中身まで一致しているかを判定することができます。 hash1 = {"flower" => "花", "grass" => "草", "tree" => "木" }hash2 = {"flower" => "花", "grass" => "草", "tree" => "木" }hash3 = {"flower" => "花", "grass" => "草", "water" => "水"

[Ruby] 改行コードで文字列連結

配列を改行コードでjoinすると、改行コードがエスケープされてしまっている😱 words = ['今日は', '台風で', '風が強い']words.join('\n') ↑のように書くと、改行コードがエスケープされて以下のような結果に。。。 ＝> "今日は\\n台風で\\n風が強い" 解決策リテラルの特殊文字を使うときは、シングルクオーテーションではなく、ダブルクオーテーションで囲む。 なので、セパレート文字はダブルクオーテーションで囲むように修正するとエスケープ

テストに使うアドレスはexample.comを使おう

最近業務でメールのテストをすることが多いからか、この記事が目につきました👀 開発時に使用するメールアドレスはexample.comを使って思わぬ事故を防止しようという記事です。 テスト環境であっても実在するアドレスを使用すると、無関係なユーザーにメールが送信されてしまって、メール内容によっては情報漏洩がおきてしまうなど思わぬ事故が発生してしまうので注意が必要です😧 aaa.comとかhoge.comとか無意識に使っちゃいそうですよね。。 aaa.aaaなんかも実在するの

[Swift5] RealmとMkMapViewを使って登録しているピンを表示

MkMapViewを使った地図アプリを作っています！ 概要としては、地図上でピンを打った場所にタグ付けし、お気に入りの場所をタグで管理できるアプリにしようと思っています🗺 今回は、Realmを使って、 ・Realm Databaseに保存した座標を使ってピンを表示する です！ Realm Databaseにピンを登録するまではこちら💁‍♀️↓ では作って行きます！ 1. デリゲートメソッドの追加MKMapViewが読み込みが終わった時に、座標時ピンを立てて行きたいので

[Swift5] RealmとMkMapViewを使ってピンの位置を登録

いま、MkMapViewを使った地図アプリを作っています！ 概要としては、地図上でピンを打った場所にタグ付けし、お気に入りの場所をタグで管理できるアプリにしようと思っています🗺 アプリを作る途中で学んだことをちょこちょこ書いていこうと思います😊 今回は、Realmを使って、 ・マップ上で長押しタップされた時にピンを保存する です！ Realm Databaseを使えるようにするまではこの記事を参考にしました↓ RealmはCocoa Podsで追加するので、もしCoc