[Java] [Rails] Implementation of tutorial function

1 minute read

Target

ezgif.com-video-to-gif.gif

Development environment

・ Ruby: 2.5.7
Rails: 5.2.4
・ Vagrant: 2.2.7
-VirtualBox: 6.1
・ OS: macOS Catalina

Premise

The following has been implemented.

Slim introduction
Implementation of posting function

Implementation

1. Download the required files from Github

intro.js Github

② Click Code.

スクリーンショット 2020-07-16 10.21.02.png

③ Copy the URL.

スクリーンショット 2020-07-16 10.21.07.png

④ Clone the repository.

Terminal


$ git clone [email protected]:usablica/intro.js.git

⑤ Move ʻintro.js and ʻintrojs.css in the cloned directory into the application.

スクリーンショット 2020-07-16 10.27.41.png

2. Introduce Gem

Gemfile


#Postscript
gem 'jquery-rails'

Terminal


$ bundle

3. Edit ʻapplication.js`

application.js


//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery //Postscript
//= require_tree .

3. Create / edit JavaScript file

Terminal


touch app/assets/javascripts/tutorial.js

tutorial.js


$(function() {
  $('#tutorial').click(function() {
    introJs()
      .setOptions({
        nextLabel: 'Next →',
        prevLabel: '← Previous',
        skipLabel: 'skip',
        doneLabel: 'End',
        exitOnOverlayClick: false,
        showStepNumbers: false,

        steps: [
          {
            intro:
              '<b>Welcome to Bookers!</b><br>I will briefly introduce how to use Books!',
          },
          {
            element: '#introjs-step1',
            intro: 'Please enter a title',
          },
          {
            element: '#introjs-step2',
            intro: 'Please enter the text',
          },
          {
            element: '#introjs-step3',
            intro: 'You can post a book by pressing the "Post" button.',
          },
        ],
      })
      .start();
  });
});

[Explanation]

① The tutorial starts by pressing the button with the ID tutorial.

$('#tutorial').click(function() {}

(2) Define a function for setting the tutorial.

.setOptions({})

③ Set the menu.

nextLabel: 'Next →',
prevLabel: '← Previous',
skipLabel: 'skip',
doneLabel: 'End',
exitOnOverlayClick: false,
showStepNumbers: false,

④ Set the tutorial.

steps: []

⑤ Set each modal.

** ◎ When ʻelement` is not set **

{
  intro: 'This is a tutorial.',
}

It is displayed in the center of the screen.
スクリーンショット 2020-07-16 10.52.12.png

** ◎ When element is set **

{
  element: '#introjs-step1',
  intro: 'Please enter a title.',
}

It is displayed focusing on the HTML corresponding to the set ID.
スクリーンショット 2020-07-16 10.54.31.png

4. Edit the view

① Install the button.

~html.slim


button id='tutorial'
  |Tutorial start

② Give an ID.

~html.slim


= f.text_field :title, class:'form-control', id: 'introjs-step1'

If you want to implement it with other movements

intro.js official page

(2) When you scroll to the bottom of the page, the following screen will appear. If you want to see the movement, click DEMO, and if you want to implement it, press SOURCE to see the sample code.

スクリーンショット 2020-07-16 11.11.09.png