[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 6] Implementation of search 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
[Rails] Implementation of CSV export function
Implementation of search function
Rails [For beginners] Implementation of comment function
Implementation of pagination function
[Vue.js] Implementation of menu function Implementation version rails6
[Ruby on rails] Implementation of like function
[Vue.js] Implementation of menu function Vue.js introduction rails6
[Rails] Implementation of search function using gem's ransack
Implementation of Ruby on Rails login function (Session)
[Rails 6] Implementation of inquiry function using Action Mailer
[Rails] Implementation of retweet function in SNS application
Rails implementation of ajax removal
Rails fuzzy search function implementation
Implementation of sequential search function
Implementation of like function (Ajax)
Implementation of image preview function
Login function implementation with rails
[Rails 6] Pagination function implementation (kaminari)
Ruby on Rails <2021> Implementation of simple login function (form_with)
[Rails] Implementation of drag and drop function (with effect)
rails tutorial
rails tutorial
[Ruby on Rails] Implementation of tagging function/tag filtering function
rails tutorial
rails tutorial
[Rails] Implementation of multi-layer category function using ancestry "seed"
rails tutorial
[Rails] Implementation of SNS authentication (Twitter, Facebook, Google) function
rails tutorial
rails tutorial
Rails tutorial (6th edition) Background operation of login function
[Rails Struggle/Rails Tutorial] Summary of Rails Tutorial Chapter 2
[Rails] Implementation of user logic deletion
[Rails] Implementation of many-to-many category functions
[Rails] gem ancestry category function implementation
[Rails 6] Like function (synchronous → asynchronous) 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 tagging function using intermediate table (without Gem)
Rails tutorial (6th edition) Background operation of password reset function
[Rails] Implementation of new registration function in wizard format using devise
[Rails] Addition of Ruby On Rails comment function
rails tutorial Chapter 6
Rails tutorial test
DM function implementation
Rails Addition of easy and easy login function
[Rails 6] Ranking function
rails tutorial Chapter 1
[Rails Struggle/Rails Tutorial] Summary of Heroku commands