1

How to build an iPhoneEbook App

Nozomi Entertainment LLC

2

Index

Basic Set up the slider value Set up the index Set up the app name

How to change the image How to add a website link How to send an email from your

app Trouble Shooting

Enjoy Building an ebook app

“Learn how to use Xcode” for biginners

3

Basic１ PreparationBefore building your book app, you need to

prepare(1) ICONS57px*57px png file: file name should be

“ICON.png”72px *72px png file:file name should be

“ICON-72.png”114px*114px png file:file name should be

“ICON@2x.png”

(2)Book Cover320*480px png file: file name should be

“Default.png”640*960px png file: file name should be

“Default@2x.png”640*1136px png file: file name should be

“Default-568h@2x.png”

(3)PDF filefile name should be “sample.pdf”

4

Send ebook project file to your Mac PC.

Basic2

back

①

②

Read free Instruction

Send③

5

①click the center ofthe view of this appand ②Go back to top page.③Click “Send”button.

・You need to install Xcode to your Macintosh to run the project. You can obtain Xcode from Mac App Store for free. *To run Xcode on your Mac, you will need a Macintosh OS Lion or later. If you DON’T have Macintosh in which Xcode is installed, you CANNOT create an ebook app even if you download ebookproject.*If you wish to sell your apps on App Store, you need to join Apple iOS Developer Program which costs $99 a year.*Price for Xcode and iOS Developer Program is subject to change.

6

Send ebook project file to your Mac PC.

Basic3

Cancel Send

To

ebook.zip

①

②

7

①Mailer will start up. Write down your PC address②And click “send”.

8

Basic4 Drag and Drop your PDF

update.xcodeproj

Sample.pdf

ICON.PNG

… … … …

“ICON.png”“ICON-72.png”“ICON@2x.png”“Default.png”“Default@2x.png”“Default-568h@2x.png”“sample.pdf”

Open the zip file on yourMac. Drag and drop your PDF, Icons, covers to the“ebook” folder.You will get a message askingIf you want to overwrite the files.Please select YES for all files.

9

Find the file named “update.xcodeproj”.Double click on it.

update.xcodeproj

Sample.pdf

ICON.PNG

… … … …

10

Basic5 Check the files1

update.

classes.

resources.

Run. Stop Scheme Editor View

①

Sample.pdf ③

11

Let’s check if your files are added properly to the tree.①Click the triangles beside folders to show the files contained.②Make sure all the files appear on the tree.③If any files are missing or shown in red,you cannot run the project

properly.Follow the instruction on the next page to add filesagain. *It doesn’t matter even if “projectname.app”File is in Product folder is shown in red.

12

update.

classes.

resources.

Run. Stop Scheme Editor View---

Sample.pdf

Sample.pdf

13

If any files are missing or shown in red on the tree,Drag-and-drop the file into resourceFolder.

14

update.

classes.

resources.

Run. Stop Scheme Editor View---Choose Options for adding these files.

Destination □Copy items Into destination group’s folder(if needed)

Folders ○Create groups for any added folders○Create folder reference for any added folders

Add target □project name

Finishcancel

レ

レ

レ

①

②

15

①Make sure three boxes shown in the previous page are checked.②Click “Finish”.

16

Basic6 Check the files2

update.

classes.

resources.

Run. Stop Scheme Editor View

PROJECTUpdate

TARGETupdate

Summery Info BuildSettings Build Phases BuildRules

Target dependances

Copy bundle resources

①

②

③

④

＋ － ⑤

17

Let’s check if your files are added properly.①Click the name of the project②Click the name of the project under “TARGET”③Click “Build Phases”④Click the triangle beside “Copy bundle resources”To show the files. Make sure all the files are shownOn the list. ⑤If any files are added twice or more, deleteDuplicated file from the list.

18

update.

classes.

resources.

Run. Stop Scheme Editor View

PROJECTUpdate

TARGETupdate

Summery Info BuildSettings Build Phases BuildRules

Target dependances

Copy bundle resources

① ＋ －

Choose items to add

PDFViewController.mPDFViewCOntroller.hhowtouseViewController.mhowtouseviewController.h…………

Candel AddAdd Other

②

③

19

If any files are missing,①Click “+”②Select the files and click add.③If the file is not shown on the list, you can drag-and-drop a file from the tree to “copy bundle resources.

20

update.

classes.

resources.

Run. Stop Scheme Editor View---

Basic7

①③

Run the Project

Xcode File Edit View Navigate Editor Product Window Help

②

21

①Click Scheme and select “iPhone6.0 Simulator”

②Click “Product” and select “Clean”

③Click “Run”

You can test your appOn the simulator.

22

update.

classes.

resources.

Run. Stop Scheme Editor View---

Set up the slider value

①

②

③④

PDFView Controller.xib

<intkey="IBUIContentHorizontalAlignment">0</int>

<intkey="IBUIContentVerticalAlignment">0</int>

<float key="IBUIValue">0.5</float>

<float key="IBUIMinValue">1</float>

<float key="IBUIMaxValue">12</float>

<boolkey="IBUIContinuous">NO</bool>

</object>

23

①Click the first button on the View section to show file tree.②Click the triangle to show the files in the folder.③Find “PDF View Controller.xib” file and right click (Control+click) the file name.Choose “Open As” then “Source Code”.

④Edit the file.Find “MaxValue” and set the number.Default setting is 12.If your PDF contains 200 pages, delete 12 and put 200 instead.

24

update.

classes.

resources.

Run. Stop Scheme Editor View---

Set up the index

Menu View Controller.m

- (void)viewDidLoad{arryData = [[NSArray alloc]

initWithObjects:@”first”,@“second”,@“third",@"forth",nil];

arryData2 = [[NSArray alloc] initWithObjects:”@”1”,@”2”, ”@”5”,@”7”,nil];

[super viewDidLoad];

// Do any additional setup after loading the view from its nib.}

①

②

③

25

①Open Menu View Controller.m in Classes Folder.

②Set up the sentence of the index.If your index isChapter1…page1Capter2…page5Chapter3…page10Chapter4…page15Chapter5…page20Set up the arryData like this:initWithObjects:@”Chapter1”,@“Chapter2”,@“Chapter3",@“Chapter4", @“Chapter5", nil];③Set up which page to jump.For example above, set up the arryData2 like this:initWithObjects:@”1”,@“5”,@“10",@“15", @“20", nil];

26

Set up the app name

Infomation Property ListLocaliztaion native development regBundle display nameExecutable fileIcon fileBundle IdentifierInfo Dictionary versionBundle name

classes.

resources.

Run. Stop Scheme Editor View---

Update-info.plist

update.①

②

27

①Check the name of the project. In this case, project name is “update”.②Open (project name)-info.plist file. In this case, you should open “update-info.plist” file.Info-plist file is in the resource folder.

③Change the data of your app. You need at least change app name. Localization・・・JapanBundl Display Name・・・Name of your app to display on the user’s iPhone under the icon.Bundle Name・・・The name of the app.④That’s about it. To upload this app to iTunes Connect, please follow “iTunes Connect Developer Guide”

28

update.

classes.

resources.

Run. Stop Scheme Editor View---

How to change the image

PDF View Controller.m①

_imageView = [[UIImageViewalloc] initWithImage:[UIImageimageNamed:@"howtophone.jpg"]];

}

②

29

When an user click “?” button, “how to phone.jpg” will appear. But this file is written in Japanese and not very useful for English speakers.So let’s change the image.①Open “howtouseViewController.m”②find_imageView = [[UIImageView alloc]

initWithImage:[UIImageimageNamed:@"howtophone.jpg"]];

③Change howtophone.jpg to the name of your file you want to use.

30

update.

classes.

resources.

Run. Stop Scheme Editor View---

Img.jpg

Drag-and-drop the image you want to use into resource folder.

31

update.

classes.

resources.

Run. Stop Scheme Editor View---

①Make sure three boxes shown above are checked.②Click “Finish”.

Choose Options for adding these files.Destination □Copy items Into destination group’s folder(if needed)

Folders ○Create groups for any added folders○Create folder reference for any added folders

Add target □project name

Finishcancel

レ

レ

レ

①

②

32

update.

classes.

resources.

Run. Stop Scheme Editor View---

①Index ?②

Xcode File Edit View Navigate Editor Product Window Help

③

33

①Run the Project.②Ｉf you click on ? button, the image you have specified should appear.③If the image has not changed, try Product→Clean and click Run again.

34

update.

classes.

resources.

Run. Stop Scheme Editor View---

How to add a website link

PDF View Controller.m①

- (IBAction)howto:(id)Sender{_slider.hidden = YES;_navi.hidden = YES;_navi2.hidden = YES;

_mainScrollView.scrollEnabled =YES;_subScrollView.scrollEnabled =YES;

howtouseViewController *howto = [[howtouseViewController alloc] init];

[self.view addSubview:howto.view];

}

②

35

①Open “PDF View Controller.m”②find- (IBAction)howto:(id)Sender③deletehowtouseViewController *howto = [[howtouseViewController alloc] init];

[self.viewaddSubview:howto.view];④write down this instead:NSURL *url = [NSURL URLWithString:@"http://yahoo.co.jp"];

[[UIApplication sharedApplication] openURL:url];⑤Change http://yahoo.co.jp to whatever the address you want to link.

36

update.

classes.

resources.

Run. Stop Scheme Editor View---

①

②

③PDFView Controller.xib

<object class="IBUIBarButtonItem" key="IBUIRightBarButtonItem" id="546231066"><string key="IBUITitle">?</string> <string key="targetRuntimeIdentifier">IBCocoaTouchFramework</string> <intkey="IBUIStyle">1</int>

<reference key="IBUINavigationItem" ref="534624662"/>

</object>

④

37

①Now let’s change the button title.Click the first button on the View section to show file tree.②Click the triangle to show the files in the folder.③Find “PDF View Controller.xib” file and right click (Control+click) the file name.Choose “Open As” then “Source Code”.④Edit the file.Find <string key="IBUITitle">?</string> Change “?” to “web”.<string key="IBUITitle">web</string>

38

update.

classes.

resources.

Run. Stop Scheme Editor View---

①Index WEB②

39

①Run the Project.②You can see that button title has changed to “web”and if you click on it Safari starts up and jump to the website you have specified.

40

How to send an email from your app

update.

classes.

resources.

Run. Stop Scheme Editor View---

PDF View Controller.m①

- (IBAction)howto:(id)Sender{_slider.hidden = YES;_navi.hidden = YES;_navi2.hidden = YES;

_mainScrollView.scrollEnabled =YES;_subScrollView.scrollEnabled =YES;

howtouseViewController *howto = [[howtouseViewController alloc] init];

[self.view addSubview:howto.view];

}

②

41

①Open “PDF View Controller.m”②find- (IBAction)howto:(id)Sender

③deletehowtouseViewController *howto = [[howtouseViewController alloc] init];

[self.viewaddSubview:howto.view];

④write down this instead:[[UIApplication sharedApplication] openURL:[NSURLURLWithString:@"mailto:hoge@hoge.com"]];⑤Change hoge@hoge.com to whatever the address you want.

42

update.

classes.

resources.

Run. Stop Scheme Editor View---

①

②

③PDFView Controller.xib

<object class="IBUIBarButtonItem" key="IBUIRightBarButtonItem" id="546231066"><string key="IBUITitle">?</string> <string key="targetRuntimeIdentifier">IBCocoaTouchFramework</string> <intkey="IBUIStyle">1</int>

<reference key="IBUINavigationItem" ref="534624662"/>

</object>

④

43

①Now let’s change the button title.Click the first button on the View section to show file tree.②Click the triangle to show the files in the folder.③Find “PDF View Controller.xib”file and right click (Control+click) the file name.Choose “Open As” then “Source Code”.④Edit the file.Find <string key="IBUITitle">?</string>Change “?” to “email”.<string key="IBUITitle">email</string>

44

update.

classes.

resources.

Run. Stop Scheme Editor View---

①Index Email②

45

①Run the Project.②You can see that button title has changed to “email” and if you click on it mailer starts up and you can send an email to the address you have specified.

46

Trouble Shooting If you are not a xcode4.5 user

update.

classes.

resources.

Run. Stop Scheme Editor View

PROJECTUpdate

TARGETupdate

Summery Info BuildSettings Build Phases BuildRules

Bundle IdentifierVersionDevicesDevelopment target 4.3

47

If you are using xcode older than 4.5, you might have toSet development target to run the project.Click the project name→Target→SummeryAnd set development target lower to fit your xcode version.

48

Trouble Shooting Drag-and-drop doesn’t work.

<ICONS/ Launch Images>Please delete the icon files in the tree and try drag and dropAgain.If that does not work, click project name on the tree,Go to Target→Summery. Scroll down and find “App Icons”.“Launch Images”. Drag and drop your Icons and cover filesthere.<PDF>①Rename your pdffile.(e.g.”sample2.pdf”)②Open PDF View Controller.m.

49

NSURL* url;path = [[NSBundle mainBundle] pathForResource:@"sample" ofType:@"pdf"];url = [NSURL fileURLWithPath:path];_document = CGPDFDocumentCreateWithURL((CFURLRef)url);

③If your new file name is “sample2.pdf”,change the code like this:path = [[NSBundle mainBundle] pathForResource:@"sample2" ofType:@"pdf"];

④Drag-and-drop your renamed pdf.

50

Trouble Shooting

multiple errors occurred while copying the files.

This error occurs when resource files are not linked properly.

Follow the instruction on page 7-11 and make sure all the files are added properly.

If there is any files missing, or added twice or more, this error will occur.

51

ENJOY!

update.

classes.

resources.

Run. Stop Scheme Editor View---