stan

犬と寿司が好きなエンジニア🍣 Java / Rails/ Swift などしてます😀 …

stan

犬と寿司が好きなエンジニア🍣 Java / Rails/ Swift などしてます😀 フロントエンド勉強中✍️ 趣味でイラスト描いたりもしてます😀

  • Ruby/Railsの勉強

    RubyやRuby on Railsの技術をまとめました

  • Swift/iOSの勉強

    SwiftやiOS開発の技術をまとめました

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

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

stan

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

      stan

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

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

        stan

        • [SwiftUI] Stackの使い方

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

          stan

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

        stan

        マガジン

        • Ruby/Railsの勉強
          2本
        • Swift/iOSの勉強
          6本

        記事

          [SwiftUI] Modifierを使ってみる

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

          stan

          [SwiftUI] Modifierを使ってみる

          stan

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

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

          stan

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

          stan

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

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

          stan

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

          stan

          [React] はじめます🎉

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

          stan

          [React] はじめます🎉

          stan

          [Ruby] Hashの比較について

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

          stan

          [Ruby] Hashの比較について

          stan

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

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

          stan

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

          stan

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

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

          stan

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

          stan

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

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

          stan

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

          stan

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

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

          stan

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

          stan