S h i f t e r ɺ Wo rd P re s s αΠ τ Λ Ұ ࿈ ͷ ੩ త H T M L ϑ ΝΠϧ ʹ ม ͠ ɺ C D N Λ հ ͯͦ͠ Ε Β Λ ఏ ڙ ͢ Δ ͜ ͱ Ͱ ι ϑ τ Σ Ξ อ क α ʔό ཧ ͷ ෛ ୲ Λ ഉ আ ͠ · ͢ɻ #getshifter
M o s t p o p u l a r c o n t e n t m a n a g e m e n t s y s t e m s h t t p s : / / w 3 t e c h s . c o m /
s i n c e 1 J a n u a r y 2 0 1 7 Usage Change Since 1 January 2017 Market Share Change Since 1 January 2017 1.WordPress 27.5% +0.2% 58.7% +0.2% 2.Joomla 3.3% -0.1% 7.1% -0.1% 3.Drupal 2.2% 4.8% #getshifter
ɾ Wo rd P re s s C o re ͷ Ξ οϓ σ ʔ τ ͕ ස ൟ ͢ ͗ Δ ɾ Wo rd P re s s P l u g i n ͕ ੬ ऑ ɾ Wo rd P re s s T h e m e ͕ ෳ ࡶ Ͱ ϝ ϯ ς ෆ ೳ ɾ ͦ ͦ … P H P M y S Q L ͳ Ͳͷ ϛ υϧ Σ Ξ ʹ #getshifter
L I F E C Y C L E 1. DockerͰWordPressΛߋ৽࣌ʹىಈ (Editorʣ 2. AWS ͷϦιʔεͰ੩తHTMLʹม (Generator) 3. CDN͔ΒίϯςϯπΛ৴ (Contents Delivery) A R C H I T E C T U R E #getshifter
- E d i t o r ʢ D o c k e r + E F S + l a m b d a + A u ro r a ) - G e n e r a t o r ʢ l a m b d a + A P I G W + D y n a m o D B ) - C o n t e n t s D e l i v e r y ʢ S 3 + C l o u d F ro n t / N e t l i f y ) # S E R V I C E C O R E ͷ ։ ൃ #getshifter
E D I T O R ։ ൃ ͷ T I P S • Docker for AWSͰ docker-volume-netshare ʹΑΔAmazon EFSϚϯτΛՄೳʹ͢Δ • Docker for AWS ͷSwarmAPIΛ֎෦͔ΒΞΫηεՄೳʹ͢Δ • Load Balancer(ELBͳͲ)ʹͿΒԼ͛ͨDocker Private RegistryͰɺdocker push͕`blob upload unknown`ʹͳΔ߹ͷઃఆ • Docker Swarm ͱ Amazon Elastic File System (Amazon EFS) ɻ͍ͭͰʹELB • Dockerίϯςφ for AWS & ShifterͰDocker for AWSΛ͍ͬͯΔ
S H I F T E R ϩ ʔϯ ν · Ͱ ͷ 1 1 9 ؒ Ͱ ͬ ͨ ͜ ͱ • Service Core • Branding • Dashboard • Payment • Web & Marketing Automation • Support & Documents #getshifter
N A M I N G Naming Presentation The right name is timeless, tireless, easy to say and remember; it stands for something, and facilitates branded elements. The right name captures one’s imagination and connects with one’s target audience. DigitalCube, Inc. #getshifter
C O N C E P T Digital Cube What to Think About Does concept project the Product Is there a story behind the concepts Does the concept differentiate the product Does it speak to audience Does it feel progressive #getshifter
C O N C E P T Digital Cube Design Attributes Simple Vibrant Accessible Intelligent Modern Fun #getshifter - γϯϓϧ - ׆ؾͷ͋Δ - ΞΫηεՄೳͳ - ΠϯςϦδΣϯτͳ - Ϟμϯ - ָ͍͠
Introducing Shifter A groundbreaking hosting solution that brings serverless architecture to the WordPress platform for the first time. It seamlessly transforms your site into a series of static HTML files, so you can concentrate on the day-to-day without having to worry about WordPress maintenance, server updates, or scalability. Only Shifter delivers the built-in security and adaptability of WordPress with the breakneck speed of static technology. Prepare to go further, faster—all around the world.
W E B D E V E L O P M E N T • ελΠϧΨΠυ • Newsletter ςϯϓϨʔτ • MauticͰ؆୯ͳΩϟϯϖʔϯΛ࡞Δ https://speakerdeck.com/hideokamoto/mauticdejian-dan- nakiyanpenwozuo-ru #getshifter
Logo Usage / Incorrect Logo Usage 13 The logo should not be altered in any way. Always scale the logo proportionally. Do not change the colors of the logo, and be sure that there is enough contrast between the logo and the background. LOGO USAGE / INCORRECT LOGO USAGE Incorrect Logo Usage DON’T STRETCH THE LOGO Make sure the logo proportion is correct, don’t stretch the elements. DON’T SWAP LOGO COLORS Do not rearrange the colors within the logo. MAKE SURE THE FULL COLOR VERSION IS LEGIBLE ON A COLORED BACKGROUND Contrast is important for readability. DON'T ALTER THE ELEMENTS OF THE LOGO The spacing of the logo is vey important. Do not manipulate the image. Color Palette 17 The following selected colors are used to help define and distinguish the brand. The Pantone (PMS), CMYK, RGB, and HEX # color references are outlined here. PMS The PMS color should be used for professional, offset printing, and is best displayed on a white background. PMS colors are only supported by .EPS format. CMYK The CMYK logo should be used in digitally printed pieces that require CMYK printing and full color images. CMYK colors are supported by .EPS, .JPG, and .PNG format. RGB The RGB logo should be used for online usage. RGB colors are supported by .EPS, .JPG, and .PNG format. HEX # HEX # colors should be used in online applications. COLOR PALETTE PMS 1925 CMYK C0 / M97 / Y54 / K0 RGB R251 / G28 / B87 HEX# FB1C56 PMS 254 CMYK C25 / M82 / Y0 / K0 RGB R189 / G82 / B158 HEX# BC519E EVEN GRADIENT OF THE ABOVE COLORS, PURPLE TO RED (LEFT TO RIGHT) PMS BLACK CMYK C0 / M0 / Y0 / K100 RGB R0 / G0 / B0 HEX# 000000 Typography 19 TYPOGRAPHY The consistent application of a limited number of fonts will reinforce the brand and graphic identity, and give communications a cohesive look. Sans Serif MONTSERRAT Montserrat is the main identity font. The regular weight should be most frequently used, however alternate weights are acceptable as necessary. Arial can be used when Montserrat is not available. Aa Montserrat Thin ABCDEFGHIJKL NOPQRSTUVWXYZ abcdefghijklmnop qrstuvwxyz 0123456789 Aa Montserrat Regular ABCDEFGHIJKL NOPQRSTUVWXYZ abcdefghijklmnop qrstuvwxyz 0123456789 Aa Montserrat Bold ABCDEFGHIJKL NOPQRSTUVWXYZ abcdefghijklmnop qrstuvwxyz 0123456789 Monospace SPACE MONO FAMILY Space Mono can be used to activate different types of content including numerals and data. The regular weight should be most frequently used, however alternate weights are acceptable as necessary. Courier can be used when Space Mono is not available. Aa Space Mono Regular ABCDEFGHIJKL NOPQRSTUVWXYZ abcdefghijklmnop qrstuvwxyz 0123456789 Aa Space Mono Bold ABCDEFGHIJKL NOPQRSTUVWXYZ abcdefghijklmnop qrstuvwxyz 0123456789 S T Y L E G U I D E #getshifter
- A m a z o n C o g n i t o - A P I G a t e w a y + l a m b d a + D y n a m o D B - N e t l i f y - S e r v e r l e s s f r a m e w o r k - S w a g g e r # D A S H B O A R D ͷ ։ ൃ #getshifter
D A S H B O A R D ։ ൃ ͷ T I P S • Amazon Cognito User PoolsΛͬͯɺwebαΠτʹϢʔβ ೝূج൫Λ࡞Δ • Netlify REST APIͰNetlifyʹαΠτΛσϓϩΠɾߋ৽ɾআ ͢Δ • Amazon API Gateway ͷ Custom AuthorizerΛ͍ɺUser PoolsͷϢʔβͰAPIೝূΛߦ͏ • Serverless FrameworkͰߦ͏ܧଓతΠϯςάϨʔγϣϯͷ εεϝ • Serverless FrameworkͰߦ͏ܧଓతΠϯςάϨʔγϣϯͷ εεϝ ͦͷ2 ~DynamoDBʹଓͯ͠ͷࣗಈςετ~ • AWS SDKΛͬͯAWSڥʹΞΫηεͤͣʹϢχοτς ετΛճ͢ํ๏ • Cognito User PoolsͰemail verification messageͷϝʔϧૹ ৴ΛຊޠͰߦ͏ํ๏ • API Gateway+Lambda+Serverless+TravisͰAPI։ൃͷCI/CD ύΠϓϥΠϯΛߏங͢Δ • CircleCI͔ΒServerless FrameworkͷσϓϩΠΛ࣮ߦ͢Δ • CodePipelineͰServerless FrameworkͷσϓϩΠΛཧ͢ Δ
• Amazon Cognito User PoolsΛͬͯZendeskͷϔϧϓηϯλʔʹγϯ άϧαΠϯΦϯΛߦ͏ http://qiita.com/horike37/items/6565003446bf24c6e568 • SwaggerͰఆٛͨ͠APIΛServerless FrameworkʹΠϯϙʔτ͢Δ https://wp-kyoto.net/serverless-import-swagger/ • Shifter CLI https://github.com/getshifter/wp-cli-shifter/blob/master/README.md Z E N D E S K & S WA G G E R & C L I ։ ൃ ͷ T I P S #getshifter
digitalcube
imsaku
ramimac
mamohacy
nori_shinoda
mixi_engineers
yurihondo
kyonmm
tkhresk
yukihiromori
datarian
tammyeverts
quramy
chriscoyier
bkeepers
sstephenson
iamctodd
chrisshort
paigeccino
tenderlove
sachag
soudai
scottboms
jasonvnalue