최초의 자작 앱

학교 과제로 응용 프로그램을 만들었으므로,
그 되돌아 가고 싶습니다.

우선 응용 프로그램에 관한 것이지만 블로그를 만들었습니다.

이번에 주어진 기간이 2주라는 기간이었기 때문에,
그 기간 내에 실현할 수 있거나 우선적으로 작성하고 싶은 어플리케이션을 생각해 작성했습니다.

디자인

보자 봐 흉내입니다만, 자신류에 설계도를 만들었습니다.
자신 속에서 어떤 이미지로 만들 것인가라는 것을 분명하게 하고 싶었기 때문에, 작성했습니다.
굉장히 퀄리티가 낮음, ,,w


최종적으로는 외형은 전혀 다른 것이 완성되게 됩니다만 웃음
이것을 만들어서 어떤 기능을 구현하는지,
어디를 우선하는지 생각하기 쉬웠습니다!

전면 부분 구현

이번에는 처음으로 자작 앱이라는 것도 있고,
여러 가지에 도전해 보자는 것으로 bootstrap을 사용해 top 페이지를 만들었습니다.

↓완성형
이미 설계도와 전혀 다르네요 w
반성하고 있습니다. .


이번에 이 페이지에서 구현하고 싶었던 포인트는,
· 게시 한 이미지와 제목을 하나의 카드로 나란히 표시합니다.
· bootstrap 사용

이번에는 cdn으로 구현해 보겠습니다.

app/views/application.html.erb

...
    <div class="content">
      <%= yield %>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

body의 요소가 모두 로드된 후에 반영하도록 합니다.

bootstrap에서는 클래스명에 따라 css를 반영해 나가는 구조로 되어 있습니다.

<div class="col-md-4">
  <div class="card mb-4 shadow-sm">
    <img src="<%= blog.image %>" class="bd-placeholder-img card-img-top"  >
    <div class="card-body">
      <p class="card-text"><%= blog.title %></p>
      <div class="d-flex justify-content-between align-items-center">
        <div class="btn-group">
          <button type="button" class="btn btn-sm btn-outline-secondary" href="/blogs/#{blog.id}">
            <%= link_to 'View details »',"/blogs/#{blog.id}",method: :get %>
          </button>
        </div>
        <small class="text-muted"><%= blog.user.nickname %></small>
      </div>
    </div>
  </div>
</div>

상세
col ... 컬럼
md-4 ... 장치 당 그리드 시스템 단위
mb-4 ... margin-bottom:1.5rem;
등

실시간 리뷰 및 마크다운 기법

여기까지 보면 이미 알 수 있습니다.
정말 외형의 센스가 없다! ! w
이쪽은 노력해 설계도에 가까워 갈 생각,,,


여기를 구현하는 데 사용한 것은
· gem 'redcarpet'
· marked.js
・vue.js

아래 소스 코드입니다.
본문 투고 양식과 실시간 리뷰 부분이 됩니다.

...
    <div>
      <%= f.label :column %>
    </div>
    <div class = "column-preview">
      <%= f.text_area :column,id: :column,rows: 20,cols: 60, "v-model": "input" ,html: {class: "column-form"} %>
      <div class = "column-preview__is_active" v-html='input | marked'></div>
    </div>
</div>

<div><%= f.submit "投稿" %></div>
<% end %>



<script type="text/javascript">
 window.onload = function() {
 new Vue({
 el: '.column-preview',
 data: {
 input: '<%== j @blog.column %>',
 },
 filters: {
 marked: marked,
 },
 });
 };
</script>

vue.js

el: '.column-preview',
data: {
input: '<%== j @blog.column %>',
}

el은 액션을 반영하려는 범위의 선택기를 지정합니다.
data에서는, 지정한 클래스명에 값을 반영시킨다.

filters: {
marked: marked,
},
filter내에서 어떻게 변화를 가하고 싶은지를 정의한다.
여기에 지정된 marked는

<div class = "column-preview__is_active" v-html='input | marked'></div>

리뷰를 표시하는 요소에 v-html 속성 내에서 |(파이프) 기호로 끝으로 지정한다.

v-model ... 이 속성을 설정한 요소내에 기입해진 값을, 지정된 요소에 같은 내용으로 반영한다.
실제 소스 코드에서 설명하면 v-model로 input을 지정,
리뷰를 보려는 요소에 v-html에 input 값을 넣으면
실시간 리뷰 기능을 만들고 있습니다.

<%= f.text_area :column,id: :column,rows: 20,cols: 60, "v-model": "input" ,html: {class: "column-form"} %>
      <div class = "column-preview__is_active" v-html='input | marked'></div>

v-html ...{{input}}과 유사한 사용법.

marked.js
marked ... 요소를 마크 다운 기법으로 만듭니다.

이상이 주요 기능입니다.

마지막으로

처음으로 스스로 앱을 기능에서 생각해 만들어 보았습니다만,
굉장히 즐거웠던 것과 동시에 에러등으로 꽤 고생했습니다.
다시 한번 블로그에서 출력되는 분의 기사의 고마움을 느꼈습니다.

자신도 점점 아웃풋 해 나가려고 생각했습니다.

이상!

참고 기사

· Bootstrap4의 그리드 시스템 v3에서 변경
ぇtps://우ぇb 하기 위해서도. 코 m / 코오 g / 보오 tst et al p4/201710015697 # v4-g d
· Bootstrap4에 준비된 클래스
htps : // 우ぇb 네 때문에도. 코 m / 코오 g / 보오 tst et al p4 / 201710065870