[Rails] Implementation of tutorial function

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 introductionImplementation of posting function

Implementation

1. Download the required files from Github

① Access the link below.

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

① Access the link below.

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

Recommended Posts

[Rails] Implementation of tutorial function
[Rails] Implementation of category function
[Rails] Implementation of like function
[Rails] Implementation of CSV import function
[Rails] Asynchronous implementation of like function
[Rails] Implementation of image preview function
[Rails] About implementation of like function
[Rails] Implementation of user withdrawal function
Implementation of search function
Rails [For beginners] Implementation of comment function
Implementation of pagination function
[Ruby on rails] Implementation of like function
Implementation of Ruby on Rails login function (Session)
[Rails] Implementation of image enlargement function using lightbox2
Rails implementation of ajax removal
Rails fuzzy search function implementation
Implementation of like function (Ajax)
Implementation of image preview function
Implementation of category pull-down function
[Rails] Implementation of drag and drop function (with effect)
rails tutorial
Implementation of Ruby on Rails login function (devise edition)
rails tutorial
[Rails] Implementation of multi-layer category function using ancestry "Preparation"
rails tutorial
rails tutorial
rails tutorial
rails tutorial
rails tutorial
[Rails] Implementation of user logic deletion
[Rails] gem ancestry category function implementation
[Ruby on Rails] Comment function implementation
[Rails] Comment function implementation procedure memo
Implementation of like function in Java
[Rails] Implementation of multi-layer category function using ancestry "Editing form"
[Rails] Implementation of multi-layer category function using ancestry "Creation form"
Rails sorting function implementation (displayed in order of number of like)
[Rails] Implementation of new registration function in wizard format using devise
[Rails] Addition of Ruby On Rails comment function
Implementation of user authentication function using devise (2)
rails tutorial Chapter 6
Rails tutorial test
DM function implementation
Rails Addition of easy and easy login function
rails tutorial Chapter 1
Rails tutorial memorandum 1
Rails tutorial memorandum 2
[Ruby on Rails] Follow function implementation: Bidirectional
[Rails] Category function
rails tutorial Chapter 7
Implementation of user authentication function using devise (1)
rails tutorial Chapter 5
Rails follow function
rails tutorial Chapter 10
Rails Basic CRUD function implementation procedure scaffold
Implementation of user authentication function using devise (3)
rails tutorial Chapter 9
rails tutorial Chapter 8
[Rails] Implementation of tag function using acts-as-taggable-on and tag input completion function using tag-it
[Rails] Implementation of validation that maintains uniqueness
[Beginner] Rails Tutorial