안녕하세요.나는 주식회사 바칸의 홍보를 맡은 맛술이다.
나는 엔지니어가 아니지만, BannAdvent Calendar2019에 글을 한 편 쓰기로 결정했다.
저는 바칸의 비엔지니어와 엔지니어가 잘 합작하여 블로그 보도에 대한 목록이 생겨서 매우 기쁩니다. 여러분도 공유해 주십시오.

Strikingly가 뭐예요?

Strikingly는 HTML 등 프로그래밍 지식이 없어도 간단하게 홈페이지를 만들 수 있는 홈페이지 제작 도구다.
현재웹 페이지 정보,주식회사 바칸의 서비스 소개 페이지도 Strikingly를 이용하여 제작되었습니다.

나는 프로그래밍 지식이 없지만 수첩을 읽지 않아도 느낌으로 홈페이지를 계속 업데이트할 수 있다.
(내가 바칸에 연결했을 때 이미 HP가 있어서 업데이트만 했다)

Strikingly의 블로그 기능에서 비엔지니어나 링이 쓴 글

Strikingly는 다양한 부분을 쉽게 제작할 수 있는 도구를 제공합니다.상점, 블로그, 외부 합작 & HTML, 소셜네트워크서비스 등이 있지만 오늘 전달할 것은 블로그 기능이다.

바보 홈페이지에서 Strikingly의 블로그 기능을 이용하여 도입 사례 소개, 뉴스 원고, 매체 게재 사례, 바보 통신(이른바 블로그)을 제작하고 발표했다.
・사례 분석
・보도 자료
・미디어 발표 사례
・바칸 통신

Strikingly로 간단하게 카탈로그를 만들 수 없어요.

블로그 글을 쓸 때 목록이 있는 기사를 쓰고 싶어요.SEO 대책으로 추천 목록이 있는 책 등도 있다.SEO에 그렇게 큰 효과가 없어도 독자들은 장편 기사를 쉽게 읽을 수 있을 것이다.
그러나 Strikingly는 디렉터리를 진행할 수 있는 기능을 갖추지 못했다.제목, 텍스트, 이미지, 애니메이션, 단추, 인용, 분리기는 여기까지 간단하게 사용 방법을 이해할 수 있고 자주 사용된다.

하지만 디렉터리를 어떻게 만드는지 "Strikingly 디렉터리"에서 구글을 시도해 봐도 귀중한 기사는 나오지 않았다.

Strikingly로 디렉터리를 만드는 방법.

바칸의 엔지니어들의 힘을 빌려 Strikingly도 목록을 만들 수 있게 되었다.
바보 통신 화장실 편 vol.3 "열지 않는 화장실" IoT 노크로 해결
↑ 블로그 글은 Strikingly로 썼고, 이 글도 목록이 있다.
구체적인 방법을 설명해 드리겠습니다.
디렉터리를 쓰고 싶은 위치에서 1을 누르고 HTML을 선택하면 그 부분은 HTML로 쓸 수 있습니다.

<div class="blog-outline">
  <h3>ー目次ー</h3>
  <h4>
    <ul>
      <li>
        <a href="#mokuji1">オフィスのトイレ個室数は法律で決められている</a>
      </li>
      <li><a href="#mokuji2">基準数をクリアしてもトイレは足りない</a></li>
      <li><a href="#mokuji3">IoTで「開かずのトイレ」にAirKnock®︎（エアノック）を</a></li>
      <li><a href="#mokuji4">AirKnock®︎導入の効果</a></li>
    </ul>
  </h4>
</div>

<style>
  /* 目次 文字 */
  .blog-outline h3 {
    color: #4d2570;
    font-size: 14pt;
    text-align: left;
    font-weight: 700;
    padding: 10px; /* 目次の周囲の枠 */
  }

  /* 内容　文字 */
  .blog-outline h4 {
    color: #4d2570;
    font-size: 12pt;
    text-align: left;
    font-weight: 900;
  }

  /* 内容　リスト */
  .blog-outline ul {
    box-shadow: 0px 0px 3px silver;
    border: solid 1px whitesmoke;
    padding: 0.5em 1em 0.5em 2.3em;
    position: relative;
    background: #fafafa;
  }

  .blog-outline ul li {
    line-height: 1.5;
    padding: 0.5em 0;
    list-style-type: disc;
  }
</style>

그리고 본문의 디렉터리 항목은

<h3 id="mokuji1" style="color: #4d2570; font-size: 20pt;  text-align: left; font-weight:900" >
      オフィスのトイレ個室数は法律で決められている
</h3>

이렇게 하면 블로그에서 좋아하는 디렉터리 항목으로 넘어갈 수 있다.

지금
확인란 iframe 사용선택하면 디렉터리의 외관은 괜찮지만 점프할 수 없는 페이지가 됩니다.

Strikingly에 디렉터리를 만들기 전에 엔지니어와 비엔지니어의 교류

나는 Strikingly가 디렉터리를 할 수 없다는 것을 거의 포기했다.
우연이 겹치면 이런 기사가 쓰일 수 있어요. 그 우연한 연쇄를 기록하고 싶어요.
우선, 내가 엔지니어들과 점심을 먹을 때
"엔지니어들은 모두 순조롭게 업무를 진행하는 코드, 함수, 도구 등을 능숙하게 사용하고 있죠.""예를 들면, 당신은 무슨 일로 괴로워하십니까?"어떤 도구의 데이터는 csv 데이터로 다운로드할 수 없는 규격이라고 말했습니다.
그래서 "이렇게 하면 도와줄 수 있어요"라고 다음날 csv 데이터의 다운로드 방법은 프로그래밍 지식이 없는 나도 할 수 있습니다.
"오! 어려울 때 엔지니어한테 부탁하면 금방 해결될까요!!!"나는 매우 감동했다.
"Strikingly의 블로그 제작 페이지에 HTML을 쓸 수 있는 곳이 있다"는 것을 알아차린 것은 조회를 쉽게 사용할 수 있는 데이터 과학자 A 씨였다.A 씨는 그 자리에서 HTML을 꼬꼬 썼지만, 바로 글자 색깔, 배경, 상자, 축소, 그런 정리된 디렉터리는 할 수 없었다.A 씨는 나에게 이런 건의를 했다.
나는 휴일에 노는 느낌으로 HTML을 많이 시도했다.하지만 어떻게든 점프할 수 있는 디렉터리, CDO가 디자인적으로 OK를 꺼낼 수 있는 디렉터리는 안 된다.(뛰지 않는 이유는 복선상자이니 여러분도 주의하세요)
그래서 바칸 Advent Calendar 2019에도 등장한 엔지니어@kakinouchi에게 문의했습니다.먼저
@kakinouchi: "저는 Strikingly에 대해 잘 몰라요. 구글에 혼자 가 보세요. 아직 모르면 저와 상의해 주시겠어요?"
나: "그런데 Strikingly 여기에 HTML을 쓸 수 있는 곳이 있어요. 여기 코드를 쓰는 방법만 알면 돼요. 제가 이렇게 많이 썼는데 도저히 튀어나오지 않아요."
@kakinouchi: "아, 아시면 그 페이지의 URL을 보내주세요. 나중에 볼게요."
그리고 이 바보 Advent Calendar를 기획한 @kath_y 씨와 두 사람은 디렉터리를 Strikingly로 예쁘게 표현하며 점프 같은 프로그램을 완성했다.
이때 쓴 HTML을 복사해서 디렉터리가 있는 블로그를 하나하나 쓰도록 하겠습니다.
엔지니어와 점심을 먹으면서 엔지니어와 바보의 서비스 이외의 일을 상의해도 된다는 것을 알았지만, 엔지니어에게 공을 던져도 엔지니어가 나를 도와주기 어렵다는 것을 배웠다.제가 직접 해봤는데'여기는 할 수 있지만 앞으로의 조언을 받았으면 좋겠다'는 교류가 중요할 것 같아요.
그리고 "HTML 사용 가능"과 즉석에서 디렉터리 기능을 만들려고 보여주신 데이터 과학자 A 씨에게도 감사드립니다."그러고 보니 25년 전쯤 HTML을 써 봤어요."만약 A 씨가 HTML을 써서 나에게 보여준 10분이 없었다면, 나는 지금 목록도 없이 블로그를 썼을 것이라고 생각한다.
이런 일은 2019년에 매우 기쁜 일이다.
나는 이 페이지의 독자들에게 많은 엔지니어가 있다고 생각한다.엔지니어의 조그마한 도움으로 홍보 업무라도 업무 효율이 한꺼번에 높아지고 기사의 질도 높아진다.엔지니어들에게 "뭐야, 이런 일이 작용할 수 있어?"나는 이렇게 간단한 일이라고 생각한다.주위 사람들과 꼭 교류하세요.
이 기사를 읽고 바보로 일하고 싶은 사람은 이쪽 페이지를 보세요.
・바만 모집 정보
・바칸에 대한 서비스
・웹 페이지 정보