사용자:Senouis/리버티게임 안드로이드 애플리케이션: 두 판 사이의 차이

리버티게임, 모두가 만들어가는 자유로운 게임
17번째 줄: 17번째 줄:
* CSS는 [[미디어위키:Common.css]]를 먼저 앱 내에 별도의 파일로 넣어두고, 추후에 가젯별 CSS을 앱에 포함하면서, 사용자 CSS 로드 기능을 추가할 필요가 있다.
* CSS는 [[미디어위키:Common.css]]를 먼저 앱 내에 별도의 파일로 넣어두고, 추후에 가젯별 CSS을 앱에 포함하면서, 사용자 CSS 로드 기능을 추가할 필요가 있다.
** 리버티게임 앱을 시작할 때 CSS 파일을 업데이트하는 기능?
** 리버티게임 앱을 시작할 때 CSS 파일을 업데이트하는 기능?
* 가젯은 JS 파일을 action=raw로 가져와 보여진 HTML 페이지에 추가로 실행
* [[미디어위키:Common.js|커먼자스]]와 가젯 스크립트는 JS 파일을 action=raw로 가져와 보여진 HTML 페이지에 추가로 실행
** 사용자가 어떤 가젯을 사용하는지 알 필요가 있음
** 사용자가 어떤 가젯을 사용하는지 알 필요가 있음


2024년 3월 18일 (월) 17:14 판

이 문서는 리버티게임 공식 안드로이드 앱에 대해 다룬다.

주어진 시간이 많지 않으므로 모바일 앱 개발 속도 하나는 정말 빠른 Delphi 11 Community Edition으로 개발할 예정

왜 필요한가?

미디어위키 엔진은 전통적으로 모바일 웹 브라우징에서 상당히 약한 모습을 보이는데, 적합한 스킨도 많지 않고(사이드바 기능도 없는 쓰레기 같은 미네르바 노이에가 기본값이다), CodeEditor가 오히려 편리한 데스크탑 환경과 달리 터치스크린 제스처가 기본인 모바일 환경은 타이핑이 어렵다는 점과 겹쳐 스마트폰으로 리버티게임에 게임을 만드는 기여를 어렵게 하고 있다.

무엇이 필요한가?

  • 크게 화면 상단의 문서 뷰어, 문서 편집 창, 보호(후순위 구현), 이동(후순위 구현), 팝업 메뉴로 나뉜다.
  • 앱 시작 시 리버티게임:대문을 기본적으로 보여준다.

뷰어 창

중앙의 화면과 아래의 문서 명이 적힌 텍스트 입력 상자가 존재

방법 1: 직접 앱에서 렌더링(비권장)

  • action=parse로 미디어위키 API를 호출하면 mw-parser-output 클래스의 div태그로 감싸진 HTML Element들이 반환된다. -> 이것을 델파이 웹페이지뷰어 프레임워크 컴포넌트 사용해서 렌더링
  • CSS는 미디어위키:Common.css를 먼저 앱 내에 별도의 파일로 넣어두고, 추후에 가젯별 CSS을 앱에 포함하면서, 사용자 CSS 로드 기능을 추가할 필요가 있다.
    • 리버티게임 앱을 시작할 때 CSS 파일을 업데이트하는 기능?
  • 커먼자스와 가젯 스크립트는 JS 파일을 action=raw로 가져와 보여진 HTML 페이지에 추가로 실행
    • 사용자가 어떤 가젯을 사용하는지 알 필요가 있음

방법 2: 웹페이지를 그대로 보여주되, 편집 버튼만 숨기기(권장)

  • TWebBrowser 컴포넌트 사용
  • 문서명은 URL을 적절하게 처리(URL 디코딩 및 공백 문자 변환)하여 표시
  • 웹 페이지에서 'ca-edit' id의 엘레먼트(편집 버튼)에서 display CSS 속성을 none으로 설정: FMX의 TwebBrowser에서 불가능하므로 웹에서 사전 세팅하거나 페이지 이동을 후킹하는 방법이 필요

편집 창

  • 편집 창을 열면 action=raw로 미디어위키 API를 호출하고 파싱하여 편집 창에 렌더링 + 유저가 편집 가능한지 확인(편집 불가일 경우 편집 창을 열지 않고 대신 action=raw의 결과만 보여줌)
  • 제스처 기반 문서 작성: 타이핑을 별도의 창으로 분리하고, 기본적으로 HTML Element 별로 편집하여 터치스크린 제스처로 문서 내 디스플레이 위치를 조정하게 하는 방법이 필요하다 -> 모바일용 Microsoft OneNote에 가까운 편집 창 형태가 되어야 한다.

    • VisualEditor로도 텍스트의 화면 내 위치 지정은 불가능하므로, CSS 속성 지정(position:relative; + left 값 설정(기본 0%) + inline-size 값 설정(기본 100%) + overflow-wrap:break-word;)이 된 p 태그가 필요하다. 지금 이 설명문이 어떻게 보이는지 참조하라.

    • 데스크탑용 문법 삽입 상자와 다른 모바일 전용 문법 삽입 창이 필요하다: 해당 기능은 특정 미디어위키 확장 기능에 의존하므로, 확장 기능의 동작을 앱에서도 구현할 필요가 있다.
  • 저장 버튼을 누르면 먼저 편집 요약을 적도록 하고, 다시 저장 버튼을 누르면 mw:API:Edit 전송하고 성공 응답을 받은 경우에 편집 창을 닫음
  • 추가로 구현이 필요한 확장 기능

보호/이동(후순위 구현)

  • 보호 창의 경우 먼저 권한 확인 후 권한이 없으면(일반 사용자 이하) 팝업 창을 띄우며 닫고, 그렇지 않은 경우 드롭다운 메뉴들이 포함된 창
    • 편집 방어와 이동 기능만 드롭다운으로 설정 가능하게 한 다음, mw:API:Protect 명세에 따라 요청을 보냄
  • 이동은 사유와 세부 옵션 세팅을 보호 창과 같은 방식으로 보여주고, mw:API:Move 명세에 따라 요청을 보냄
  • 요청 성공 시 창을 닫고, 요청 실패 시 팝업 메뉴로 안내

팝업 메뉴: 로그인/로그아웃 버튼과 설정

  • 로그인 안 된 상태에서 로그인 버튼을 누르면 ID/비밀번호 입력 칸 및 로그인 버튼이 있음
  • 미디어위키가 지원하는 OAuth 활용해 로그인: 리버티게임 계정과 앱을 연결
    • 2단계 인증 지원 필요: 본인 계정으로 테스트
  • 설정 창은 별도의 레이어 위에 보여줌
    • 앱 버전 표시, 글자 크기, 임시 저장 데이터 비우기, CSS 업데이트

그 외

  • 자동 저장 기능은 거의 필수다. 문서 별로 JSON 포맷의 임시 저장 파일을 만들자.
    • 파일명은 'TempEdit/(문서명).json' 혹은 'TempEdit/(문서명).(문단 제목).json'이 될 것이다.
    • 최초 로드 시 JSON에 action=raw의 저장 편집 탭의 저장 버튼을 누르면 JSON이 삭제된다. 이것 이외에도 임시 저장 비우기 기능이 설정에 있어야 한다.
원본 주소 "https://libertyga.me/index.php?title=사용자:Senouis/리버티게임_안드로이드_애플리케이션&oldid=248964"