愛されて23万View！新卒向け研修資料「テスト文字列に”うんこ”と入れるな（2024年版）」を公開しました｜技術ブログ｜北海道札幌市・宮城県仙台市のVR・ゲーム・システム開発 インフィニットループ
ホーム 技術ブログ 愛されて23万View！新卒向け研修資料「テスト文字列に”うんこ”と入れるな（2024年版）」を公開しました 愛されて23万View！新卒向け研修資料「テスト文字列に”うんこ”と入れるな（2024年版）」を公開しました こんにちは松井です。今は会長になりました。 遡ること3年前、2021年の新卒研修向けに「テスト文字列に”うんこ”と入れるな」という資料を作成しました。 おかげさまで多くの方に読んでいただいたようで、SlideShareのView数は「23.6万View（2024年4月現在）」にまで達しました。 わたし的にはもうこれで満足していたのですが、 「会長、今年も例のうんこの話をしていただけませんか」 というオファーがあり、またこのクソみたいな話をすることになったという次第です。 せっかく話をするならばということで、事例やTIPSのページを新たに加え、「2024年
Bento UIとはパネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなUI、View Transitions APIでCSSアニメーションが進化する
Bento UIとはパネルがお弁当箱のように配置されており、各パネルをクリックすると伸び縮みしながら配置が入れ替わるUIです。最近のWebサイトやスマホアプリでもよく見かけるようになりました。そんなBento UIをView Transitions APIを使用して実装されたデモを紹介します。 一昔前なら実装は面倒でしたが、Chrome 111から利用できるView Transitions APIにより簡単に実装できるようになりました。 Rediento -Bento Radio Group Carousel thing 実装にはChrome 111で実装されたView Transitions APIが使用されており、2つの状態間のアニメーションを作成しながら、1ステップでDOMを簡単に変更できます。 各パネルは、CSS Gridでレイアウト。 positionはなし。 ビジュアルのトラン
React NativeのレイアウトエンジンYogaの仕組み [前編] - Adwaysエンジニアブログ
こんにちは、@binaryta です。 先日「React Native OSS ペアプロ会 #3 byFACTBASE」というイベントに参加してきました。 factbase.connpass.com OSSにcommitすることを主眼としていて、React Nativeのissueの問題に解決策を提示したり、解決できそうならPull Requestを送るといった内容です。 このイベントに参加中、レイアウトのバグを直そうとしていた際にYogaを知りYogaに興味を持ちました。 僕は「React Native OSS ペアプロ会」には初回から参加していますが、今後も定期的に開催するみたいなので、興味ある方は是非参加してみてください。 対象 Yogaはクロスプラットフォーム間で共通にレイアウト処理をするべく作られたレイアウトエンジンです。そのためiOSではObjective-C, Android
![React NativeのレイアウトエンジンYogaの仕組み [前編] - Adwaysエンジニアブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/72abfaebb5f46a2b58ed269573255d4ad3c6f6bf/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2FA%2FAdwaysEngineerBlog%2F20180824%2F20180824163608.png)
React Native製アプリのクオリティを上げるために工夫した事
Illustration by unDrawInkdropというMarkdownノートアプリを一人で作っているTAKUYAです。最近、React Nativeを使って、iOS版とAndroid版の新しいバージョンをリリースしました。React Nativeは、JavaScriptとReactを使ってクロスプラットフォームなモバイルアプリが開発できるフレームワークです。 どうすればReact Nativeでハイクオリティなアプリが作れるのか、今回の開発を通して多くのことを学びました。本稿では、よりよいアプリを作るために自分が工夫したことをシェアします。既にReact Nativeでアプリを作っている方も、これから作ろうと思っている方も参考になるかと思います。 概要OSSライブラリは慎重に選ぶネイティブ拡張モジュールは出来るだけ使わないUIテーマの対応タブレットの対応動作を軽く保つ違和感のない
図解！どのサイトを見てもわからなかった人のためのMVC - Qiita
MVCとは UIを持つアプリケーションソフトウェアを実装するためのデザインパターンである。 MVCではプログラムをModel、View、Controllerの3つに分割して書くことで機能の独立化・可読性の向上を図ることができる。 MVCを調べるとこんな感じの説明がでてきたと思います。 でも最初はピンとこないかもしれません。「デザインパターン？」「機能をなんで独立させなくちゃいけないの？」「結局なんのためにMVCにするの？」 今回は10サイトくらい見ても結局わからなかった人のためになるべく難しい言葉を使わずに、図解してわかりやすくMVCについて説明していきます。 日常生活に即して例をみていきましょう 一旦プログラムから離れて、わかりやすいところからMVCについて解明していくことにします。 おじさんのレストラン 子供のころから自分の店を開くことを夢見ていたおじさんが、ついにレストランを開業しま
SwiftのGameplayKitでAIに追いかける、避ける、逃げる処理を追加するには
前回のソースコードはこちらです。今回はこのソースコードを元に機能追加していきます。 フィールドに障害物を配置する まずはAIに「避ける」動作を追加します。フィールド上に障害物を配置し、鬼がそれを避けるような実装をしていきます。 その前に画面に障害物を設置します。今回は障害物は5つランダムに配置される仕様とします。「GameScene.swift」を以下のように修正してください。 class GameScene: SKScene { // 省略 override func didMove(to view: SKView) { player.fillColor = UIColor(red: 0.93, green: 0.96, blue: 0.00, alpha: 1.0) addChild(player) createObstacles() // 今回追加 setCreateEnemyTim
[iOS] 遷移元の画像が遷移先にズームイン・アウトするような画面遷移(UITableView及びUICollectionViewの場合) | DevelopersIO
[iOS] 遷移元の画像が遷移先にズームイン・アウトするような画面遷移(UITableView及びUICollectionViewの場合) 2 画面遷移のカスタマイズ present modallyで画面遷移をカスタマイズする手順は、下記のとおりです。 遷移を表現するクラスを作成 UIViewControllerAnimatedTransitioning 1.を指定するdelegateクラスを作成 UIViewControllerTransitioningDelegate 遷移先ビューのtransitioningDelegateに、2.を設定する 今回は、1.及び2.を実装したクラスCustomTransitionを作成しました。 class CustomTransition: NSObject, UIViewControllerTransitioningDelegate, UIViewC
![[iOS] 遷移元の画像が遷移先にズームイン・アウトするような画面遷移(UITableView及びUICollectionViewの場合) | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/cd616d43627770acf3d2af18695851272d60bed9/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2015%2F12%2Fios.png)
[iOS][Swift3.0] グリーティングカードを開くようなエフェクトが素晴らしいFoldingCell | DevelopersIO
開いている時のView（containerView）内にViewを配置する パタパタと開くためのViewをcontainerView内に配置します。 今回は４つのViewを配置しました。（わかりやすいように、それぞれ背景色を変えています） これらにレイアウトの制約を付けます。上下左右と高さを付けます、それぞのViewの間は０にしました。 containerView内のViewにカスタムクラスの設定する 上記で追加したViewにカスタムクラスとしてRotatedViewを設定しますが、ここで注意するのが、偶数番目に配置したViewのみ設定します。今回は２番めと４番めのViewが該当します。 Cellのプロパティ設定 FoldingCellのプロパティを設定します。 item Countにはパタパタ用に追加したViewの数（今回は４）、Back View Colorにはパタパタした時の裏側の色
![[iOS][Swift3.0] グリーティングカードを開くようなエフェクトが素晴らしいFoldingCell | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/c83d413afe58d904e71a2ee3e849a272825f43c1/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2015%2F01%2Fios_ui.png)
【書評】初学者はもちろん、中級者にもオススメのAuto Layout解説書 - その後のその後
著者の川邉さん（@jeffsuke）および出版社のリックテレコム様より『よくわかるAuto Layout - iOSレスポンシブデザインをマスター』をご献本いただきました。 タイトルの通りAuto Layoutの解説書で、豊富な図やスクリーンショットを用いて、非常にわかりやすく書かれています。前書きによると、本書の対象読者は 過去一度はXcodeを用いてiOSアプリをつくったことがあるが、Auto Layoutとサイズクラスを用いたAdaptive Layoutと言われると尻込みしてしまう開発者 とのこと。 なんかもうベストセラーになったりしてるらしく、 「よくわかるAuto Layout iOSレスポンシブデザインをマスター」発売しました。@tokorom 監修。今、モバイルプログラミング分野でベストセラーらしいです！ https://t.co/wx7ZfuWVdf— Yusuke Ka
WKWebviewを使って、ネイティブ部分とHTMLを同居させて、画像をバインバインさせてみる。 - Qiita
こんな感じにバインバインさせてみたかった。よく見ますよね、こういうアプリ。 WKWebViewベースで、画像はネイティブ部分に置いて、UIScrollViewDelegateの変化度で反応させます。 コードはこんな感じです。 ポイントは、 webView.scrollView.backgroundColorを透明にすること webView.scrollView.contentInsetでcontent部分をズラすこと かな。 import UIKit import WebKit class ViewController: UIViewController, UIScrollViewDelegate { var webView = WKWebView() let topMargin : CGFloat = 300 let sampleImg = UIImageView(image: UIIm
さらなる高みへ〜iOSのMERYでなめらかなスクロールを実現するためにやった4つのこと - peroli Developer's Blog
2016 - 07 - 01 さらなる高みへ〜iOSのMERYでなめらかなスクロールを実現するためにやった4つのこと list Tweet こんにちは。 iOS を主に担当していますアプリエンジニアのkazutoyoです。 MERYのアプリチームでは、チューニングを「さらなる高みへシリーズ」と名づけて、日々アプリの改善をしています。 今回はその中で行ったUITableViewやUICollectionViewのスクロール周りを滑らかにする改善についてやったことをご紹介したいと思います。 1. CALayerで角を丸くしている部分のパフォーマンスが悪い このようなカード型のViewが並んでいるCollectionViewがあったのですが、画像の角を丸くするのにCALayerで cornerRadius をつけているところのパフォーマンスがあまり良くないようでした。 これを次のようにCor
使えば便利なSwiftライブラリたち - Qiita
使ったことがあるものを適当に並べます。 有名ドコロは省いております。 AttributedLabel Labelを多く使うViewがあればおすすめです。 UILabelの機能そのままに、より軽く・ついでに使いやすくしたUIView Cheetah UIViewにアニメーションプロパティを付加できる。 UIViewAnimationはキャンセルしにくかったり、扱いづらい点が多いけど、これがあればUIViewアニメいらず。 popと似ているが書き方がより新しい こんなかんじview.cheetah.duration(0.2).alpha(0).run()でViewごとにanimation管理できるのが良い Kingfisher 非同期画像取得。書き方古いですが便利です ColorAdjuster 色の調整。明度や彩度・色相、などを簡単にいじれる あとグラデーションの生成もある SpringIn
[Swift] 簡単に、かっこいいアニメーションアラートが表示できる、SCLAlertViewについて | DevelopersIO
[Swift] 簡単に、かっこいいアニメーションアラートが表示できる、SCLAlertViewについて 1 はじめに SCLAlertViewは、Swiftで書かれた、アニメーションアラートビューで、UIAlertControllerの代わりに使用することができます。 SCLAlertViewは、MITライセンスで公開されており、CocoaPodで簡単にインストールが可能です。 pod 'SCLAlertView' （※Swiftのライブラリなので、use_frameworks!の行を有効にする必要があります。） 参考：CocoaPodsによる、外部ライブラリの利用と作成 なお、2016年3月現在、最新は、0.5.1です。 ライブラリの導入後は、下記のインポートで利用可能になります。 import SCLAlertView 2 使用方法 (1) 最初のサンプル もっとも、簡単な利用方法は次
![[Swift] 簡単に、かっこいいアニメーションアラートが表示できる、SCLAlertViewについて | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/4b9b98d8423d1943cae402d21764bf51589e811b/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2014%2F11%2Flogo_swift_400x400.png)
UICollectionViewControllerとUIPageViewControllerでSmartNewsっぽいあのUIをお手軽に実現する - Qiita
UICollectionViewControllerとUIPageViewControllerでSmartNewsっぽいあのUIをお手軽に実現するiOSUIKitSwift イントロダクション 国内のメディア系サービスでは割とスタンダードとなっているあのUI。もはや何番煎じかわかりませんが、frame計算とかをしない軽量な実装を試してみます。 ニュース系アプリで利用されているUIの実装を調べることがあったのでまとめてみた - MonockLaBlog あのUIに関する記事やよく見かけるライブラリでは、メニュー要素・コンテンツ要素のframeをずらしながらUIScrollViewへ順に貼り付けていくやり方が多い印象を持っていますが、ここでは違う方法を取ろうと思います。 サードパーティのライブラリに依存することなく、かつViewのリソース管理やframe計算を出来るだけ抑えるため、今回はUIC
3D TouchをUINavigationControllerに入れて新しいUXを作ってみた - Qiita
まず始めに iPhone6s、iPhone6s plusから3D Touchが使えるようになりました。3D Touchを使った表現にはPeek and PopやQuick Actionsなどありますが、それ以外の部分で具体的にどういった部分に導入すれば良いかというものは決まっていない印象があります。いろいろと導入箇所を検討してみたところ、UINavigationControllerの履歴と紐付けたら面白いのではないかと考えました。 そこで、元々リリースしていたSAHistoryNavigationViewControllerというUINavigationControllerの履歴を表示し任意のViewControllerまで戻れるライブラリに、3D Touchを追加してみました。 追加してみた結果のGIFアニメーションが以下になります。 実装のポイント 以下が実装時のポイントです。 UIN
Creating Scroll-based Animations using jQuery and CSS3 — SitePoint
Creating movement is great way to provide an interesting and interactive experience for your viewers. With modern sites providing a greater deal of interactivity, it’s becoming increasingly expected that even simple websites will offer some level of animation / movement to engage their visitors. Today I will be outlining a technique that you can adapt to your web projects – triggering animations w
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「女性同士のマウンティング」に関する研究論文が興味深くView数が少ないのがもったいないレベル 具体的なエピソードもなかなかすごい