Ruby on Railsを使った開発イメージをRuby on Railsを触ったことがないデベロッパー向けに発表しましたので、公開します。
*発表時より、Railsを使った実際の構成例を紹介するスライドを追加しています。
このイベントです。
https://general.connpass.com/event/63492/
Ruby on Railsを使った開発イメージをRuby on Railsを触ったことがないデベロッパー向けに発表しましたので、公開します。
*発表時より、Railsを使った実際の構成例を紹介するスライドを追加しています。
このイベントです。
https://general.connpass.com/event/63492/
React Native is an open source framework by Facebook that enables software engineers to build world-class application experiences on native platforms using a consistent developer experience based on JavaScript and React. I'll talk about what React Native actually is (and what it isn't), how it works under the hood, and why it was designed like that.
React Native Introduction: Making Real iOS and Android Mobile App By JavaScriptKobkrit Viriyayudhakorn
React Native is a new technology that allows building real mobile apps using only JavaScript. It is a JavaScript framework for writing, debugging, and deploying both iOS and Android mobile applications with native experience. React-Native allows developers to share about 80% of code between iOS and Android which make the development is 5x faster than traditional means. React-Native libraries are created by Facebook released in March 2015. It was proven by many world-class mobile applications, such as Facebook, Facebook Ads Manager, TaskRabbit, QQ, Discord, SoundCloud, etc.
Intro To React Native
with Varun Vachhar
OVERVIEW
React Native introduces a new way to write native mobile apps. You can take everything that you know and love about React and apply it to native apps. Unlike hybrid apps, it gives you access to both native APIs and UI components. The application logic uses JavaScript whereas, the UI is fully native! It also brings the best of the web to native, things like – flexbox layout model, XMLHttpRequest, requestAnimationFrame, etc.
OBJECTIVE
To introduce the audience to React Native. Show how they can leverage their knowledge of web development to build native apps.
TARGET AUDIENCE
Developers familiar with React who are interested in building native mobile apps.
ASSUMED AUDIENCE KNOWLEDGE
Basic knowledge of React, ES6 and CSS.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
What is React Native
How it is an extension of hybrid
How to use polyfills to leverage the best of the web while getting native performance
How to debug React Native apps
How to use Flexbox and CSS for styling a React Native app
What's This React Native Thing I Keep Hearing About?Evan Stone
In our daily lives as iOS developers, we can usually happily keep coding away in Swift and ignore what’s going on in other software development communities, like that of JavaScript. However, there may be some advantages to at least becoming familiar with what’s going on in the world of React Native, and in this session you will get an overview of what React Native is, and why it could be a useful addition to your toolbox an iOS developer.
These slides are based on a talk given by Evan K. Stone at the Forward Swift conference in San Francisco on March 2, 2017.
Next2Dで始めるゲーム開発 - Game Development Starting with Next2DToshiyuki Ienaga
CEDEC2022に応募したのですが、見事に落選しました。
が、折角作った資料なので公開します。
I applied for CEDEC2022, but was not selected.
However, I am publishing this document because I made it at an opportunity.
初めての Raspberry pi 〜プラレールをunityの世界の中で走らせよう〜 (1)dcubeio
ハードウェアを触ったことのない Web エンジニアが Raspberry Pi Zero W で初めての開発を行った際の悲喜こもごもをお話をします。
先日行われたリタリコ社のワンダーメイクフェスにて、来場されたお子様たちにプロダクト開発の楽しさを体験してもらおうという目的で作った制作物のお話です。
Unity の 3D 空間上で走っている電車とプラレールの走行を同期させて一律でコントロールできるようにし、お子さんがその場で作った 3D オブジェクトを 3D 空間にリアルタイムに追加していけるプロダクトを目指して開発しました。
(お子様の体験としてはこちらのプロダクトと近いかもしれません: https://www.team-lab.com/sketchaquarium )
ワンダーメイクフェス: https://wonder.litalico.jp/event/fes/
19. React Native の裏側を覗く
function createProject(name, verbose, rnPackage) {
var root = path.resolve(name);
var projectName = path.basename(root);
console.log(
'This will walk you through creating a new React Native project in',
root
);
if (!fs.existsSync(root)) {
fs.mkdirSync(root);
}
・・・
24. React Native の裏側を覗く
/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional
grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
'use strict';
require('./packager/babelRegisterOnly')([
/private-cli¥/src/
]);
module.exports = require('./local-cli/cli.js');
32. React Native の裏側を覗く
/**
* Creates the template for a React Native project given the provided
* parameters:
* @param projectDir Templates will be copied here.
* @param argsOrName Project name or full list of custom arguments
* for the generator.
*/
function init(projectDir, argsOrName) {
console.log('Setting up new React Native app in ' + projectDir);
const args = Array.isArray(argsOrName)
? argsOrName // argsOrName was e.g. ['AwesomeApp', '--verbose']
: [argsOrName].concat(process.argv.slice(4)); // argsOrName was e.g.
'AwesomeApp’
・・・続く
33. React Native の裏側を覗く
・・・続き
// args array is e.g. ['AwesomeApp', '--verbose']
if (!args || args.length === 0) {
console.error('react-native init requires a project name.');
return;
}
const newProjectName = args[0];
const options = minimist(args);
generateProject(projectDir, newProjectName, options);
}
52. React Native の裏側を覗く
# Copyright (c) 2015-present, Facebook, Inc.
# All rights reserved.
#
# This source code is licensed under the BSD-style license found in the
# LICENSE file in the root directory of this source tree. An additional
grant
# of patent rights can be found in the PATENTS file in the same directory.
# 2048 is the max for non root users on Mac
ulimit -n 2048
60. React Native の裏側を覗く
function runIOS(argv, config, args) {
process.chdir(args.projectPath);
const xcodeProject = findXcodeProject(fs.readdirSync('.'));
if (!xcodeProject) {
throw new Error('Could not find Xcode project files in ios folder');
}
・・・中略
if (args.device) {
・・・中略
} else {
return runOnSimulator(xcodeProject, args, inferredSchemeName, scheme);
}
}
61. React Native の裏側を覗く
function runOnSimulator(xcodeProject, args, inferredSchemeName, scheme){
return new Promise((resolve) => {
try {
var simulators = JSON.parse(
child_process.execFileSync('xcrun', ['simctl', 'list', '--json',
'devices'], {encoding: 'utf8'})
);
} catch (e) {
throw new Error('Could not parse the simulator list output');
}
const selectedSimulator = findMatchingSimulator(simulators,
args.simulator);
if (!selectedSimulator) {
throw new Error(`Could not find ${args.simulator} simulator`);
}
・・・
62. React Native の裏側を覗く
Usage: xcrun [options] <tool name> ... arguments ...
Find and execute the named command line tool from the active developer directory.
The active developer directory can be set using `xcode-select`, or via the
DEVELOPER_DIR environment variable. See the xcrun and xcode-select manualpages for
more information.
63. React Native の裏側を覗く
・・・
const simulatorFullName = formattedDeviceName(selectedSimulator);
console.log(`Launching ${simulatorFullName}...`);
try {
child_process.spawnSync('xcrun', ['instruments', '-w',
selectedSimulator.udid]);
} catch (e) {
// instruments always fail with 255 because it expects more arguments,
// but we want it to only launch the simulator
}
resolve(selectedSimulator.udid)
})
・・・
67. React Native の裏側を覗く
#!/bin/bash
# Copyright (c) 2015-present, Facebook, Inc.
# All rights reserved.
#
・・・中略
case "$CONFIGURATION" in
Debug)
# Speed up build times by skipping the creation of the offline package
for debug
# builds on the simulator since the packager is supposed to be running
anyways.
if [[ "$PLATFORM_NAME" == *simulator ]]; then
echo "Skipping bundling for Simulator platform"
exit 0;
fi
・・・
70. vim [react-native init したディレクトリ]/[アプリ名]/node_modules/react-
native/React/React.xcodeproj/project.pbxproj
React Native の裏側を覗く
71. React Native の裏側を覗く
#!/bin/sh
if [ -z "${RCT_NO_LAUNCH_PACKAGER+xxx}" ] ; then
if nc -w 5 -z localhost 8081 ; then
if ! curl -s "http://localhost:8081/status" | grep -q "packager-
status:running" ; then
echo "Port 8081 already in use, packager is either not running or not
running correctly"
exit 2
fi
else
open "$SRCROOT/../packager/launchPackager.command" || echo "Can't start
packager automatically"
fi
fi
72. vim [react-native init したディレクトリ]/[アプリ名]/node_modules/react-
native/packager/launchPackager.command
React Native の裏側を覗く
73. React Native の裏側を覗く
#!/usr/bin/env bash
# Copyright (c) 2015-present, Facebook, Inc.
# All rights reserved.
・・・中略
# Set terminal title
echo -en "¥033]0;React Packager¥a"
clear
THIS_DIR=$(dirname "$0")
pushd "$THIS_DIR"
source ./packager.sh
popd
echo "Process terminated. Press <enter> to close the window"
read
74. vim [react-native init したディレクトリ]/[アプリ名]/node_modules/react-
native/packager/packager.sh
React Native の裏側を覗く
75. React Native の裏側を覗く
#!/usr/bin/env bash
# Copyright (c) 2015-present, Facebook, Inc.
# All rights reserved.
#
# This source code is licensed under the BSD-style license found in the
# LICENSE file in the root directory of this source tree. An additional
grant
# of patent rights can be found in the PATENTS file in the same directory.
THIS_DIR=$(dirname "$0")
node "$THIS_DIR/../local-cli/cli.js" start "$@"
76. vim [react-native init したディレクトリ]/[アプリ名]/node_modules/react-
native/local-cli/server/server.js
React Native の裏側を覗く
77. React Native の裏側を覗く
/**
* Starts the React Native Packager Server.
*/
function server(argv, config, args) {
・・・中略
console.log(formatBanner(
'Running packager on port ' + args.port + '.¥n¥n' +
'Keep this packager running while developing on any JS projects. ' +
'Feel free to close this tab and run your own packager instance if you ' +
'prefer.¥n¥n' +
'https://github.com/facebook/react-native', {
marginLeft: 1,
marginRight: 1,
paddingBottom: 1,
})
);
・・・中略
runServer(args, config, () => console.log('¥nReact packager ready.¥n'));
}
78. vim [react-native init したディレクトリ]/[アプリ名]/node_modules/react-
native/local-cli/server/runServer.js
React Native の裏側を覗く