추기:
이제 Vue로 업데이트되었습니다.
메모장 대신 Gmail 초고를 쓰는 것도 한계를 느꼈다.
하지만 풍부한 교재를 싫어하기 때문에 에버노트도 쓰고 싶지 않다.
아니면 표시에 필기를 하고 싶다고.사진과 풍부한 기능을 붙일 필요가 전혀 없다.로컬 버전도 필요 없어요.
그래서 이런 사이트가 많을 거라고 생각하면서 직접 해봤어요.
완전 직접 사용하기 위해 제작됐지만, 모처럼 찾아온 기회에 발매가 가능한 형태로 제작됐다.
『 CosMoNOTE 』

손님 계좌가 있으니 시도해 보세요.
네, 개인적으로 만든 사이트에 필기를 저장하고 싶은 사람은 드물지만 필기의 내용은 암호화되어 저장됩니다. 저도 복원되지 않을 테니 안심하세요.

기술을 사용하다

PHP+MySQL+JS(jQuery)를 사용했습니다.
로그인한 비망록 화면은 페이지로 이동하지 않고 aax 통신을 통해 이동합니다.

버튼 없는 편집/표시 모드 전환

메모 화면은 태그 표시 메모 및 메모 편집 모드로 구분됩니다.
컴퓨터가 비고 표시 상태에서 텍스트를 두 번 클릭하면 편집 모드에 들어갑니다.
편집 모드에서 텍스트 영역 이외의 영역을 클릭하면 표시 상태가 복원됩니다.

이 전환 방법 외에 '편집 단추' 가 없습니다.
하지만 친구의 시용을 거쳐 설명 없이 전환해 그대로 채용했다.

회전식 지원

스마트폰은 행동에 따라'디스플레이','편집','메모 일람'등 3가지 모드를 화면 아래쪽 버튼으로 전환했다.

디자인 같은 거.

짙은 색의 배색은 나로 하여금 Sublime Text를 모방하게 했다.나는 문자 편집기처럼 만들고 싶다.
로고의 코스모노트는 여러분이 추측한 대로 코스모나우트와 노트의 느낌이 납니다.
왜 대문자와 소문자가 섞여 있는 걸까요? ConoHavps의 짝퉁입니다.

자동 저장

비고 편집 화면은 Qita의 집필 화면과 마찬가지로 자동으로 저장됩니다.
이 구조는 이렇다.

var saveFlg = false;
$form.find('input, textarea').on('keyup', function() {
    saveFlg = true;
});
setInterval(function() {
    if(saveFlg) saveMemo(); // この関数内で保存成功時フラグオフ
}, 3000);

업그레이드할 때 하나씩 저장하면 위험하니 저장 표시를 ON으로 설정하면 된다.
3초마다 로고를 검사하고 ON이면 저장을 실행합니다.
'3초마다'외에도 다른 노트로 바꾼 시간 등에서도 로고 저장을 확인해 보관해야 한다.

설명 삭제

설명을 삭제하면 DB 내에서 논리적으로 삭제됩니다.
이대로 쌓이는 게 싫으니까, 논리적 삭제부터 3일이 지난 건 물리적으로 삭제된다.
(로그인 시 트리거)
하지만 지금은 논리적 삭제에서 부활하는 쓰레기통 기능이 없어 별다른 의미가 없다.

텍스트 영역의 탭 들여쓰기

textarea에서 탭 위치 키의 축소를 하려고 합니다.
이것을 하기 위해 쓴 js는 여기에 있습니다.
『 textarea에서 탭 키를 들여쓰는 js (여러 줄 지원) 』
반각 공간파를 전혀 고려하지 않으면 어렵다.

태그 변환

Parsedown이라는 PHP 라이브러리를 사용했습니다.
http://parsedown.org/

UI에서 중요하게 생각하는 거.

aax 통신의 신호 보이기

뒤에서 비동기적으로 자동으로 저장된다고 해도 그 신호가 없으면 잘 보관하고 있지 않을까.
이 때문에 aax 통신을 할 때 화면 위에 불러오는 아이콘이 나타납니다.

만약 회선이 매우 느리고 통신이 매우 오래 걸렸다면 이 아이콘이 끊임없이 돌아가는 것이 통신의 문제라는 것을 누구나 알 수 있을 것이다.

세션 분리 고려

내가 직접 사용할 때 이 노트 사이트는 브라우저의 라벨에 하루 종일 열려 있고 잠시 두었다가 다시 노트를 쓴다는 것을 알아차렸다.
이렇게 하면 세션이 끊어져서 저장할 수 없습니다!
여기서 편집 중인 노트가 사라지면 너무 슬퍼요. 로그인 창이 팝업으로 등장해서 aax 로그인을 통해 다시 편집을 시작합니다.

토론 중인 업데이트

정렬 기능

그룹 기능

쓰레기통 기능

사용자가 CSS 사용자 정의 기능을 설정할 수 있음

Qita처럼 편집화면과 화면을 가로로 표시

그리고 제가 평소에 사용하지 않는 표기법에 대해서는 스타일이 없을 수도 있어요.